/* ============================================================
   STAIRS premium — SUBPAGE COMPONENTS  v1.1  (SVĚTLÁ verze)
   Links AFTER stairs-premium.css. Fotky BEZ ořezů, žádná tmavá vrstva.
   ============================================================ */

/* Page hero (inner) — SVĚTLÝ: text nahoře, pod ním velká fotka bez ořezu */
.phero{background:var(--paper);padding:calc(var(--sec-hero) + 30px) 0 0}
.phero--tall{padding-top:calc(var(--sec-hero) + 40px)}
.phero__bg{display:none}            /* zrušená fullscreen fotka na pozadí */
.phero__veil{display:none}          /* zrušený tmavý překryv */
.phero__inner{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.phero__copy{max-width:760px}
.phero h1{font-family:var(--head);color:var(--ink);font-size:var(--t-h1);line-height:1.04;letter-spacing:-.02em;margin-top:var(--s4);font-weight:800}
.phero h1 em{font-style:normal;color:var(--accent)}
.phero__lead{margin-top:var(--s5);font-size:var(--t-lead);line-height:1.5;color:var(--body);max-width:58ch}
.phero .kicker{color:var(--accent)}
.phero .btn-row{margin-top:var(--s6)}
/* velká hero fotka pod textem (vloží se .phero__photo) */
.phero__photo{margin-top:var(--s8)}
.phero__photo img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}

/* Breadcrumb (světlé) */
.crumb{position:relative;z-index:2;margin-bottom:var(--s3)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--t-small);color:var(--muted)}
.crumb a{color:var(--muted);transition:color var(--d-xs)}
.crumb a:hover{color:var(--accent)}
.crumb li+li::before{content:"/";margin-right:8px;color:var(--subtle)}
.crumb [aria-current]{color:var(--ink)}

/* Trio strip — 3 stejně široké fotky BEZ ořezu */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:start}
.trio figure{overflow:hidden;border-radius:var(--r-md)}
.trio img{width:100%;height:auto;display:block;transition:transform var(--d-lg) var(--ease)}
.trio figure:hover img{transform:scale(1.03)}
.trio figcaption{margin-top:10px;font-family:var(--head);font-weight:700;color:var(--ink);font-size:.9375rem}

/* Split: prose + sticky aside */
.split{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(32px,5vw,72px);align-items:start}
.prose{max-width:64ch}
.prose>p{margin-top:var(--s4);color:var(--body)}
.prose>p:first-child{margin-top:0}
.prose h2{font-size:var(--t-h2);margin-top:var(--s8)}
.prose h3{font-size:var(--t-h3);font-family:var(--head);font-weight:800;margin-top:var(--s6)}
.prose ul{margin-top:var(--s4);padding-left:0;list-style:none;display:grid;gap:12px}
.prose ul li{position:relative;padding-left:26px;color:var(--body)}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--accent)}
.aside{position:sticky;top:100px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-sm)}
.aside .kicker{color:var(--accent)}
.aside .price{font-family:var(--head);font-weight:800;font-size:2rem;color:var(--ink);margin-top:8px;line-height:1}
.aside .price small{display:block;font-family:var(--sans);font-size:var(--t-small);color:var(--muted);margin-top:6px;font-weight:400}
.aside ul{list-style:none;margin:var(--s5) 0;display:grid;gap:10px}
.aside ul li{position:relative;padding-left:24px;font-size:.9375rem;color:var(--body)}
.aside ul li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border:2px solid var(--accent);border-radius:var(--r-pill)}
.aside .btn{width:100%;justify-content:center;margin-top:var(--s3)}

/* Quote band (světlý) */
.qband{padding-block:var(--sec-spacious);background:var(--surface)}
.qband blockquote{max-width:24ch;margin:0 auto;text-align:center}
.qband .q{font-family:var(--head);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.qband.full blockquote{max-width:30ch}
.qband cite{display:block;margin-top:var(--s5);font-style:normal;font-family:var(--head);font-size:var(--t-small);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Spec table */
.spec{width:100%;border-collapse:collapse;margin-top:var(--s5)}
.spec tr{border-top:1px solid var(--line)}
.spec tr:last-child{border-bottom:1px solid var(--line)}
.spec th{text-align:left;padding:16px 24px 16px 0;font-family:var(--head);font-weight:700;color:var(--ink);width:38%;vertical-align:top;font-size:.9375rem}
.spec td{padding:16px 0;color:var(--body);font-size:.9375rem}

/* Comparison */
.cmp{width:100%;border-collapse:collapse;margin-top:var(--s6);font-size:.9375rem}
.cmp th,.cmp td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-family:var(--head);font-weight:800;font-size:1.125rem;color:var(--ink);border-bottom:2px solid var(--ink)}
.cmp tbody th{font-weight:700;color:var(--muted);width:24%}
.cmp td strong{color:var(--ink)}
.cmp .ca{background:var(--accent-soft)}

/* Numbered phases */
.phases{counter-reset:ph;display:grid;gap:0;margin-top:var(--s7)}
.phases article{counter-increment:ph;display:grid;grid-template-columns:auto 1fr;gap:var(--s6);padding:var(--s6) 0;border-top:1px solid var(--line)}
.phases article:last-child{border-bottom:1px solid var(--line)}
.phases article::before{content:counter(ph,decimal-leading-zero);font-family:var(--head);font-weight:800;font-size:2rem;color:var(--accent);line-height:1}
.phases h3{font-size:var(--t-h3);font-family:var(--head);font-weight:800}
.phases p{margin-top:8px;font-size:.9375rem;max-width:60ch}

/* Challenge -> result (světlý, jemné karty) */
.crr{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7)}
.crr>div{padding:var(--s6);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)}
.crr span{font-size:var(--t-cap);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-family:var(--head);font-weight:700}
.crr h3{font-family:var(--head);font-weight:800;font-size:var(--t-h3);margin-top:10px;color:var(--ink)}
.crr p{color:var(--body);margin-top:12px;font-size:.9375rem}

/* Editorial gallery — fotky bez ořezu (masonry sloupce) */
.egal{margin-top:var(--s7);column-count:3;column-gap:var(--s4)}
.egal figure{break-inside:avoid;margin-bottom:var(--s4);overflow:hidden;border-radius:var(--r-md)}
.egal figure.w3,.egal figure.w6{}
.egal img{width:100%;height:auto;display:block;transition:transform var(--d-lg) var(--ease)}
.egal figure:hover img{transform:scale(1.03)}

/* Story (světlá verze) */
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
.story__sticky{position:sticky;top:120px}
.story__sticky .kicker{color:var(--accent)}
.story__sticky .h2{margin-top:var(--s3)}
.story dl{margin-top:var(--s6);display:grid;gap:0}
.story dl div{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.story dt{color:var(--muted);font-size:.875rem}
.story dd{color:var(--ink);font-family:var(--head);font-weight:700;font-size:.9375rem;text-align:right}
.story__chapters{display:grid;gap:var(--s7)}
.story__chapters figure{overflow:hidden;border-radius:var(--r-lg);margin-bottom:var(--s4)}
.story__chapters img{width:100%;height:auto;display:block}
.story__chapters h3{font-family:var(--head);font-weight:800;font-size:var(--t-h3);color:var(--ink)}
.story__chapters p{color:var(--body);margin-top:10px}

/* Article */
.amain{max-width:var(--maxw-narrow);margin-inline:auto}
.ameta{display:flex;flex-wrap:wrap;gap:18px;padding:var(--s5) 0;border-bottom:1px solid var(--line);font-size:var(--t-small);color:var(--muted)}
.alead{font-size:var(--t-lead);line-height:1.55;color:var(--ink);margin-top:var(--s6)}
.abody{margin-top:var(--s6)}
.abody h2{font-size:var(--t-h2);margin-top:var(--s8);font-family:var(--head);font-weight:800}
.abody h3{font-family:var(--head);font-weight:800;font-size:var(--t-h3);margin-top:var(--s6)}
.abody>p{margin-top:var(--s4);font-size:1.0625rem;line-height:1.75;color:var(--body)}
.abody ul,.abody ol{margin-top:var(--s4);padding-left:24px;display:grid;gap:10px;color:var(--body);font-size:1.0625rem;line-height:1.7}
.abody blockquote{margin:var(--s7) 0;padding-left:28px;border-left:3px solid var(--accent)}
.abody blockquote p{font-family:var(--head);font-weight:800;font-size:1.5rem;line-height:1.3;color:var(--ink)}
.takeaway{background:var(--surface);border-radius:var(--r-lg);padding:var(--s6);margin-top:var(--s7)}
.takeaway .kicker{color:var(--accent)}
.takeaway p{margin-top:var(--s3);color:var(--ink);font-size:1.0625rem}

/* Poradna hub cards */
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7)}
.qcard{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s6);transition:transform var(--d-sm) var(--ease),box-shadow var(--d-sm) var(--ease),border-color var(--d-sm)}
.qcard:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--accent)}
.qcard span{font-size:var(--t-cap);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-family:var(--head);font-weight:700}
.qcard h3{font-family:var(--head);font-weight:800;font-size:1.25rem;color:var(--ink);margin-top:10px;line-height:1.2}
.qcard p{margin-top:10px;font-size:.9375rem;color:var(--body)}
.qcard em{display:inline-block;margin-top:14px;font-style:normal;font-weight:700;font-family:var(--head);color:var(--accent);font-size:.875rem}

/* Related strip — fotky bez ořezu */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7);align-items:start}
.rel a{display:block}
.rel figure,.rel a>figure{overflow:hidden;border-radius:var(--r-md)}
.rel a>img{width:100%;height:auto;display:block;border-radius:var(--r-md);transition:transform var(--d-lg) var(--ease)}
.rel a:hover img{transform:scale(1.03)}
.rel__t{padding-top:var(--s4)}
.rel__t span{font-size:var(--t-cap);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-family:var(--head);font-weight:700}
.rel__t h3{font-family:var(--head);font-weight:800;font-size:1.25rem;margin-top:4px;color:var(--ink)}

@media(max-width:900px){
  .split,.story{grid-template-columns:1fr}
  .aside,.story__sticky{position:static}
  .crr,.qcards,.rel{grid-template-columns:1fr 1fr}
  .egal{column-count:2}
  .cmp th,.cmp td{padding:12px 10px}
}
@media(max-width:600px){
  .trio,.crr,.qcards,.rel{grid-template-columns:1fr}
  .egal{column-count:1}
  .phases article{grid-template-columns:1fr}
}

/* VIP body už není tmavé */
body.sd-vip{background:var(--paper);color:var(--body)}
body.sd-vip .ft{border-top:1px solid rgba(255,255,255,.08)}