/* Matove – baner wyceny druku 3D na stronie głównej.
   Wszystko pod #mw-banner: nie rusza motywu, a selektor z ID wygrywa z typowymi regułami motywu (np. #index h2, #index a). */
#mw-banner {
  --mwb-ink: #2b2a26;
  --mwb-muted: #6c675d;
  --mwb-olive: #5c6338;
  --mwb-olive-dark: #464c29;
  --mwb-sand: #f3eee5;
  --mwb-line: #e3dacb;
  --mwb-white: #fffdf9;

  position: relative;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  grid-template-areas: "art head cta" "art body cta";
  align-items: center;
  gap: .45rem 1.75rem;
  margin: 1.5rem 0;
  padding: 1.25rem 2rem 1.25rem 1.5rem;
  background: var(--mwb-sand);
  border: 1px solid var(--mwb-line);
  border-radius: 8px;
  color: var(--mwb-ink);
  line-height: 1.5;
  overflow: hidden;
  box-sizing: border-box;
}
#mw-banner *, #mw-banner *::before, #mw-banner *::after { box-sizing: border-box; }

#mw-banner .mwb__art { grid-area: art; width: 168px; line-height: 0; }
#mw-banner .mwb__head { grid-area: head; align-self: end; min-width: 0; }
#mw-banner .mwb__body { grid-area: body; align-self: start; min-width: 0; }
#mw-banner .mwb__art svg { display: block; width: 100%; height: auto; overflow: visible; }
#mw-banner .mwb__model, #mw-banner .mwb__file, #mw-banner .mwb__tag { transition: transform .35s ease; }

#mw-banner .mwb__eyebrow {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mwb-olive);
}
#mw-banner .mwb__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--mwb-ink);
}
#mw-banner .mwb__text {
  max-width: 40rem;
  margin: 0;
  font-size: .95rem;
  color: var(--mwb-muted);
}
#mw-banner .mwb__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
}
#mw-banner .mwb__facts li {
  margin: 0;
  padding: .2rem .6rem;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--mwb-ink);
  background: var(--mwb-white);
  border: 1px solid var(--mwb-line);
  border-radius: 999px;
  white-space: nowrap;
  list-style: none;
}
#mw-banner .mwb__facts li::before, #mw-banner .mwb__facts li::marker { content: none; }

#mw-banner .mwb__cta {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.35rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: var(--mwb-olive);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease;
}
/* Cały baner jest klikalny, ale w kodzie to jeden link (dobrze dla czytników ekranu i Google). */
#mw-banner .mwb__cta::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
#mw-banner .mwb__cta svg { flex: none; transition: transform .2s ease; }
#mw-banner:hover .mwb__cta, #mw-banner .mwb__cta:focus-visible { background: var(--mwb-olive-dark); color: #fff; text-decoration: none; }
#mw-banner:hover .mwb__cta svg { transform: translateX(3px); }
#mw-banner:hover .mwb__model { transform: translateY(-3px); }
#mw-banner:hover .mwb__file { transform: translate(2px, 2px); }
#mw-banner .mwb__cta:focus-visible { outline: none; }
#mw-banner .mwb__cta:focus-visible::after { outline: 2px solid var(--mwb-olive); outline-offset: 3px; }

/* Tablet: przycisk pod tekstem */
@media (max-width: 991px) {
  #mw-banner {
    grid-template-columns: 136px minmax(0, 1fr);
    grid-template-areas: "art head" "art body" "art cta";
    gap: .45rem 1.5rem;
    padding: 1.25rem 1.5rem 1.25rem 1.25rem;
  }
  #mw-banner .mwb__art { width: 136px; }
  #mw-banner .mwb__cta { justify-self: start; margin-top: .5rem; }
}

/* Telefon: grafika obok tytułu, przycisk na całą szerokość */
@media (max-width: 575px) {
  #mw-banner {
    grid-template-columns: minmax(0, 1fr) 76px;
    grid-template-areas: "head art" "body body" "cta cta";
    gap: .7rem .75rem;
    padding: 1rem;
  }
  #mw-banner .mwb__art { width: 76px; align-self: center; }
  #mw-banner .mwb__head { align-self: center; }
  #mw-banner .mwb__eyebrow { font-size: .66rem; letter-spacing: .12em; margin-bottom: .25rem; }
  #mw-banner .mwb__title { font-size: 1.12rem; }
  #mw-banner .mwb__text { font-size: .9rem; }
  #mw-banner .mwb__facts { margin-top: .6rem; }
  #mw-banner .mwb__facts li { font-size: .74rem; }
  #mw-banner .mwb__cta { justify-self: stretch; width: 100%; margin-top: .1rem; padding: .8rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  #mw-banner .mwb__model, #mw-banner .mwb__file, #mw-banner .mwb__tag, #mw-banner .mwb__cta, #mw-banner .mwb__cta svg { transition: none; }
  #mw-banner:hover .mwb__model, #mw-banner:hover .mwb__file, #mw-banner:hover .mwb__cta svg { transform: none; }
}