/* =======================================================================
   Konia — How-to section (/how-to/)
   Hub: photo hero · three-step story · guide grid.
   Guide: sticky left sidebar · article column · steps · tips · pager.

   Reuses shared tokens + .band-dark + .eyebrow + .section-head + .store.
   `.cta` / `.store-row` are duplicated from index.css so pages in this
   section need only shared.css + this file (the two are never loaded
   together, so the duplicate selectors never collide).

   Updates:
   - 2026-07-30: Initial creation with the how-to section.
   ======================================================================= */

/* ============================ HUB: HERO ============================ */
.hth{position:relative;overflow:hidden;background:var(--bg);padding:clamp(72px,11vw,128px) 0 clamp(48px,6vw,72px)}
.hth__bg{position:absolute;inset:0;z-index:0}
.hth__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:var(--photo-filter)}
.hth__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,20,.74),rgba(11,14,20,.82) 55%,var(--bg) 96%),radial-gradient(100% 60% at 50% 0%,var(--green-soft),transparent 60%)}
.hth .wrap{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.hth h1{font-size:clamp(40px,6vw,76px);font-weight:800;margin:24px 0 0;text-wrap:balance;color:var(--text);max-width:16ch}
.hth p{margin-top:20px;font-size:clamp(17px,1.5vw,21px);color:#C7CDD8;max-width:580px;text-wrap:pretty}

/* ============================ HUB: THREE-STEP STORY ============================ */
.hsteps{padding:var(--section-py) 0;background:var(--bg-band);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hsteps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.hstep{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:30px 28px 26px;display:flex;flex-direction:column;transition:transform .22s,border-color .22s}
.hstep:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.hstep__num{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-bright);font-size:15px;font-weight:800;margin-bottom:18px}
.hstep h3{font-size:19px;font-weight:800;color:var(--text)}
.hstep p{margin-top:10px;color:var(--text-dim);font-size:14.5px;flex:1;text-wrap:pretty}
.hstep__links{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.hstep__links a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--green-bright);background:var(--green-soft);border:1px solid var(--green-line);border-radius:999px;padding:7px 13px;transition:var(--transition)}
.hstep__links a:hover{background:var(--card-2);border-color:var(--border-strong);text-decoration:none;transform:translateY(-1px)}
.hstep__links a svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:880px){.hsteps__grid{grid-template-columns:1fr}}

/* ============================ HUB: GUIDE GRID ============================ */
.hguides{padding:var(--section-py) 0;background:var(--bg)}
.hguides__cat{margin-top:56px}
.hguides__cat:first-of-type{margin-top:46px}
.hguides__cat h2{font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--green-bright);margin-bottom:20px}
.hguides__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hgcard{display:flex;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 24px 22px;transition:transform .22s,border-color .22s,background .22s}
.hgcard:hover{transform:translateY(-4px);border-color:var(--border-strong);background:var(--card-2);box-shadow:var(--shadow-card);text-decoration:none}
.hgcard__ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-bright)}
.hgcard__ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hgcard__txt{min-width:0}
.hgcard h3{font-size:17px;font-weight:800;color:var(--text);line-height:1.25;text-wrap:balance}
.hgcard p{margin-top:8px;color:var(--text-dim);font-size:14px;line-height:1.55;text-wrap:pretty}
@media(max-width:820px){.hguides__grid{grid-template-columns:1fr}}

/* ============================ GUIDE: LAYOUT ============================ */
.guide{padding:clamp(30px,4vw,44px) 0 var(--section-py);background:var(--bg)}
.guide__wrap{display:grid;grid-template-columns:242px minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:start}

/* Sidebar: sticky under the 64px header, scrolls internally if it ever
   outgrows the viewport. Contents are injected by js/how-to.js. */
.guide__side{position:sticky;top:88px;max-height:calc(100vh - 108px);overflow-y:auto;padding-right:6px}
.gside__back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text-dim);transition:color var(--transition)}
.gside__back:hover{color:var(--green-bright);text-decoration:none}
.gside__back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gside__hd{margin-top:26px;padding-bottom:12px;border-bottom:1px solid var(--border);font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.gside__group{margin-top:22px}
.gside__cat{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-bright);margin-bottom:9px}
.gside__list{list-style:none}
/* No negative margin here: pulling the row left aligned item text with the
   category heading, but dragged the active pill outside the column so the
   highlight looked stuck to the edge. Items indent under their heading
   instead, which is the usual docs-sidebar hierarchy and keeps the pill
   inset within the rail. */
.gside__list a{display:block;padding:8px 12px;border-radius:9px;font-size:14px;line-height:1.4;color:var(--text-dim);transition:var(--transition)}
.gside__list a:hover{color:var(--text);background:var(--card-2);text-decoration:none}
.gside__list a.is-active{color:var(--green-bright);background:var(--green-soft);font-weight:600}

/* ============================ GUIDE: ARTICLE ============================ */
.guide__main{min-width:0;max-width:760px}
.gcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13px;color:var(--muted);margin-bottom:22px}
.gcrumb a{color:var(--muted);transition:color var(--transition)}
.gcrumb a:hover{color:var(--green-bright);text-decoration:none}
.gcrumb svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.gcrumb span[aria-current]{color:var(--text-dim)}

.guide__main h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;color:var(--text);margin-top:16px;text-wrap:balance}
.guide__lede{margin-top:16px;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--text-dim);text-wrap:pretty}
.guide__meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted)}
.guide__meta span{display:inline-flex;align-items:center;gap:7px}
.guide__meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Body prose. One block per language (id="content-en|fr|de"), toggled by
   setLanguage() in shared.js, same pattern as the legal pages. */
.gbody{margin-top:34px;color:var(--text-dim);font-size:16px;line-height:1.72}
.gbody h2{font-size:clamp(21px,2.4vw,26px);font-weight:800;color:var(--text);margin-top:44px;margin-bottom:14px;letter-spacing:-.01em;text-wrap:balance}
.gbody h3{font-size:17.5px;font-weight:700;color:var(--text);margin-top:28px;margin-bottom:9px}
.gbody p{margin-bottom:15px}
.gbody > ul{margin:0 0 18px;padding-left:21px}
.gbody > ul li{margin-bottom:9px}
.gbody strong{color:var(--text);font-weight:700}
.gbody a{color:var(--green-bright);font-weight:500}
.gbody a:hover{text-decoration:underline}
.gbody code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--card-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;color:var(--text-dim)}

/* Numbered step timeline */
.gsteps{list-style:none;counter-reset:gstep;margin:26px 0 30px;padding:0}
.gsteps > li{counter-increment:gstep;position:relative;margin-left:16px;padding-left:38px;padding-bottom:26px;border-left:1px solid var(--border)}
.gsteps > li:last-child{border-left-color:transparent;padding-bottom:0}
.gsteps > li::before{
  content:counter(gstep);position:absolute;left:-16px;top:-4px;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-bright);
  font-family:var(--font-family);font-size:13.5px;font-weight:800;line-height:1;
}
.gsteps > li h3{margin-top:2px;margin-bottom:7px}
.gsteps > li p:last-child{margin-bottom:0}
.gsteps ul{margin:10px 0 0;padding-left:20px}
.gsteps ul li{margin-bottom:7px}

/* Callout */
.gtip{margin:26px 0;padding:18px 20px;border-radius:var(--radius-sm);background:var(--green-soft);border:1px solid var(--green-line);font-size:14.5px;line-height:1.65;color:var(--text-dim)}
.gtip strong{color:var(--green-bright)}
.gtip p:last-child{margin-bottom:0}
.gtip--note{background:var(--card-2);border-color:var(--border)}
.gtip--note strong{color:var(--text)}

/* "What's next" cross-links at the foot of the body */
.gnext{margin-top:38px;padding-top:26px;border-top:1px solid var(--border)}
.gnext__hd{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.gnext__links{display:flex;flex-wrap:wrap;gap:10px}
.gnext__links a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:9px 16px;transition:var(--transition)}
.gnext__links a:hover{border-color:var(--green-line);color:var(--green-bright);background:var(--green-soft);text-decoration:none;transform:translateY(-2px)}
.gnext__links a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Prev / next pager (injected by js/how-to.js) */
.gpager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:44px}
.gpager--end{grid-template-columns:1fr}
.gpager__item{display:flex;flex-direction:column;gap:7px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;transition:var(--transition)}
.gpager__item:hover{border-color:var(--green-line);background:var(--card-2);text-decoration:none;transform:translateY(-2px)}
.gpager__item--next{text-align:right;align-items:flex-end}
.gpager__lbl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gpager__lbl svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gpager__ttl{font-size:15px;font-weight:700;color:var(--text);line-height:1.35}
.gpager__item:hover .gpager__ttl{color:var(--green-bright)}

/* ============================ GUIDE: RESPONSIVE ============================
   Below 980px the rail is dropped: a 240px sidebar next to a reading column
   does not survive tablet widths. The "All guides" escape hatch stays, the
   rest of the tree is hidden, and the pager at the foot carries navigation. */
@media(max-width:980px){
  .guide__wrap{grid-template-columns:1fr;gap:0}
  .guide__side{position:static;max-height:none;overflow:visible;padding-right:0;margin-bottom:26px}
  .gside__hd,.gside__group{display:none}
  .guide__main{max-width:none}
}
@media(max-width:620px){
  .gpager{grid-template-columns:1fr}
  .gpager__item--next{text-align:left;align-items:flex-start}
  .gsteps > li{margin-left:14px;padding-left:32px}
}

/* ============================ CTA (shared shape with index.css) ============================ */
.cta{position:relative;overflow:hidden;padding:clamp(86px,11vw,150px) 0;text-align:center;background:var(--bg)}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:var(--photo-filter)}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,20,.82),rgba(11,14,20,.9)),radial-gradient(120% 80% at 50% 120%,var(--green-soft),transparent 60%)}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:clamp(32px,4.6vw,58px);font-weight:800;text-wrap:balance;color:var(--text)}
.cta p{margin:18px auto 0;color:#C3CAD6;font-size:clamp(16px,1.5vw,20px);max-width:520px}
.store-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:38px}