/* Strona kategorii (szablon: tools/kat_fill.py). Kolejność: pytanie pacjenta i film lekarza → możliwości → jak wybieramy →
   cena → filmy → opinie → pytania → kontakt → inne sytuacje. Wspólne elementy (menu, przyciski, film, karta lekarza, kontakt) są w h.css. */
section { padding: clamp(5rem, 9vw, 8rem) 0; }
.stone { background: var(--stone); }
.split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem 4rem; align-items: end; }
.split-head p { max-width: 32rem; }
.arr { width: 20px; flex: none; }

/* 1. PIERWSZY EKRAN - pytanie pacjenta po lewej, film po prawej */
.kat-hero { padding: clamp(7.5rem, 11vw, 9.5rem) 0 clamp(3.5rem, 6vw, 5rem); }
.kat-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: var(--fs-sm); margin-bottom: 1.2rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-right: .6rem; opacity: .5; }
.kat-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); margin-top: .4rem; margin-left: -.04em; max-width: 13ch; }
.kat-lead { font-size: var(--fs-lead); line-height: 1.32; margin-top: 1.4rem; max-width: 32rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; }
.hero-meta { margin-top: 1.1rem; font-size: var(--fs-sm); }
.kat-note { margin-top: 2rem; }

/* film: do kliknięcia tylko kadr z lekarzem (bez tekstu na zdjęciu), YouTube wczytuje się dopiero po kliknięciu */
.yt-box, .soon { position: relative; aspect-ratio: 16 / 9; background: var(--stone); container-type: inline-size; }
.yt-box iframe { display: block; width: 100%; height: 100%; border: 0; }
.yt-box video { object-fit: contain; }
.yt-box .vplay > img, .soon > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.yt-go { position: absolute; left: max(14px, 3.5cqi); bottom: max(14px, 3.5cqi); display: flex; align-items: center; gap: .6rem; }
.yt-go .play { position: static; translate: none; width: max(48px, 10cqi); }
.vbox .yt-go .chip, .yt-go .chip { position: static; white-space: nowrap; }
.kat-film .film-cap { margin-top: .9rem; }

/* przycisk „Zobacz w filmie” w kartach: czas w białym polu, włącza film od tego miejsca */
.ch { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .3rem .8rem .3rem .4rem; border-radius: 10px; border: 1.5px solid var(--stone);
  background: var(--stone); color: var(--ink); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: border-color .2s ease-in-out; }
.ch:hover { border-color: var(--ink); }
.ch span { background: var(--white); border-radius: 6px; padding: .05rem .4rem; font-variant-numeric: tabular-nums; }

/* 2. MOŻLIWOŚCI - te same drogi co w filmie, z jednakowymi faktami do porównania */
.opt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.opt { display: flex; flex-direction: column; background: var(--white); border-radius: var(--r); padding: 10px 10px 1.2rem; }
.opt-ill { position: relative; aspect-ratio: 16 / 9; background: var(--stone); border-radius: 12px; }
.opt-ill svg { position: absolute; left: 6%; top: 8%; width: 88%; height: 84%; }
.opt h3 { font-size: var(--fs-h3); margin: 1.2rem .7rem 0; }
.opt-d { margin: .45rem .7rem 0; font-size: 1rem; line-height: 1.5; }
.opt-facts { display: grid; gap: .5rem; margin: 1.1rem .7rem 0; }
.opt-facts li { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.opt-facts svg { width: 20px; height: 20px; flex: none; }
.opt-go { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: auto .7rem 0; padding-top: 1.2rem; }
.opt-more { align-self: flex-start; margin: .5rem .7rem 0; font-size: var(--fs-sm); }
.opt-ill svg { transition: transform .5s cubic-bezier(.45,0,.55,1); }
.opt:hover .opt-ill svg { transform: translateY(-4px) scale(1.03); }
/* jak wybieramy: karta pod drogami - po lewej kto pomaga i przycisk, po prawej trzy kroki */
.pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 1.6rem clamp(2rem, 4vw, 3.5rem);
  margin-top: 1rem; background: var(--white); border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2.2rem); }
.pick-head { display: flex; align-items: flex-start; gap: 1.2rem; }
.pick-photo { flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 26%; box-shadow: 0 0 0 4px var(--yellow); }
.pick h3 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); margin-top: .2rem; }
.pick-head p { margin-top: .4rem; font-size: 1.0625rem; max-width: 22rem; }
.pick-head .btn { margin-top: 1.2rem; }
.pick-steps { display: grid; padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--line); }
.pick-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .9rem; align-items: start; padding: .8rem 0; border-top: 1px solid var(--line); line-height: 1.4; }
.pick-steps li:first-child { border-top: 0; padding-top: 0; }
.pick-steps li:last-child { padding-bottom: 0; }
.pick-steps .num { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--yellow); font-weight: 600; font-size: .9375rem; }
.pick-steps b { display: block; font-weight: 600; font-size: 1.0625rem; }
.opts .dnote { margin-top: 1.4rem; }

/* 4. CENA - te same drogi co w kartach, jedna kwota na drogę; obok pierwszy krok wspólny dla wszystkich */
.price-grid { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.pt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pt { display: flex; flex-direction: column; background: var(--white); border-radius: var(--r); padding: 10px 10px 1.3rem; color: var(--ink); }
.pt-ill { position: relative; aspect-ratio: 16 / 7; background: var(--stone); border-radius: 12px; margin-bottom: 1.1rem; }
.pt-ill img { position: absolute; inset: 9% 8%; width: 84%; height: 82%; object-fit: contain; }
.pt-n { margin: 0 .7rem; font-weight: 600; font-size: 1.0625rem; }
.pt-v { margin: .35rem .7rem 0; font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pt-d { margin: .45rem .7rem 0; font-size: .9375rem; line-height: 1.4; }
.pr-extra { margin-top: 1.1rem; font-size: .9375rem; line-height: 1.5; }
.pr-extra a { font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
/* pierwszy krok: poziomy pas pod kwotami - wspólny dla każdej drogi */
.first { display: grid; grid-template-columns: 64px auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
  margin-top: 1.6rem; border-radius: var(--r); padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.6rem); }
.kp-ill { width: 64px; }
.kp-k { font-size: var(--fs-sm); font-weight: 600; }
.kp-big { font-size: clamp(2.8rem, 4.6vw, 3.8rem); font-weight: 600; line-height: 1; margin-top: .4rem; font-variant-numeric: tabular-nums; }
.kp-who { margin-top: .5rem; font-size: .9375rem; }
.kp-out { font-size: 1.25rem; line-height: 1.35; max-width: 26rem; }
.kp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.kp-chips li { border: 1px solid var(--line-d); border-radius: 7px; padding: .2rem .6rem; font-size: .875rem; }
/* cena na grafitowym tle: pas pierwszego kroku tylko z obrysem, białe kafle niosą kwoty */
.price.on-dark .first { border: 1px solid var(--line-d); }
.price .dnote { margin-top: 1.4rem; }

/* 5. FILMY - kolejne odpowiedzi lekarza */
.film-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.film-soon { margin: 0; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.film-soon .film-cap { margin-top: 0; }
.soon { border-radius: var(--r); overflow: hidden; }
.film-cap { margin-top: .9rem; font-size: 1rem; line-height: 1.45; }
.film-cap b { display: block; font-weight: 600; font-size: 1.0625rem; }
.films .dnote { margin-top: 1.4rem; }

/* 6. OPINIE */
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.story { background: var(--white); border-radius: var(--r); padding: 1.5rem 1.7rem 1.4rem; display: flex; flex-direction: column; }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.stars { display: flex; gap: 2px; }
.stars svg { width: 17px; height: 17px; }
.st-src { font-size: .875rem; }
.st-src a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .2rem; text-underline-offset: 3px; }
.story blockquote { margin: 1.1rem 0 0; font-size: clamp(1.25rem, 1.75vw, 1.5rem); line-height: 1.32; }
.st-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 1.4rem; }
.st-tags li { background: var(--stone); border-radius: 6px; padding: .2rem .6rem; font-size: .8125rem; font-weight: 600; }
.st-who { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.st-who b { font-weight: 600; }
.stories .dnote { margin-top: 1.4rem; }

/* 7. PYTANIA */
:root { interpolate-size: allow-keywords; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.faq-side { position: sticky; top: 130px; }
.faq .section-title { max-width: 12ch; }
.ask { margin-top: 2rem; background: var(--stone); border-radius: var(--r); padding: 1.5rem 1.6rem 1.7rem; max-width: 28rem; }
.ask-t { font-weight: 600; font-size: 1.2rem; }
.ask p + p { margin-top: .3rem; font-size: 1rem; }
.ask .btn { margin-top: 1.1rem; border-color: var(--ink); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.3rem 0; font-weight: 600; font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.3; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--stone) no-repeat center;
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)); background-size: 13px 2px, 2px 13px; transition: background-color .2s ease-in-out; }
.faq-list details[open] summary::after { background-size: 13px 2px, 0 0; background-color: var(--yellow); }
.motion .faq-list details::details-content { height: 0; overflow: clip; transition: height .5s cubic-bezier(.45,0,.55,1), content-visibility .5s allow-discrete; }
.motion .faq-list details[open]::details-content { height: auto; }
.faq-list details p { padding: 0 3.5rem 1.4rem 0; max-width: 40rem; }
.faq-list details p b { font-weight: 600; }
.faq-list details a { font-weight: 600; text-underline-offset: 3px; }

/* 8. INNE SYTUACJE */
.related { padding: clamp(4rem, 7vw, 6rem) 0; }
.related h2 { font-size: var(--fs-h3); }
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.hrow { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 1.3rem; align-items: center; height: 100%; background: var(--white); border-radius: var(--r); padding: 10px 1.4rem 10px 10px;
  text-decoration: none; border: 1.5px solid var(--stone); transition: border-color .2s ease-in-out; }
.hrow:hover { border-color: var(--ink); }
.hc-ill { position: relative; display: block; background: var(--stone); border-radius: 12px; grid-row: span 3; aspect-ratio: 1; }
.hc-ill img { position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; object-fit: contain; }
.hrow h3 { font-size: 1.25rem; margin-top: .4rem; }
.hrow p { font-size: 1rem; margin-top: .25rem; }
.go { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 0 .3rem; font-weight: 600; font-size: var(--fs-sm); }
.go b { font-weight: 600; background: linear-gradient(var(--yellow), var(--yellow)) 0 82% / 0 30% no-repeat; transition: background-size .3s ease-in-out; }
.go .arr { transition: translate .25s ease-in-out; }
a:hover .go b { background-size: 100% 30%; }
a:hover .go .arr { translate: 4px 0; }

/* RUCH wg księgi znaku V0.3 (jak na stronie głównej I): power2.inOut, bez odbić; tylko z klasą .motion */
@view-transition { navigation: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.motion [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.45,0,.55,1), transform .8s cubic-bezier(.45,0,.55,1); transition-delay: calc(var(--i, 0) * 100ms); }
.motion [data-rv].in { opacity: 1; transform: none; }
.motion .mark { background-repeat: no-repeat; background-size: 0 100%; transition: background-size .9s cubic-bezier(.45,0,.55,1) .4s; }
.motion .in .mark, .motion .in.mark { background-size: 100% 100%; }
.motion .hero-text > * { animation: rise .8s cubic-bezier(.45,0,.55,1) both; animation-delay: calc(var(--i, 0) * 100ms + 100ms); }
.motion .kat-film { animation: rise .8s cubic-bezier(.45,0,.55,1) .35s both; }
.motion .stars svg { opacity: 0; transform: scale(.7); transition: opacity .45s cubic-bezier(.45,0,.55,1), transform .45s cubic-bezier(.45,0,.55,1); }
.motion .in .stars svg { opacity: 1; transform: none; }
.motion .stars svg:nth-child(2) { transition-delay: .08s; } .motion .stars svg:nth-child(3) { transition-delay: .16s; }
.motion .stars svg:nth-child(4) { transition-delay: .24s; } .motion .stars svg:nth-child(5) { transition-delay: .32s; }
/* rysunki możliwości: nowy ząb wchodzi na miejsce, zakreślacz od lewej; przy luce zęby obok powoli się przechylają */
.motion .opt-ill :is(.a-new, .a-mark) { opacity: 0; }
.motion .run :is(.a-new, .a-mark) { opacity: 1; }
.motion .run .a-new { animation: drop .9s cubic-bezier(.45,0,.55,1) calc(var(--i, 0) * 120ms + .5s) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-40px); } }
.motion .run .a-mark { animation: mark .6s cubic-bezier(.45,0,.55,1) calc(var(--i, 0) * 120ms + 1.5s) both; }
@keyframes mark { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.motion .opt-ill .a-tilt { transform-box: fill-box; transform-origin: 50% 73%; transform: rotate(var(--t)); }
.motion .run .a-tilt { transform: none; animation: tilt 1.8s cubic-bezier(.45,0,.55,1) calc(var(--i, 0) * 120ms + .5s) both; }
@keyframes tilt { from { transform: rotate(var(--t)); } }
.vplay img { transition: transform .6s cubic-bezier(.45,0,.55,1); }
.vplay:hover img { transform: scale(1.03); }

@media (max-width: 1100px) {
  .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .first { grid-template-columns: 56px auto minmax(0, 1fr); }
  .first .btn { grid-column: 2 / -1; justify-self: start; }
  .kp-ill { width: 56px; align-self: start; }
}
@media (max-width: 980px) {
  .kat-grid, .split-head, .price-grid, .faq-grid, .story-grid, .rel-grid { grid-template-columns: minmax(0, 1fr); }
  .kat-film { max-width: 680px; }
  .faq-side { position: static; }
  .story-grid, .rel-grid { max-width: 640px; }
  .pick { grid-template-columns: 1fr; }
  .pick-steps { padding-left: 0; border-left: 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  section { padding: 4rem 0; }
  .kat-hero { padding-top: 5.6rem; }
  .crumbs { margin-bottom: .4rem; }
  .crumbs li[aria-current] { display: none; }
  .kat-hero .hero-cta, .kat-hero .hero-meta { display: none; }  /* na telefonie dolny pasek ma „Zadzwoń” i „Umów konsultację” - film wchodzi wyżej */
  .kat-grid { gap: 1.6rem; }
  /* możliwości: zwarte karty jak na stronie głównej - rysunek z lewej, cechy i film pod spodem */
  .opt-grid { grid-template-columns: 1fr; gap: .6rem; }
  .opt { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 1rem; padding: 10px 1rem 1.1rem 10px; }
  .opt-ill { grid-row: span 2; aspect-ratio: 1; align-self: start; }
  .opt-ill svg { left: 3%; top: 20%; width: 94%; height: 60%; }
  .opt h3 { margin: .3rem 0 0; font-size: 1.25rem; }
  .opt-d { margin: .3rem 0 0; font-size: .9375rem; line-height: 1.45; }
  .opt-facts, .opt-more, .opt-go { grid-column: 1 / -1; margin-left: .3rem; margin-right: 0; }
  .opt-facts { display: flex; flex-wrap: wrap; margin-top: 1rem; gap: .4rem 1.1rem; }
  .opt-more { margin-top: .3rem; }
  .opt-go { padding-top: .9rem; }
  .pick { padding: 1.3rem 1.1rem; gap: 1.2rem; }
  .pick-photo { width: 64px; height: 64px; box-shadow: 0 0 0 3px var(--yellow); }
  .pick-head { gap: 1rem; }
  .pick-head .btn { width: 100%; }
  .pick-steps { padding-top: 1.1rem; }
  .pick-steps li { padding: .65rem 0; font-size: .9375rem; }
  .pick-steps b { font-size: 1rem; }
  /* filmy i opinie: przewijane karty zamiast długiej kolumny */
  .film-grid { grid-template-columns: 1fr; gap: .9rem; }
  .film-soon { grid-template-columns: 124px minmax(0, 1fr); gap: .9rem; }
  .soon { border-radius: 12px; }
  .soon .chip { font-size: .75rem; padding: .1rem .45rem; }
  .film-cap { font-size: .875rem; }
  .film-cap b { font-size: .9375rem; }
  .kat-film .film-cap { font-size: .9375rem; }
  .story { padding: 1.2rem 1.3rem 1.1rem; }
  .story blockquote { font-size: 1.2rem; }
  .pt-grid { gap: .6rem; }
  .first { grid-template-columns: minmax(0, 1fr) 48px; gap: 1.2rem; padding: 1.6rem 1.3rem; }
  .kp-ill { grid-column: 2; grid-row: 1; width: 48px; }
  .kp-price { grid-column: 1; grid-row: 1; }
  .kp-text, .first .btn { grid-column: 1 / -1; }
  .first .btn { justify-self: stretch; }
  .kp-big { font-size: 3rem; }
  .kp-out { font-size: 1.15rem; }
  .pt { padding: 8px 8px 1rem; }
  .pt-ill { margin-bottom: .8rem; border-radius: 10px; }
  .pt-n, .pt-v, .pt-d { margin-left: .45rem; margin-right: .3rem; }
  .pt-n { font-size: .9375rem; }
  .pt-v { font-size: 1.3rem; }
  .pt-d { font-size: .8125rem; }
  .faq-list details p { padding-right: 0; }
  .hrow { grid-template-columns: 72px minmax(0, 1fr); align-items: center; padding-right: 1rem; }
  .hrow p { display: none; }
  .hrow .hc-ill { grid-row: span 2; }
}