/* ─────────────────────────────────────────────────────────────────────
   treatments-box.css
   Wrap the four content chapters — i Operation, ii Recovery,
   iii Risks & trade-offs, iv Common questions — in matching contained
   boxes. For Risks, the text is lifted OUT of the old dark navy panel so it
   sits directly in the light box like the others. For the FAQ, the white
   accordion rows get a touch of definition so they read on the white box.
   Loaded after each page's inline <style> so it wins.
   ───────────────────────────────────────────────────────────────────── */
.treat-main .treat-section[data-chapter="i"],
.treat-main .treat-section[data-chapter="ii"],
.treat-main .treat-section[data-chapter="iii"],
.treat-main .treat-section[data-chapter="iv"] {
    background: #ffffff !important;
    border: 1px solid rgba(201, 169, 110, 0.32) !important;
    border-radius: 18px !important;
    box-shadow: 0 26px 64px -44px rgba(12, 24, 41, 0.42) !important;
    padding: clamp(1.9rem, 3vw, 2.8rem) clamp(1.7rem, 2.6vw, 2.6rem) !important;
    margin: 0 !important;
}

/* ── Operation box (i) redesign — more compact, smaller quote + image ──
   Heading full-width on top; text + capped image & smaller quote beside it;
   "When this is right" as a compact 2-column band below. */
.treat-main .treat-section[data-chapter="i"] .op-head { margin-bottom: 1.5rem; padding-right: 60px; }
.treat-main .treat-section[data-chapter="i"] .op-body {
    display: grid; grid-template-columns: 1.35fr 0.92fr; gap: 2.2rem; align-items: start;
}
.treat-main .treat-section[data-chapter="i"] .op-text p {
    margin: 0; font-size: 1rem !important; line-height: 1.72 !important; max-width: none !important;
}
.treat-main .treat-section[data-chapter="i"] .op-media { display: flex; flex-direction: column; gap: 1.1rem; }
/* Capped image — fixed 4:3, no longer grows to fill the column. */
.treat-main .treat-section[data-chapter="i"] .op-media .ed-what-illus {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    flex: none !important;
    width: 100%;
    border-radius: 14px;
    -webkit-mask-image: none !important; mask-image: none !important;
    box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.25);
}
/* Smaller, quieter pull-quote. */
.treat-main .treat-section[data-chapter="i"] .ed-quiet-quote {
    font-size: 1rem !important; line-height: 1.5 !important;
    padding: 1rem 0.4rem 0.3rem 2.2rem !important; margin: 0 !important;
}
.treat-main .treat-section[data-chapter="i"] .ed-quiet-quote::before {
    font-size: 3.2rem !important; top: -0.5rem !important;
}
.treat-main .treat-section[data-chapter="i"] .ed-quiet-quote cite { margin-top: 0.7rem !important; }
/* "When this is right" — compact full-width band, list in two columns. */
.treat-main .treat-section[data-chapter="i"] .op-criteria { margin-top: 1.9rem !important; }
.treat-main .treat-section[data-chapter="i"] .op-criteria ul { columns: 2; column-gap: 2.4rem; }
.treat-main .treat-section[data-chapter="i"] .op-criteria li { break-inside: avoid; }
@media (max-width: 820px) {
    .treat-main .treat-section[data-chapter="i"] .op-body { grid-template-columns: 1fr; }
    .treat-main .treat-section[data-chapter="i"] .op-media .ed-what-illus { aspect-ratio: 16 / 9 !important; }
    .treat-main .treat-section[data-chapter="i"] .op-criteria ul { columns: 1; }
}

/* Risks (iii): drop the dark navy inner panel so the text sits directly in
   the light box, and bring its colours back into the light palette. */
.treat-main .treat-section[data-chapter="iii"] .risks-panel {
    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}
.treat-main .treat-section[data-chapter="iii"] .risks-panel p { color: var(--text-body) !important; }
.treat-main .treat-section[data-chapter="iii"] .risks-eyebrow { color: var(--gold-dark) !important; }
.treat-main .treat-section[data-chapter="iii"] .risks-mark { color: var(--gold-dark) !important; }

/* FAQ (iv): give the white accordion rows definition on the white box,
   and a clean open/hover state. */
.treat-main .treat-section[data-chapter="iv"] .faq-item {
    border: 1px solid rgba(201, 169, 110, 0.28) !important;
    box-shadow: 0 10px 22px -18px rgba(12, 24, 41, 0.45) !important;
}
.treat-main .treat-section[data-chapter="iv"] .faq-item[open] { border-color: var(--gold) !important; }
.treat-main .treat-section[data-chapter="iv"] .faq-list { gap: 0.55rem !important; }

/* FAQ typography: a deliberate pairing — elegant serif question (lighter
   weight) over clean Inter body answer, matching the rest of the page. */
.treat-main .treat-section[data-chapter="iv"] .faq-q {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
    color: var(--navy) !important;
}
/* Answer matches the page body copy exactly (e.g. the "An ankle fusion…"
   plain-English paragraph): Inter 1.05rem / 1.8. */
.treat-main .treat-section[data-chapter="iv"] .faq-a p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    color: var(--text-body) !important;
}

/* A touch more air between the four boxes so each reads as its own. */
.treat-main { gap: 2.7rem !important; }

/* Chapter nav + "Find out more" sidebar now live in the shared rail.css
   (dark theme, applied to both treatment and condition pages). */