@charset "UTF-8";
/* ==========================================================================
   Blok: Cennik dodatków — lista schodkowa z kreskowanymi łącznikami
   ========================================================================== */

.addons__head {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.addons__title { margin-bottom: var(--space-4); }
.addons__lead { margin-bottom: 0; }
.addons__lead p:last-child { margin-bottom: 0; }

/* --- Lista ---------------------------------------------------------------
   --price-w = stała szerokość kolumny ceny (patrz .addon__price)
   --step    = głębokość wcięcia co drugiego wiersza
   --gap     = odstęp pionowy, w którym rysuje się łącznik
   --anchor  = oś pionowej kreski, liczona od lewej krawędzi wiersza */
.addons__list {
  --price-w: 10.5rem;
  --step: 5rem;
  --gap: 4.5rem;
  --anchor: calc(var(--price-w) / 2);   /* środek ceny — stąd wychodzi i tu dochodzi kreska */
  --line: 2px;
  --bend: 9px;       /* promień zagięcia na obu rogach */

  list-style: none;
  margin: 0;
  padding: 0;
}

.addon {
  position: relative;
  display: grid;
  grid-template-columns: var(--price-w) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: 0;
}
.addon + .addon { margin-top: var(--gap); }

/* Co drugi wiersz odsunięty o jeden schodek. */
.addon:nth-child(even) { margin-left: var(--step); }

/* --- Kreskowany łącznik ---------------------------------------------------
   Kształt ma dwa zagięcia: w dół, w bok, znowu w dół. Rysują go dwa
   pseudoelementy — ::after robi pierwszy róg, ::before drugi. Oba zaokrąglone. */
.addon:not(.addon--last)::after,
.addon:not(.addon--last)::before {
  content: "";
  position: absolute;
  height: calc(var(--gap) / 2);
  pointer-events: none;
  border-style: dashed;
  border-color: var(--stone);
  border-width: 0;
}

/* Pierwszy róg: pionowo w dół, potem w bok. */
.addon:not(.addon--last)::after {
  top: 100%;
  width: calc(var(--step) - var(--bend));
  border-bottom-width: var(--line);
}
.addon:nth-child(odd):not(.addon--last)::after {
  left: var(--anchor);
  border-left-width: var(--line);
  border-bottom-left-radius: var(--bend);
}
.addon:nth-child(even):not(.addon--last)::after {
  left: calc(var(--anchor) - var(--step) + var(--bend));
  border-right-width: var(--line);
  border-bottom-right-radius: var(--bend);
}

/* Drugi róg: koniec poziomej kreski zakręca w dół, do środka kolejnej ceny. */
.addon:not(.addon--last)::before {
  top: calc(100% + var(--gap) / 2);
  width: var(--bend);
  border-top-width: var(--line);
}
.addon:nth-child(odd):not(.addon--last)::before {
  left: calc(var(--anchor) + var(--step) - var(--bend));
  border-right-width: var(--line);
  border-top-right-radius: var(--bend);
}
.addon:nth-child(even):not(.addon--last)::before {
  left: calc(var(--anchor) - var(--step));
  border-left-width: var(--line);
  border-top-left-radius: var(--bend);
}

/* --- Cena ----------------------------------------------------------------
   Stała szerokość, żeby zdjęcia i opisy trzymały jedną oś we wszystkich
   wierszach — każdy wiersz jest osobną siatką. */
.addon__price {
  /* Wyśrodkowana, bo od jej środka wychodzi kreskowany łącznik. */
  text-align: center;
  /* Source Sans zamiast Caslona — Caslon ma tylko jedną grubość,
     więc pogrubienie byłoby sztuczne i rozmyte. */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--accent-deep);
  white-space: nowrap;
}

/* Przedrostek „od". Nie jest częścią kwoty, więc nie ma powodu, żeby krzyczał
   tym samym stopniem — zostaje przy kwocie, ale schodzi na drugi plan. */
.addon__price-prefix {
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  /* Odstęp niesie spacja w znaczniku, tu zostaje tylko drobna korekta. */
  margin-right: 0.05em;
}

/* --- Zdjęcie --------------------------------------------------------------- */
.addon__media {
  display: block;
  width: 9rem;
  height: 9rem;
  flex: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  /* Lekkie przekrzywienie — zdjęcia mają wyglądać jak odbitki położone
     na stole, a nie jak siatka kafelków. Wzór powtarza się co pięć pozycji,
     żeby przy długiej liście nie wyłapać rytmu. */
  transform: rotate(var(--tilt, 0deg));
}
.addon:nth-child(5n + 1) .addon__media { --tilt: -2.2deg; }
.addon:nth-child(5n + 2) .addon__media { --tilt: 1.6deg; }
.addon:nth-child(5n + 3) .addon__media { --tilt: -1.1deg; }
.addon:nth-child(5n + 4) .addon__media { --tilt: 2.4deg; }
.addon:nth-child(5n + 5) .addon__media { --tilt: -1.7deg; }

.addon__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Nazwa i opis ---------------------------------------------------------- */
.addon__body {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}
.addon__name {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
}
.addon__desc {
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  line-height: 1.5;
  color: var(--muted);
}

/* --- Dopisek --------------------------------------------------------------- */
.addons__note {
  list-style: none;
  counter-reset: anote;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.addons__note-item {
  counter-increment: anote;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  margin: 0;
  line-height: 1.5;
}
.addons__note-item::before {
  content: counter(anote) ".";
  font-weight: 600;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

/* --- Wariant na ciemnym tle ------------------------------------------------ */
.section--dark .addon__name { color: var(--on-dark); }
/* Na ciemnym tle ciemna szałwia byłaby nieczytelna — bierzemy jaśniejszy odcień. */
.section--dark .addon__price { color: var(--accent); }
.section--dark .addon__desc,
.section--dark .addons__note { color: var(--on-dark-muted); }
.section--dark .addons__note-item::before { color: var(--accent); }
.section--dark .addon::after,
.section--dark .addon::before { border-color: var(--line-on-dark); }
.section--dark .addon__media { background: var(--dark-2); box-shadow: none; }

/* --- Responsywność ---------------------------------------------------------
   --anchor liczy się z --price-w, więc przy zmianie szerokości ceny kreska
   sama trafia w jej środek — nie ma czego synchronizować ręcznie. */
@media (max-width: 860px) {
  .addons__list { --price-w: 8.5rem; --step: 3.5rem; --gap: 3.5rem; --bend: 8px; }
  .addon__price { font-size: 2rem; }
  .addon__name { font-size: 1.3rem; }
  .addon__media { width: 7rem; height: 7rem; }
}

@media (max-width: 640px) {
  .addons__list { --price-w: 7rem; --step: 2.75rem; --gap: 3rem; --bend: 7px; }
  .addon { gap: var(--space-3); }
  .addon__price { font-size: 1.6rem; }
  .addon__name { font-size: 1.15rem; }
  .addon__media { width: 5.5rem; height: 5.5rem; }
}

@media (max-width: 480px) {
  /* Zdjęcia zostają — to one niosą tę sekcję. Zamiast je chować,
     opis schodzi pod cenę i zdjęcie i dostaje pełną szerokość wiersza. */
  .addon {
    grid-template-columns: var(--price-w) auto;
    row-gap: var(--space-3);
  }
  .addon__body { grid-column: 1 / -1; }
}