/* YOUYI Inner Pages V2 — Guide layout
   Editorial/corporate layout: large serif chapter hierarchy, "In This Guide" nav,
   Key Takeaway callouts, numbered 01/02/03 chapters, checklist / expert-note,
   FAQ, related pages, final CTA. V2 PILOT ONLY. Requires inner-v2-base.css. */

/* ---------- Guide hero — split layout (Figma V2: narrower text column + full-bleed photo) ---------- */
.guide-hero {background:var(--paper); overflow:hidden;}
.guide-hero-grid {display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:stretch; min-height:clamp(340px,40vw,500px);}
.guide-hero-copy {display:flex; flex-direction:column; justify-content:center; padding:clamp(44px,5.6vw,76px) clamp(0px,2vw,8px) clamp(44px,5.6vw,76px) 0; min-width:0;}
.guide-hero .kicker {display:block; margin-bottom:14px;}
.guide-hero h1 {max-width:16ch;}
.guide-hero .lead {margin-top:clamp(16px,1.8vw,22px); max-width:42ch; color:var(--ink-2); font-size:var(--fs-lead); line-height:1.75;}
.guide-meta {margin-top:22px; display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3);}
.guide-meta span {padding-left:14px; border-left:1px solid var(--line-cool);}
.guide-meta span:first-child {padding-left:0; border-left:0;}
.guide-hero-photo-split {position:relative; isolation:isolate;}
.guide-hero-photo-split img {width:100%; height:100%; object-fit:cover; display:block;}
.guide-hero-photo-split::after {content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(11,42,82,.30) 0%, rgba(11,42,82,.05) 45%, rgba(11,42,82,.2) 100%);}
@media (max-width:900px) {
  /* Mobile order: breadcrumb, GUIDE eyebrow, H1, intro, meta, photo, then In This Guide. */
  .guide-hero-grid {grid-template-columns:1fr; min-height:0;}
  .guide-hero-photo-split {height:clamp(180px,44vw,240px); order:0;}
  .guide-hero-copy {padding:28px 0 0; min-width:0;}
  .guide-hero h1 {max-width:none;}
  .guide-hero .lead {max-width:none;}
}

/* ---------- In This Guide — vertical left rail + wide Key Takeaway with image (Figma V2) ---------- */
.guide-rail-grid {display:grid; grid-template-columns:minmax(170px,210px) minmax(0,1fr); gap:clamp(28px,3vw,40px); align-items:start;}
.guide-rail {border-left:2px solid var(--brand); padding-left:20px;}
.guide-rail h2 {font-family:var(--sans); font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; color:var(--ink);}
.guide-rail ol {margin:0; padding:0; list-style:none; display:grid; gap:14px; counter-reset:toc;}
.guide-rail li {counter-increment:toc; font-size:13.5px;}
.guide-rail li::before {content:counter(toc, decimal-leading-zero); display:block; font-family:var(--serif); font-weight:700; color:var(--brand); font-size:13px; margin-bottom:2px;}
.guide-rail a {color:var(--ink-2); border-bottom:1px solid transparent; transition:color .16s var(--ease), border-color .16s var(--ease);}
.guide-rail a:hover {color:var(--brand-deep); border-bottom-color:var(--brand);}
.guide-rail .rail-sub {margin-top:16px; padding-top:16px; border-top:1px solid var(--line-cool); display:grid; gap:8px; font-size:12.5px; color:var(--ink-3);}
/* Light-blue Key Takeaway: heading top-left, body below, image far right (Figma V2 final) */
.key-takeaway {background:var(--paper-blue-2); color:var(--ink); display:grid; grid-template-columns:minmax(0,1fr) 190px; align-items:stretch;}
.key-takeaway-text {padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column; justify-content:center;}
.key-takeaway .kicker {color:var(--brand);}
.key-takeaway h3 {font-family:var(--serif); font-weight:700; font-size:clamp(19px,1.8vw,23px); margin:8px 0 0;}
.key-takeaway p {color:var(--ink-2); font-size:15px; line-height:1.75; margin:12px 0 0;}
.key-takeaway strong {color:var(--ink);}
.key-takeaway img {width:100%; height:100%; min-height:160px; object-fit:cover; display:block;}
@media (max-width:900px) {.guide-rail-grid {grid-template-columns:1fr; gap:24px;} .guide-rail {border-left:0; border-top:2px solid var(--brand); padding-left:0; padding-top:16px;}}
/* Compact TOC modifier: for guides with more chapters than the reference master, split the rail list into two columns at desktop widths only, so the tall single-column list no longer forces excess row height in .guide-rail-grid (mobile/tablet stacking below 901px is untouched). */
@media (min-width:901px) {
  .guide-rail.compact-toc ol {display:block; column-count:2; column-gap:22px;}
  .guide-rail.compact-toc li {break-inside:avoid; margin-bottom:14px;}
}
/* kt-fill modifier: lets the (now shorter, two-column) Key Takeaway box stretch to match the rail's row height instead of leaving blank white space below it — scoped to a modifier so the approved master's plain .guide-rail-grid (align-items:start) is untouched. */
@media (min-width:901px) {
  .guide-rail-grid.kt-fill {align-items:stretch;}
  .guide-rail-grid.kt-fill .key-takeaway {height:100%;}
}
@media (max-width:640px) {.key-takeaway {grid-template-columns:1fr;} .key-takeaway img {width:100%; height:140px; min-height:0;}}
.key-takeaway.text-only {grid-template-columns:1fr;}

/* ---------- Numbered editorial chapters — large numeral column + alternating side content (Figma V2) ---------- */
.chapter {padding:clamp(40px,4.4vw,64px) 0; border-top:1px solid var(--line-cool);}
.chapter:first-of-type {border-top:0;}
.chapter-head {display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:baseline; margin-bottom:20px;}
.chapter-num {font-family:var(--serif); font-weight:700; font-size:clamp(30px,3.2vw,42px); color:var(--brand); line-height:1;}
.chapter-head h2 {max-width:34ch;}
.chapter-body {display:grid; gap:16px; max-width:74ch;}
.chapter-body p {color:var(--ink-2); font-size:15.5px; line-height:1.8;}
.chapter-body h3 {font-family:var(--sans); font-size:16px; margin-top:6px;}
.chapter-grid {margin-top:8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px);}
.chapter-card {background:var(--paper-blue-2); border:1px solid var(--line-cool); padding:20px 22px;}
.chapter-card h4 {font-family:var(--sans); font-weight:700; font-size:14.5px; margin:0 0 8px; color:var(--ink);}
.chapter-card p {color:var(--ink-2); font-size:13.5px; line-height:1.65; margin:0;}
.chapter-grid.cols-3 {grid-template-columns:repeat(3, minmax(0,1fr));}
.chapter-grid.cols-4 {grid-template-columns:repeat(4, minmax(0,1fr));}
@media (max-width:900px) {
  .chapter-grid.cols-3, .chapter-grid.cols-4 {grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:640px) {
  .chapter-head {grid-template-columns:1fr;}
  .chapter-grid, .chapter-grid.cols-3, .chapter-grid.cols-4 {grid-template-columns:1fr;}
}

/* ---------- Editorial chapter: numeral column (~64px) + heading/body + alternating side content ---------- */
.chapter-editorial {display:grid; grid-template-columns:64px minmax(0,1fr); gap:clamp(20px,2.4vw,28px); padding:clamp(40px,4.4vw,64px) 0; border-top:1px solid var(--line-cool);}
.chapter-editorial:first-of-type {border-top:0;}
.chapter-num-big {font-family:var(--serif); font-weight:700; font-size:clamp(34px,3.6vw,48px); color:var(--brand); line-height:1;}
.chapter-editorial-body {display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,2.8vw,36px); align-items:start;}
.chapter-editorial-body > .ce-main h2 {max-width:30ch;}
.chapter-editorial-body > .ce-main p {color:var(--ink-2); font-size:15px; line-height:1.8; margin:12px 0 0;}
.chapter-editorial-body .ce-side {min-width:0;}
.chapter-editorial-body .ce-side.side-photo img {width:100%; height:100%; min-height:200px; object-fit:cover; display:block;}
.chapter-editorial-body .ce-side.side-checklist {background:var(--paper-blue-2); padding:22px 24px;}
/* Two chapters paired side-by-side in one row (Figma V2) */
.chapter-pair {display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.2vw,44px); padding:clamp(40px,4.4vw,64px) 0; border-top:1px solid var(--line-cool);}
.chapter-pair .chapter-editorial {grid-template-columns:56px minmax(0,1fr); padding:0; border-top:0;}
.chapter-pair .chapter-num-big {font-size:clamp(28px,2.8vw,36px);}
@media (max-width:900px) {
  .chapter-editorial {grid-template-columns:1fr;}
  .chapter-editorial-body {grid-template-columns:1fr;}
  .chapter-pair {grid-template-columns:1fr; gap:32px;}
  .chapter-pair .chapter-editorial {grid-template-columns:56px minmax(0,1fr);}
}

/* ---------- Decision module (Figma Section 01: numeral + heading/body + two right-side panels) ---------- */
.decision-module {display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(24px,2.8vw,36px); align-items:start;}
.decision-panels {display:grid; gap:16px;}
.decision-panels .cp-box {padding:18px 20px;}
@media (max-width:900px) {.decision-module {grid-template-columns:1fr;}}

/* ---------- Connected-circle process timeline (Figma Section 02) ---------- */
.timeline-circles {display:flex; align-items:flex-start; position:relative; padding-top:20px;}
.timeline-circles::before {content:""; position:absolute; top:39px; left:6%; right:6%; height:1px; background:var(--line-cool); z-index:0;}
.timeline-circles .step {position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 6px;}
.timeline-circles .circle {width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--brand); color:var(--brand); font-family:var(--serif); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.timeline-circles .step p {margin:0; font-family:var(--sans); font-weight:700; font-size:12.5px; color:var(--ink); line-height:1.4;}
@media (max-width:780px) {
  .timeline-circles {flex-direction:column; align-items:flex-start; gap:18px; padding-top:0;}
  .timeline-circles::before {display:none;}
  .timeline-circles .step {flex-direction:row; align-items:center; text-align:left; gap:14px; width:100%;}
  .timeline-circles .circle {margin-bottom:0; flex:0 0 auto;}
}

/* ---------- Checklist (single list) ---------- */
.checklist {margin:0; padding:0; list-style:none; display:grid; gap:12px; max-width:70ch;}
.checklist li {position:relative; padding-left:30px; color:var(--ink-2); font-size:14.5px; line-height:1.65;}
.checklist li::before {content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border:1px solid var(--brand); border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--brand); font-weight:700;}

/* ---------- Paired checklist (Core / Model-specific — Figma V2) ---------- */
.checklist-pair {display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.8vw,22px); margin-top:8px;}
.checklist-pair .cp-box {padding:18px 20px;}
.checklist-pair .cp-box.cp-core {background:#fdf6ec; border:1px solid #eeddc0;}
.checklist-pair .cp-box.cp-model {background:var(--paper-blue-2); border:1px solid var(--line-cool);}
.checklist-pair .cp-box h4 {font-family:var(--sans); font-weight:700; font-size:13.5px; margin:0 0 12px; color:var(--ink);}
.checklist-pair .cp-box ul {margin:0; padding:0; list-style:none; display:grid; gap:9px;}
.checklist-pair .cp-box li {position:relative; padding-left:22px; color:var(--ink-2); font-size:13.5px; line-height:1.55;}
.checklist-pair .cp-core li::before {content:"\2713"; position:absolute; left:0; top:0; color:#b8842f; font-weight:700; font-size:12px;}
.checklist-pair .cp-model li::before {content:"\2713"; position:absolute; left:0; top:0; color:var(--brand); font-weight:700; font-size:12px;}
@media (max-width:640px) {.checklist-pair {grid-template-columns:1fr;}}

/* ---------- Expert note (with attribution line) ---------- */
.expert-note {margin-top:20px; border-left:3px solid var(--brand); background:var(--paper-blue-2); padding:16px 20px; font-size:14px; line-height:1.7; color:var(--ink-2); max-width:70ch;}
.expert-note strong {color:var(--ink);}
.expert-note .en-attribution {display:block; margin-top:10px; font-family:var(--serif); font-style:italic; font-size:13px; color:var(--ink-3);}

/* ---------- FAQ — editorial heading zone (large serif + arrow) + accordion + supporting image (Figma V2 final, 3 zones) ---------- */
.guide-faq-grid {display:grid; grid-template-columns:minmax(190px,240px) minmax(0,1fr) minmax(160px,210px); gap:clamp(28px,3.2vw,44px); align-items:start;}
.guide-faq-grid .faq-heading-zone {position:sticky; top:100px;}
.guide-faq-grid .faq-heading-zone h2 {font-size:clamp(26px,2.8vw,36px); line-height:1.12; max-width:9ch;}
.guide-faq-grid .faq-arrow {display:block; margin-top:18px; font-family:var(--serif); font-size:26px; color:var(--brand);}
.guide-faq-grid .faq-accordion {border-top:1px solid var(--line-cool); max-width:none;}
.guide-faq-grid .faq-accordion details {border-bottom:1px solid var(--line-cool); padding:16px 0;}
.guide-faq-grid .faq-accordion summary {cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-family:var(--sans); font-weight:700; font-size:15px; color:var(--ink);}
.guide-faq-grid .faq-accordion summary::-webkit-details-marker {display:none;}
.guide-faq-grid .faq-accordion summary::after {content:"+"; flex:0 0 auto; font-size:20px; line-height:1; color:var(--brand); font-weight:400;}
.guide-faq-grid .faq-accordion details[open] summary::after {content:"\2212";}
.guide-faq-grid .faq-accordion details p {margin:12px 0 0; color:var(--ink-2); font-size:14.5px; line-height:1.75;}
.guide-faq-grid .faq-photo {position:sticky; top:100px;}
.guide-faq-grid .faq-photo img {width:100%; height:auto; max-height:320px; object-fit:cover; display:block; aspect-ratio:3/4;}
@media (max-width:1100px) {.guide-faq-grid {grid-template-columns:minmax(190px,240px) minmax(0,1fr) minmax(140px,180px);}}
@media (max-width:900px) {
  .guide-faq-grid {grid-template-columns:1fr;}
  .guide-faq-grid .faq-heading-zone {position:static;}
  .guide-faq-grid .faq-photo {position:static; max-width:260px; margin:0 auto;}
}

/* ---------- Final CTA — split row (Figma V2) ---------- */
.final-cta.split-row .wrap {display:grid; grid-template-columns:1fr auto; gap:24px 40px; align-items:center;}
.final-cta.split-row h2 {max-width:22ch;}
.final-cta.split-row .actions {margin-top:0;}
@media (max-width:760px) {.final-cta.split-row .wrap {grid-template-columns:1fr;}}

/* ---------- Related pages — numbered circle badge cards (Figma V2) ---------- */
.related-numbered-grid {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,1.8vw,22px);}
.related-numbered-grid .rn-card {display:flex; gap:16px; align-items:flex-start; padding:22px 22px 24px; border:1px solid var(--line-cool);}
.related-numbered-grid .rn-badge {flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--paper-blue-2); border:1px solid var(--line-cool); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:14px; color:var(--brand);}
.related-numbered-grid h3 {font-family:var(--sans); font-size:15px; margin:0 0 6px;}
.related-numbered-grid p {color:var(--ink-2); font-size:13.5px; line-height:1.6; margin:0;}
@media (max-width:900px) {.related-numbered-grid {grid-template-columns:1fr;}}
.related-numbered-grid.cols-4 {grid-template-columns:repeat(4, minmax(0,1fr));}
@media (max-width:1100px) {.related-numbered-grid.cols-4 {grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:620px) {.related-numbered-grid.cols-4 {grid-template-columns:1fr;}}