/* =========================================================================
   AM Therapy - uklad kart opisu zabiegu wg wzorca apple.com  (v17)
   Plik zewnetrzny - CSP bez unsafe-inline. Zero JS, zero zewnetrznych zrodel.
   Fonty lokalne (Cormorant Garamond, Lato) - juz sa w projekcie.
   ========================================================================= */

:root{
  --amt-ivory:      #F7F2EA;
  --amt-ivory-deep: #EFE7DA;
  --amt-ink:        #2B2724;
  --amt-ink-soft:   #6B6259;
  --amt-gold:       #B99A5B;
  /* Złoto marki na jasnym tle daje kontrast 2,4:1 — za mało dla tekstu (WCAG AA
     wymaga 4,5:1). Do napisów używamy ciemniejszego wariantu: 5,3:1 na ivory,
     4,8:1 na ivory-deep. Linie i obramowania zostają w kolorze marki. */
  --amt-gold-tekst: #7A6132;
  --amt-hairline:   rgba(43,39,36,.12);
  --amt-radius:     18px;
  --amt-radius-lg:  24px;
  --amt-maxw:       1180px;
  --amt-gap:        clamp(20px, 3vw, 40px);
}

/* ---------- sekcja ---------- */
.amt-feature{
  background: var(--amt-ivory);
  color: var(--amt-ink);
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 48px);
}
.amt-feature__inner{ max-width: var(--amt-maxw); margin-inline: auto; }

/* intro nad siatka - waski akapit, duzo swiatla (apple: tekst konczy sie w polowie) */
.amt-feature__intro{
  max-width: 46ch;
  margin: 0 0 clamp(32px, 5vw, 64px);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* ---------- siatka 3 kolumn ---------- */
.amt-grid{
  display: grid;
  gap: var(--amt-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px){ .amt-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .amt-grid{ grid-template-columns: 1fr; } }

/* wariant 2-kolumnowy dla sekcji z dwoma kaflami */
.amt-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 640px){ .amt-grid--2{ grid-template-columns: 1fr; } }

/* ---------- pojedynczy kafel ---------- */
.amt-tile{ display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.amt-tile__media{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--amt-radius);
  overflow: hidden;
  background: var(--amt-ivory-deep);   /* widoczne, zanim wejdzie zdjecie */
  box-shadow: 0 1px 2px rgba(43,39,36,.05);
}
.amt-tile__media img{
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* placeholder do czasu sesji zdjeciowej - kafel z logo, bez stocka */
.amt-tile__media--placeholder{
  display: grid; place-items: center;
  background:
    radial-gradient(120% 100% at 30% 20%, #FBF7F1 0%, var(--amt-ivory-deep) 70%);
}
.amt-tile__media--placeholder img{ width: 38%; height: auto; object-fit: contain; opacity: .55; }

/* tekst: bold lead-in w tej samej linii co opis (wzorzec apple) */
.amt-tile__text{
  margin: 0;
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(.95rem, .9rem + .15vw, 1.05rem);
  line-height: 1.55;
  color: var(--amt-ink-soft);
  max-width: 38ch;
}
.amt-tile__lead{
  font-weight: 700;
  color: var(--amt-ink);
}
.amt-tile__lead::after{ content: " "; }

/* meta pod tekstem (czas, obszar) - opcjonalne */
.amt-tile__meta{
  margin: 0;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amt-gold-tekst);
}

/* ---------- pasek liczb (jednostka opieki) ---------- */
.amt-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--amt-gap);
  margin: clamp(32px,5vw,56px) 0 0;
  padding-top: clamp(24px,4vw,40px);
  border-top: 1px solid var(--amt-hairline);
}
@media (max-width: 640px){ .amt-stats{ grid-template-columns: 1fr; gap: 24px; } }
.amt-stat__value{
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--amt-ink);
}
.amt-stat__unit{
  font-size: .42em;
  letter-spacing: .04em;
  color: var(--amt-gold-tekst);
  margin-left: .35em;
}
.amt-stat__label{
  display: block;
  margin-top: 10px;
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--amt-ink-soft);
  max-width: 28ch;
}

/* ---------- przypisy (apple-style, juz sa w v14) ---------- */
.amt-fn{
  font-size: .625em;
  vertical-align: super;
  line-height: 0;
  color: var(--amt-gold-tekst);
  text-decoration: none;
}
.amt-footnotes{
  max-width: var(--amt-maxw);
  margin: clamp(40px,6vw,72px) auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--amt-hairline);
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--amt-ink-soft);
}
.amt-footnotes ol{ margin: 0; padding-left: 1.2em; }
.amt-footnotes li + li{ margin-top: 6px; }

/* ---------- dostepnosc i ruch ---------- */
.amt-tile:focus-within .amt-tile__media{ outline: 2px solid var(--amt-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }

/* =========================================================================
   v17 — kafle wybieralne, kroki ścieżki klienta i wynik rekomendacji.
   Wszystko klasami: CSP nie wpuszcza atrybutów style ani <style> w treści.
   ========================================================================= */

.amt-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px){ .amt-grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .amt-grid--4{ grid-template-columns: 1fr; } }

.amt-feature--alt{ background: var(--amt-ivory-deep); }

/* Kafel jako przycisk: ta sama forma co kafel opisowy, ale klikalny.
   Reset wyglądu przycisku — inaczej przeglądarka dokłada ramkę i tło. */
.amt-tile--wybor{
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.amt-tile--wybor:hover .amt-tile__media{ box-shadow: 0 6px 18px rgba(43,39,36,.12); }
.amt-tile--wybor:focus-visible .amt-tile__media{ outline: 2px solid var(--amt-gold); outline-offset: 3px; }
.amt-tile--wybrany .amt-tile__media{ outline: 2px solid var(--amt-gold); outline-offset: 3px; }
.amt-tile--wybrany .amt-tile__lead{ color: var(--amt-gold); }

.krok__tytul{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  margin: 0 0 12px;
}
.krok__lead{ max-width: 46ch; color: var(--amt-ink-soft); margin: 0 0 clamp(24px, 4vw, 48px); }

/* Cennik w kroku 2 — kwoty wyrównane do prawej, bez procentów i bez presji. */
.cennik{ list-style: none; margin: 0 0 clamp(24px,4vw,40px); padding: 0; max-width: 46ch; }
.cennik li{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--amt-hairline);
}
.cennik__nazwa{ font-weight: 700; }
.cennik__kwota{ font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; }
.cennik__dopisek{ grid-column: 1 / -1; font-size: .875rem; color: var(--amt-ink-soft); }

.sugestia{
  border-left: 3px solid var(--amt-gold);
  padding: 16px 0 16px 20px;
  margin: 0 0 clamp(24px,4vw,40px);
  max-width: 52ch;
}
.sugestia__podpis{
  margin: 0 0 8px;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amt-gold-tekst);
}
.sugestia p{ margin: 0 0 12px; }
.sugestia button + button{ margin-left: 16px; }

.wynik__karty{ display: grid; gap: var(--amt-gap); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 800px){ .wynik__karty{ grid-template-columns: 1fr; } }
.wynik__karta{
  background: #fff;
  border-radius: var(--amt-radius-lg);
  padding: clamp(20px, 3vw, 32px);
}
.wynik__karta--glowna{ box-shadow: 0 8px 28px rgba(43,39,36,.10); }
.wynik__karta h3{ margin: 8px 0 6px; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; }

/* Odstępy sekcji listy — klasą, nie atrybutem style (CSP blokuje style="…"). */
.sekcja-listy{ margin-top: clamp(48px, 7vw, 96px); }
.hero--lista{ padding-block: clamp(48px, 7vw, 96px) clamp(24px, 3vw, 48px); }

/* Sekcja „jak zrealizować" na karcie produktu — klasą, nie atrybutem style. */
.sekcja-realizacja{ margin-block: clamp(48px, 7vw, 96px); }

/* Karta produktu — style klasami zamiast atrybutu style="" (CSP). */
.karta-produktu{ padding-block: clamp(24px, 4vw, 48px); }
.karta-produktu__tytul{ font-size: clamp(1.75rem, 5vw, 2.5rem); margin-bottom: 12px; }
.karta-produktu__opis{ white-space: pre-line; }
.karta-produktu__cena{ font-size: 1.75rem; }
.karta-produktu__platnosc{ margin-top: 16px; }

/* Nawigacja jest przyklejona u góry, więc `scrollIntoView` chowałby nagłówek
   kroku pod nią. Margines przewijania odsuwa docelowy punkt o wysokość paska. */
.amt-feature{ scroll-margin-top: 88px; }

/* Przycisk, który ma wyglądać jak link — inaczej przeglądarka rysuje ramkę
   i „Zostaję przy nogach" wygląda jak drugi przycisk główny. */
.przycisk-tekstowy{
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}
.przycisk-tekstowy::after{ content: '\00A0\2192'; }

/* Zdjęcie produktu na liście i na karcie. `aspect-ratio` razem z width/height
   w znaczniku trzyma miejsce zanim obraz się wczyta — zero przeskoku układu. */
.karta__media{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--amt-radius) var(--amt-radius) 0 0;
  background: var(--amt-ivory-deep);
}
.karta__media img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.karta__media--duze{ border-radius: var(--amt-radius); }

/* Lista składników Programu — bez kwot; rozbicie wartości zostaje w regulaminie. */
.sklad{ list-style: none; margin: 0; padding: 0; font-size: .95rem; color: var(--amt-ink-soft); }
.sklad li{ padding: 7px 0; border-bottom: 1px solid var(--amt-hairline); }
.sklad li:last-child{ border-bottom: 0; }

/* Kafel bez zdjęcia (fazy, skład) nie ma się rozciągać na pustym miejscu. */
.amt-tile > .amt-tile__meta:first-child{ margin-bottom: 4px; }

/* Karta produktu powstaje w przeglądarce, więc jej miejsce trzeba zarezerwować
   z góry — inaczej wstawienie treści przesuwa wszystko poniżej (CLS 0,84
   zmierzone Lighthouse'em przed poprawką). */
#produkt[data-stan="ladowanie"]{ min-height: 100vh; }

/* Szkielet karty na czas wczytywania — zamiast samego napisu „Wczytuję".
   Blok o proporcjach zdjęcia trzyma miejsce dokładnie tam, gdzie ono stanie. */
.szkielet{ display: grid; gap: var(--amt-gap); padding-block: clamp(24px, 4vw, 48px); }
@media (min-width: 900px){ .szkielet{ grid-template-columns: 1fr 1fr; align-items: start; } }
.szkielet__media{ aspect-ratio: 4 / 3; border-radius: var(--amt-radius); background: var(--amt-ivory-deep); }
.szkielet__linia{ height: 14px; border-radius: 7px; background: var(--amt-ivory-deep); margin-bottom: 14px; }
.szkielet__linia--tytul{ height: 32px; width: 70%; margin-bottom: 22px; }
.szkielet__linia--krotka{ width: 45%; }


/* Listy produktów też powstają w przeglądarce. Bez rezerwacji miejsca każda
   wypełniona sekcja przesuwa następną — na stronie z trzema sekcjami dawało to
   CLS 0,17. Wysokość odpowiada jednej karcie: reszta dorasta poza ekranem. */
.siatka[data-stan="ladowanie"]{ min-height: 420px; }
@media (min-width: 720px){ .siatka[data-stan="ladowanie"]{ min-height: 460px; } }
#zabiegi[data-stan="ladowanie"]{ min-height: 70vh; }

/* „Co się teraz wydarzy" po zakupie Programu. */
.po-zakupie{ margin-top: clamp(32px, 5vw, 56px); }
.po-zakupie h2{ font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; margin-bottom: 16px; }
.po-zakupie__kroki{ padding-left: 1.2em; }
.po-zakupie__kroki li{ margin-bottom: 12px; }

/* Tabela rozliczenia w regulaminie — musi być czytelna także na telefonie,
   dlatego przewija się w swoim kontenerze zamiast rozpychać stronę. */
.dokument__tabela{ width: 100%; border-collapse: collapse; font-size: .9rem; margin: 12px 0 28px; }
.dokument__tabela th, .dokument__tabela td{ text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--amt-hairline); }
.dokument__tabela td:not(:first-child), .dokument__tabela th:not(:first-child){ text-align: right; }
.dokument__uwaga{ border-left: 3px solid var(--amt-gold); padding-left: 16px; }
@media (max-width: 640px){ .dokument__tabela{ font-size: .8rem; } }