/**
 * pysiechero - hero slider na stronie głównej. Namespace .pysiec-hero*.
 * Przepisane z generycznych, twardo wpisanych hexów (nie z tokenów projektu) na
 * var(--pysiec-*) 1:1 z resztą modułów - patrz assets/css/custom.css (sesja 2026-09-16).
 * Layout/proporcje z surowego pliku źródłowego makiety (Pysiec Sklep.dc.html, linie 212-253).
 */

.pysiec-hero {
  position: relative;
  overflow: hidden;
  /* width:100% jawnie, nie tylko przez efekt uboczny overflow:hidden - patrz identyczny
     komentarz w pysiectiles/views/css/tiles.css (ten sam babol CSS Grid, sesja 2026-09-16).
     max-width dociągnięty do 1200px żeby się wyrównało z .pysiec-tiles (i z makietą -
     obie sekcje mają tam ten sam max-width:1200px). */
  width: 100%;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  /* Boczny padding był clamp(32px,8vw,120px) - na szerokich ekranach zjadał aż 240px
     (120px z każdej strony), przez co środek makiety wychodził dużo węższy niż w
     źródle (clamp(16px,4vw,32px), linia 212 pliku źródłowego). Dosłowna wartość z
     makiety, zgłoszone przez użytkownika (sesja 2026-09-17).
     Dolny padding pomniejszony (72px -> 32px na szerokich ekranach) - user: "zmniejsz
     gapa między hero a kategoriami" (sesja 2026-09-25). Świadome odejście od 1:1 z
     makietą na życzenie użytkownika. */
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 32px) clamp(16px, 2.5vw, 32px);
}

.pysiec-hero__track {
  display: grid;
}

.pysiec-hero__slide {
  display: none;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  min-height: clamp(380px, 46vw, 480px);
  overflow: hidden;
}

.pysiec-hero__slide.is-active {
  display: flex;
}

/**
 * Kolumny NIE są 1fr 1fr (Grid, sztywny podział 50/50, jak było wcześniej) -
 * makieta (linie 214, 227 źródła) ma flex:1 1 320px (tekst) / flex:1 1 360px
 * (zdjęcie) - zdjęcie dostaje świadomie WIĘCEJ miejsca niż tekst. Przy 50/50
 * zdjęcie wychodziło wyraźnie mniejsze niż w makiecie (540px zamiast 560px przy
 * tej samej szerokości viewportu, zgłoszone przez użytkownika zrzutami z
 * DevTools). Sesja 2026-09-18.
 */
.pysiec-hero__content {
  flex: 1 1 320px;
  min-width: 0;
  /* "Darmowa dostawa..." (.pysiec-hero__trust) siedziało w normalnym flow zaraz
     pod CTA - jego pozycja w pionie skakała między slajdami zależnie od
     długości tytułu/opisu/liczby przycisków (zgłoszone zrzutami ekranu obu
     slajdów, sesja 2026-09-25: "doklej darmową dostawę na lewy dolny róg
     zawsze"). align-self:stretch rozciąga tę kolumnę do pełnej wysokości
     rzędu (.pysiec-hero__slide ma domyślnie align-items:center, więc bez
     tego kolumna miałaby tylko wysokość swojej treści) - flex-column +
     margin-top:auto na .pysiec-hero__trust (niżej) przykleja go zawsze na
     sam dół, niezależnie od długości treści nad nim. */
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.pysiec-hero__badge {
  display: inline-block;
  /* .pysiec-hero__content jest teraz flex-column (sesja 2026-09-25, żeby
     przykleić "Darmowa dostawa" do dołu) - bez align-self flex domyślnie
     rozciąga dzieci w poprzek (align-items:stretch), więc pigułka-badge
     rozciągała się na całą szerokość kolumny zamiast trzymać szerokość
     swojego tekstu (zgłoszone zrzutem ekranu, sesja 2026-09-26). */
  align-self: flex-start;
  background: var(--pysiec-cream, #e8dcc5);
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--pysiec-radius-pill, 999px);
}

/**
 * Rozmiary tekstu w tej kolumnie (nagłówek/opis/CTA/zaufanie) były systematycznie
 * mniejsze niż dosłowne wartości z makiety (linie 216-224 źródła) - dociągnięte tu
 * do dokładnych clamp()/px z makiety, na wyraźne życzenie użytkownika (dopasuj, nie
 * zostawiaj mniejsze). Sesja 2026-09-18.
 */
.pysiec-hero__title {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: clamp(32px, 6vw, 58px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--pysiec-text, #1a1a18);
  margin: 18px 0 0;
}

.pysiec-hero__text {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--pysiec-espresso, #3e2f23);
  max-width: 46ch;
  margin: 18px 0 0;
}

.pysiec-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.pysiec-hero__cta {
  height: 52px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--pysiec-radius-pill, 999px);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

.pysiec-hero__cta--primary {
  background: var(--pysiec-brand, #b08858);
  color: #fff;
}

.pysiec-hero__cta--primary:hover,
.pysiec-hero__cta--primary:focus-visible {
  background: var(--pysiec-brand-hover, #9b7346);
}

.pysiec-hero__cta--secondary {
  border: 1px solid var(--pysiec-espresso, #3e2f23);
  color: var(--pysiec-espresso, #3e2f23);
}

.pysiec-hero__cta--secondary:hover,
.pysiec-hero__cta--secondary:focus-visible {
  background: var(--pysiec-espresso, #3e2f23);
  color: var(--pysiec-bg, #faf8f3);
}

.pysiec-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* auto zamiast stałego 30px - przykleja element do dołu kolumny (patrz
     komentarz przy .pysiec-hero__content wyżej), zamiast stałego odstępu od
     treści nad nim. */
  margin-top: auto;
  padding-top: 30px;
  font-size: 13px;
  color: var(--pysiec-espresso, #3e2f23);
}

.pysiec-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pysiec-hero__trust-dot {
  width: 8px;
  height: 8px;
  background: var(--pysiec-accent-green, #8fa35c);
  border-radius: var(--pysiec-radius-pill, 999px);
}

.pysiec-hero__media {
  position: relative;
  min-width: 0;
  flex: 1 1 360px;
}

.pysiec-hero__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  border-radius: var(--pysiec-radius-xl, 22px);
  background: var(--pysiec-cream, #e8dcc5);
}

.pysiec-hero__note {
  position: absolute;
  left: -6px;
  bottom: -18px;
  max-width: calc(100% - 32px);
  background: #fff;
  border: 1px solid var(--pysiec-line-20, rgba(62, 47, 35, .2));
  border-radius: 18px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.3;
}

.pysiec-hero__note-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--pysiec-radius-pill, 999px);
  flex: 0 0 auto;
  background: repeating-linear-gradient(
    90deg,
    var(--pysiec-espresso, #3e2f23) 0 4px,
    var(--pysiec-bg, #faf8f3) 4px 8px
  );
}

.pysiec-hero__note-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pysiec-hero__note strong {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  color: var(--pysiec-text, #1a1a18);
}

.pysiec-hero__note-subtext {
  color: var(--pysiec-espresso, #3e2f23);
  opacity: .75;
}

.pysiec-hero__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(16px, 2.5vw, 24px);
}

.pysiec-hero__arrow {
  width: 44px;
  height: 44px;
  border: 1px solid var(--pysiec-line-28, rgba(62, 47, 35, .28));
  border-radius: var(--pysiec-radius-pill, 999px);
  background: transparent;
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 16px;
  cursor: pointer;
  flex: 0 0 auto;
}

.pysiec-hero__arrow:hover,
.pysiec-hero__arrow:focus-visible {
  background: var(--pysiec-espresso, #3e2f23);
  color: var(--pysiec-bg, #faf8f3);
  border-color: var(--pysiec-espresso, #3e2f23);
}

.pysiec-hero__progress {
  display: flex;
  gap: 8px;
  flex: 1 1 160px;
  min-width: 0;
}

.pysiec-hero__dot {
  display: block;
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  height: 4px;
  border: 0;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: var(--pysiec-cream, #e8dcc5);
  padding: 0;
  cursor: pointer;
}

/* Prawdziwy pasek postępu (jak w makiecie), nie statyczne podświetlenie - wypełnia się
   w tempie autoplay (6s, patrz hero.js AUTOPLAY_MS) i zeruje przy zmianie slajdu, bo
   JS za każdym razem zdejmuje i nakłada klasę is-active na nowo (restart animacji). */
.pysiec-hero__dot-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--pysiec-brand, #b08858);
  border-radius: inherit;
}

.pysiec-hero__dot.is-active .pysiec-hero__dot-fill {
  animation: pysiec-hero-dot-fill 6s linear forwards;
}

.pysiec-hero__dot.is-active.is-paused .pysiec-hero__dot-fill {
  animation-play-state: paused;
}

@keyframes pysiec-hero-dot-fill {
  from { width: 0; }
  to { width: 100%; }
}

.pysiec-hero__pause {
  height: 36px;
  min-width: 92px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pysiec-line-24, rgba(62, 47, 35, .24));
  border-radius: var(--pysiec-radius-pill, 999px);
  background: transparent;
  color: var(--pysiec-espresso, #3e2f23);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}

.pysiec-hero__pause:hover,
.pysiec-hero__pause:focus-visible {
  border-color: var(--pysiec-espresso, #3e2f23);
  background: #fff;
}

.pysiec-hero__counter {
  font-size: 13px;
  color: rgba(62, 47, 35, .75); /* kontrast >= 4,5:1 (wcześniej token obramowania = 1,7:1) */
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .pysiec-hero__slide {
    grid-template-columns: 1fr;
  }

  .pysiec-hero__media {
    order: -1;
  }
}


/**
 * Animacja przejścia między slajdami (sesja 2026-10-05): szybka (~0,6 s) i lekka - treść
 * wjeżdża od dołu kolejno (badge -> tytuł -> opis -> przyciski -> info o dostawie), zdjęcie
 * wsuwa się z boku i "osiada" ze skali 1.06, a karteczka z notką wyskakuje na końcu.
 * Slajdy przełączane są przez display:none/flex, więc animacja startuje sama przy każdym
 * pokazaniu slajdu. Klasa .is-animated na sekcji dochodzi dopiero po pierwszej zmianie
 * (hero.js) - pierwsze wyświetlenie strony NIE jest animowane, żeby nie opóźniać LCP.
 * Wyłączone przy prefers-reduced-motion.
 */
@media (prefers-reduced-motion: no-preference) {
  .pysiec-hero.is-animated .pysiec-hero__slide.is-active .pysiec-hero__content > * {
    animation: pysiec-hero-rise .6s cubic-bezier(.22, .8, .3, 1) backwards;
  }

  .pysiec-hero.is-animated .pysiec-hero__slide.is-active .pysiec-hero__content > :nth-child(2) { animation-delay: .07s; }
  .pysiec-hero.is-animated .pysiec-hero__slide.is-active .pysiec-hero__content > :nth-child(3) { animation-delay: .14s; }
  .pysiec-hero.is-animated .pysiec-hero__slide.is-active .pysiec-hero__content > :nth-child(4) { animation-delay: .21s; }
  .pysiec-hero.is-animated .pysiec-hero__slide.is-active .pysiec-hero__content > :nth-child(5) { animation-delay: .28s; }

  .pysiec-hero.is-animated .pysiec-hero__slide.is-active .pysiec-hero__media img {
    animation: pysiec-hero-image .8s cubic-bezier(.22, .8, .3, 1) backwards;
  }

  .pysiec-hero.is-animated .pysiec-hero__slide.is-active .pysiec-hero__note {
    animation: pysiec-hero-pop .5s cubic-bezier(.34, 1.4, .5, 1) .45s backwards;
  }
}

@keyframes pysiec-hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes pysiec-hero-image {
  from { opacity: 0; transform: translateX(28px) scale(1.06); }
  to { opacity: 1; transform: none; }
}

@keyframes pysiec-hero-pop {
  from { opacity: 0; transform: translateY(10px) scale(.92); }
  to { opacity: 1; transform: none; }
}