/* ==========================================================================
   guide.css — layout stron poradnikowych (treść + spis treści)
   Używany przez src/dla-rodzicow.njk (extraHead). Nadbudowa nad trip.css:
   klasy `trip-*` dają typografię i przyciski, `guide-*` dodaje dwukolumnowy
   układ ze spisem treści. Kolory wyłącznie z tokens.css.
   ========================================================================== */

.guide {
  /* Navbar jest `position: fixed`, więc kotwice muszą się zatrzymać pod nim,
     a lepki spis treści zaczepić poniżej jego dolnej krawędzi. */
  --guide-nav-h: 92px;
  --guide-toc-w: 260px;
}

/* --- Nagłówek strony -----------------------------------------------------
   Bez zdjęcia: poradnik ma się otwierać tekstem, nie kolejnym hero.
   Navbar jest `fixed` i przezroczysty u góry, więc pasek musi mieć zapas
   od góry, żeby nadlinia nie weszła pod logo. */

.guide-head {
  padding-top: calc(var(--guide-nav-h) + clamp(24px, 3vw, 40px));
  background: var(--color-primary);
  color: var(--color-white);
}

.guide-head .trip__eyebrow {
  color: rgba(var(--color-white-rgb), 0.82);
}

.guide-head .trip__title {
  color: var(--color-white);
}

.guide-head .trip__lead {
  max-width: 680px;
  color: rgba(var(--color-white-rgb), 0.92);
}

/* --- Układ dwukolumnowy --------------------------------------------------
   Zwykły flex-wrap zamiast grida: przy wąskim ekranie spis treści sam
   przeskakuje nad treść i rozciąga się na pełną szerokość, bez media query. */

.guide__layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  align-items: flex-start;
}

.guide__body {
  flex: 999 1 560px;
  min-width: 0;
}

.guide__section + .guide__section {
  margin-top: clamp(40px, 5.5vw, 68px);
}

/* Kotwica musi się zatrzymać pod przyklejonym navbarem, inaczej nagłówek
   sekcji ląduje za nim. */
.guide__section {
  scroll-margin-top: calc(var(--guide-nav-h) + 16px);
}

.guide__section-title {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 500;
}

.guide__section .trip__lead {
  margin-top: 14px;
}

.guide__p {
  margin-top: 16px;
  font-size: clamp(1rem, 1.35vw, 1.0625rem);
  line-height: 1.75;
  color: var(--trip-muted);
}

/* --- Spis treści ---------------------------------------------------------
   Desktop: lepki panel w lewej kolumnie.
   Mobile: <details> nad treścią, domyślnie zwinięty — patrz niżej. */

.guide-toc {
  flex: 1 1 var(--guide-toc-w);
  max-width: 300px;
  padding: 20px 16px;
  background: var(--color-soft-bg);
  border-radius: var(--radius-md);
}

@media (min-width: 992px) {
  /* Na desktopie spis treści jest zawsze rozwinięty (atrybut `open` ustawia
     guide-toc.js) i nie ma czego zwijać — nagłówek przestaje być kontrolką. */
  .guide-toc__summary {
    pointer-events: none;
    cursor: default;
  }

  .guide-toc__chevron {
    display: none;
  }

  .guide-toc {
    position: sticky;
    top: calc(var(--guide-nav-h) + 16px);
    align-self: flex-start;
    /* Przy bardzo niskim oknie panel ma się przewinąć sam,
       zamiast chować pozycje pod krawędzią ekranu. */
    max-height: calc(100vh - var(--guide-nav-h) - 32px);
    overflow-y: auto;
  }
}

.guide-toc__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  cursor: pointer;
  list-style: none;
}

.guide-toc__summary::-webkit-details-marker {
  display: none;
}

.guide-toc__chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.guide-toc[open] .guide-toc__chevron {
  transform: rotate(180deg);
}

/* Odstęp między pozycjami: bez niego zaokrąglone tło pozycji aktywnej
   i tło pozycji pod kursorem stykają się krawędziami i zlewają w jedną
   plamę. 4 px wystarczy, żeby każda czytała się osobno. */
.guide-toc__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.guide-toc__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.96875rem;
  color: var(--trip-muted);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.guide-toc__link:hover,
.guide-toc__link:focus-visible {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-dark-text);
  text-decoration: none;
}

/* Stan aktywny ustawia guide-toc.js (IntersectionObserver). Jasny tint marki
   zamiast --color-primary-light: ten drugi jest jeszcze z poprzedniego teelu
   i odstaje od szałwii — patrz uwaga w CLAUDE.md. */
.guide-toc__link[aria-current="true"] {
  background: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-dark-text);
  font-weight: 600;
}

/* `trip-btn` jest pigułką (--radius-pill). Na pełnej szerokości wąskiej
   kolumny, przy tekście łamiącym się na dwie linie, taki promień robi z
   przycisku bańkę — tu bierze promień kart, jak reszta panelu. */
.guide-toc__cta {
  width: 100%;
  margin-top: 16px;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  text-align: center;
}

/* --- Checklista sprzętowa ------------------------------------------------ */

.guide-kit {
  padding: clamp(28px, 4vw, 40px);
  background: var(--color-soft-bg);
  border-radius: var(--radius-md);
}

.guide-kit__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.guide-kit__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px;
  background: var(--color-white);
  border-radius: var(--radius-sm);
}

/* Ikona zamiast numeru: lista sprzętu nie jest kolejnością kroków, więc
   numeracja sugerowała porządek, którego nie ma. Jasny tint marki jak pod
   ikonami w sekcjach features10 na `zima` — nie --color-primary-light,
   który jest jeszcze ze starego teelu (patrz CLAUDE.md). */
.guide-kit__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-circle);
  background: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-primary);
}

.guide-kit__icon svg {
  width: 22px;
  height: 22px;
}

.guide-kit__title {
  margin: 2px 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
}

.guide-kit__desc {
  margin: 0;
  font-size: 0.96875rem;
  line-height: 1.65;
  color: var(--trip-muted);
}

.guide-kit__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.guide-kit__aside {
  flex: 1 1 280px;
  padding: 22px 26px;
  background: var(--color-white);
  border-radius: var(--radius-sm);
}

.guide-kit__aside--accent {
  background: var(--color-accent-wash);
}

.guide-kit__aside h3 {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
}

.guide-kit__aside p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--trip-muted);
}

.guide-kit__aside .trip-btn {
  margin-top: 14px;
}

/* --- Pary kart (gotowość dziecka) ---------------------------------------- */

.guide-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.guide-pair__card {
  padding: 24px 26px;
  background: var(--color-soft-bg);
  border-radius: var(--radius-sm);
}

.guide-pair__card h3 {
  margin: 0 0 10px;
  font-size: 1.125rem;
  font-weight: 600;
}

.guide-pair__card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--trip-muted);
}

/* --- Blok zamykający ----------------------------------------------------- */

/* Bez ramki i bez karty: na tej stronie emfazę niosą pasy `trip__section--soft`
   i zdanie w Rubiku w kolorze marki (idiom `trip-about__accent`), a obramowany
   callout był obcy wobec reszty. Zostaje cienka linia jako oddech. */
.guide-closing {
  margin-top: clamp(32px, 4.5vw, 48px);
  padding-top: clamp(28px, 3.5vw, 36px);
  border-top: 1px solid var(--trip-line);
}

.guide-closing h3 {
  margin: 0 0 14px;
  font-family: "Rubik", -apple-system, "Helvetica Neue", sans-serif;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  font-weight: 500;
  color: var(--color-primary);
}

.guide-closing p {
  margin: 0 0 12px;
  font-size: 1.03125rem;
  line-height: 1.72;
  color: var(--trip-muted);
}

.guide-closing p:last-child {
  margin-bottom: 0;
}

.guide-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: clamp(40px, 5vw, 60px);
  padding: clamp(28px, 4vw, 36px);
  background: var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-white);
}

.guide-cta__text {
  flex: 999 1 320px;
  min-width: 0;
}

.guide-cta h2 {
  margin: 0 0 8px;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 500;
  color: var(--color-white);
}

.guide-cta p {
  margin: 0;
  font-size: 1.03125rem;
  line-height: 1.6;
  color: rgba(var(--color-white-rgb), 0.92);
}

.guide-cta .trip-btn {
  flex: 0 0 auto;
  background: var(--color-white);
  color: var(--color-dark-text);
}

.guide-cta .trip-btn:hover,
.guide-cta .trip-btn:focus-visible {
  background: rgba(var(--color-white-rgb), 0.88);
  color: var(--color-dark-text);
}

/* --- Przyklejony pasek kontaktu (tylko mobile) ---------------------------
   Rodzic czyta to przed pierwszym wyjazdem; telefon ma być pod kciukiem
   przez całą stronę, a nie dopiero w stopce. Na desktopie zbędny — tam
   CTA siedzi w spisie treści i w bloku zamykającym. */

.guide-callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  display: flex;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  /* Pełne krycie, nie półprzezroczystość: tekst przewijający się pod paskiem
     prześwitywał przez przyciski i robił się nieczytelny. */
  background: var(--color-white);
  border-top: 1px solid var(--trip-line);
  box-shadow: 0 -4px 18px rgba(var(--color-shadow-rgb), 0.1);
}

/* `trip-btn--quiet` ma przezroczyste tło — nad przewijającą się treścią
   litery nakładały się na siebie, więc w pasku dostaje własne wypełnienie. */
.guide-callbar .trip-btn--quiet {
  background: var(--color-white);
}

.guide-callbar .trip-btn {
  flex: 1 1 0;
  min-height: 48px;
  padding-inline: 16px;
  font-size: 0.9375rem;
}

/* Pasek jest `fixed`, więc na samym dole strony zasłaniałby ostatnie wiersze
   stopki — zapas idzie na <body>, nie na samą stopkę. Wcześniej reguła
   zerowała stopce `padding-bottom` na desktopie i razem z nim jej własne
   24–32 px, przez co wyglądała na uciętą. */
@media (max-width: 991.98px) {
  body:has(.guide-callbar) {
    padding-bottom: 84px;
  }
}

@media (min-width: 992px) {
  .guide-callbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-toc__chevron,
  .guide-toc__link {
    transition: none;
  }
}