/* /inne-wyroby/ i /na-swieta/ — katalogi ze zdjęciem i ceną każdego produktu. Język i komponenty z pierogi.css
   (intro ze spisem, grupy, duży moduł 4:5, karty trio / duet); tu tylko różnice: karty bez CTA, pasek kategorii,
   informacja o zamówieniu telefonicznym, plakietka sezonowa, finał z telefonem. */

@layer sections {

  /* Intro: spis produktów ma dłuższe nazwy niż spis smaków — jedna nazwa w wierszu od tabletu, żeby się nie łamały w pół. */
  .offer .pg-index__list { gap: 0 1.25rem; }
  .offer-note { color: var(--color-text-muted); max-width: 38ch; }
  @media (min-width: 1024px) {
    .offer .pg-index { align-content: start; }
  }

  /* Jak zamówić: tych wyrobów nie ma w konfiguratorze — jedno spokojne zdanie z telefonem (bilecik jak „co dalej” w /zamow/). */
  .offer-order {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start;
    max-width: 30rem; padding: 0.875rem 1rem; border-radius: 12px; background: var(--dough); line-height: 1.5;
  }
  .offer-order .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; color: var(--dill); }
  .offer-order a { color: var(--crust); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* Spis na stronie z kilkoma grupami: telefon — same kategorie z licznikiem (krótka lista, zdjęcia bliżej);
     od tabletu — wszystkie nazwy produktów w grupach, w dwóch kolumnach. */
  .offer-index { gap: 0.25rem; --group-dot: var(--butter); }
  .offer-index .pg-index__label, .offer-index .pg-index__list { display: none; }
  .offer-index .pg-index__short { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.625rem; }
  .offer-index .pg-index__short::before { align-self: center; }
  .offer-index__n { font-size: var(--fs-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  @media (min-width: 768px) {
    .offer-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); }
    .offer-index .pg-index__label, .offer-index .pg-index__list { display: flex; }
    .offer-index .pg-index__list { flex-direction: column; align-items: flex-start; }
    .offer-index .pg-index__short { display: none; }
    .offer-index .pg-index__link { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }
    .offer-index .pg-index__list > li { padding-block: 0.2rem; }
  }

  /* Pasek kategorii: przyklejony pod nagłówkiem jak filtr w /pierogi/ (.pg-filter). Skróty do sekcji; bieżącą podświetla offer.js.
     Telefon: skróty w jednym rzędzie, przewijanym w obrębie paska (strona nie przewija się w poziomie). */
  .offer-nav .pg-filter__inner { gap: 1.25rem; }
  .offer-nav__nav { min-width: 0; flex: 1 1 auto; }
  .offer-nav__list {
    display: flex; gap: 0.375rem; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--gutter);
  }
  .offer-nav__list::-webkit-scrollbar { display: none; }
  .offer-nav__link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.95rem; border-radius: 10px;
    background: var(--dough); font-weight: 600; font-size: 0.9375rem; line-height: 1.15; white-space: nowrap; text-decoration: none;
    transition: background-color var(--dur-base) ease, color var(--dur-base) ease, box-shadow var(--dur-base) var(--ease-out);
  }
  .offer-nav__link:hover { background: var(--line); }
  .offer-nav__link[aria-current] { background: var(--crust); color: var(--flour); box-shadow: 0 3px 0 0 var(--butter); }
  .offer-nav .pg-filter__order { gap: 0.4rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .offer-nav .pg-filter__order .icon { width: 1.05rem; height: 1.05rem; }
  /* Od tabletu sześć skrótów mieści się w jednym rzędzie (bez zawijania — pasek nie rośnie do dwóch wierszy). */
  @media (min-width: 768px) {
    .offer-nav__list { margin-inline: 0; padding-inline: 2px; }
    .offer-nav__link { padding-inline: 0.75rem; }
  }
  @media (min-width: 1024px) { .offer-nav__link { padding-inline: 0.95rem; font-size: 1rem; } }
  /* Tablet: sześć skrótów i telefon nie mieszczą się w jednym rzędzie — telefon jest w intrze i w finale. */
  @media (min-width: 768px) and (max-width: 1099px) { .offer-nav .pg-filter__order { display: none; } }

  /* Grupy: pierwsza bliżej intra (jak w /pierogi/); kolejne oddzielone falbanką na przemian Ciasto / Mąka. */
  .offer-group:nth-child(even) { position: relative; margin-top: 14px; background: var(--dough); }
  .offer-group:nth-child(even)::before {
    content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: var(--dough);
    -webkit-mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
            mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
  }
  /* Powrót na Mąkę: falbanka nachodzi na dół poprzedniej grupy (Ciasto), dlatego bez marginesu. */
  .offer-group:nth-child(odd):not(:first-child) { position: relative; background: var(--flour); }
  .offer-group:nth-child(odd):not(:first-child)::before {
    content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: var(--flour);
    -webkit-mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
            mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
  }
  .offer-group .cards:last-child, .offer-group .feature:last-child { margin-bottom: 0; }
  .offer-group .cards + .cards { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

  .offer .card__filling { font-size: var(--fs-body); font-weight: 500; }
  .offer .card__season, .offer .feature__season { margin-top: 0.25rem; }
  .offer .card__price { margin-top: 0.375rem; }

  /* Etap 10: karty mają CTA „Zamów online” (jak w /pierogi/) — przycisk dosunięty do dołu karty (pierogi.css .card__cta).
     Produkt świąteczny przy wyłączonym przełączniku sezonu: zamiast przycisku spokojna informacja. */
  .offer .card__off, .offer .feature__off { margin-top: auto; padding-top: 0.5rem; font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }
  .offer .feature__off { margin-top: 0.75rem; }

  /* Plakietka sezonowa: Malina zamiast zieleni „bez mięsa” — to informacja o dostępności, nie o składzie. */
  .tag--season { border-color: var(--raspberry-deep); color: var(--raspberry-deep); padding: 0.125rem 0.625rem; }

  /* Strona z jedną grupą (Na święta): nagłówek grupy jest ukryty, więc pierwszy moduł stoi bliżej intra. */
  .offer--seasonal .offer-group { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
  .offer--seasonal .feature { margin-top: 0; }

  /* Finał: po ostatniej grupie na Cieście przejście falbanką robi .pg-order (pierogi.css); po grupie na Mące — linia. */
  .offer:has(.offer-group:last-child:nth-child(odd)) .offer-end { border-top: 1px solid var(--color-border-decor); }
  /* Ostatnia grupa na Cieście: finał dosuwa się do niej, a jego falbanka (Mąka) wchodzi na dół grupy. */
  .offer:has(.offer-group:last-child:nth-child(even)) .offer-end { margin-top: 0; }
  .offer:has(.offer-group:last-child:nth-child(even)) .offer-group:last-child { padding-bottom: calc(clamp(3rem, 2rem + 4vw, 6.5rem) + 14px); }
  .offer-end .pg-order__cta { font-variant-numeric: tabular-nums; }
  /* Etap 16: dwa warianty finału /na-swieta/ (sezon on / off) — ten sam rytm co .pg-order__lead. */
  .pg-order__variant { display: grid; gap: 1.25rem; justify-items: start; }
}