/* Article Plus: shared components for rebuilt articles.
   Video hero + chapter buttons, answer box, labeled plates, scroll-in charts,
   3D tour card, inline POTS Roadmap offer, takeaways, visible FAQ, sources.
   Pages opt in with <body class="ap"> and /js/article-plus.js. */

/* Header is sticky and .site-banner is in flow, so the stock 160px hero padding is dead space */
.ap .article-hero { padding: 56px 0 18px; }
.ap .article-meta { padding: 10px 0 20px; margin-bottom: 24px; }
.ap .article-meta .category { margin-bottom: 6px; }
.ap .article-meta .updated { display: block; font-size: 13px; font-weight: 500; color: #777; margin-top: 4px; }

/* Video chapters */
.ap-chapters { margin: -22px 0 34px; }
.ap-chapters p { font-size: 12px !important; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #8a7240 !important; margin: 0 0 8px !important; }
.ap-chapter-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ap-chapter-row button { flex: none; border: 1px solid #e3d6b8; background: #fff; color: #1a1b1f; border-radius: 100px; padding: 8px 14px; font: 600 13px/1.2 'Montserrat', sans-serif; cursor: pointer; white-space: nowrap; }
.ap-chapter-row button span { color: #9a7b3c; font-weight: 500; margin-left: 6px; }
.ap-chapter-row button:hover, .ap-chapter-row button:focus-visible { background: #1a1b1f; color: #fff; border-color: #1a1b1f; }
.ap-chapter-row button:hover span { color: #e4be74; }

/* Answer box under the video */
.ap-answer { background: #fafaf7; border: 1px solid #e8e2d4; border-radius: 14px; padding: 24px 26px 8px; margin: 0 0 40px; }
.article-content .ap-answer h2 { font-size: 20px; margin: 0 0 10px; }
.article-content .ap-answer p { font-size: 17px; line-height: 1.7; }

/* Figures and labeled anatomy plates (text-free plate + SVG labels on top) */
.ap-figure { margin: 34px 0 38px; }
.ap-figure figcaption { font-size: 14px; line-height: 1.6; color: #666; margin-top: 12px; }
.ap-src { font-size: 13px !important; color: #777 !important; line-height: 1.5 !important; }
.ap-plate { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #e8e2d4; background: #fafaf7; }
.ap-plate img { display: block; width: 100%; height: auto; }
.ap-plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ap-lab { font: 600 31px 'Montserrat', sans-serif; fill: #1a1b1f; }
.ap-lab.sm { font-size: 25px; font-weight: 500; fill: #555; }
.ap-lead { stroke: #8f7c55; stroke-width: 2; fill: none; }
.ap-dot { fill: #8f7c55; }

/* Panel for drawn SVG diagrams and charts */
.ap-panel { background: #fafaf7; border: 1px solid #e8e2d4; border-radius: 14px; padding: 16px 14px 10px; }
.ap-panel svg { width: 100%; height: auto; display: block; }
.ap-panel text { font-family: 'Montserrat', sans-serif; }
.ap-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 4px 4px; font-size: 13px; line-height: 1.4; color: #444; }
.ap-key span { display: inline-flex; align-items: center; gap: 8px; }
.ap-key i { flex: none; width: 18px; height: 4px; border-radius: 2px; display: inline-block; }

/* Pill toggle for interactive figures */
.ap-toggle { display: inline-flex; flex-wrap: wrap; border: 1px solid #1a1b1f; border-radius: 100px; overflow: hidden; margin: 0 0 14px; }
.ap-toggle button { border: 0; background: #fff; padding: 10px 16px; font: 600 14px/1.2 'Montserrat', sans-serif; cursor: pointer; color: #1a1b1f; }
.ap-toggle button[aria-pressed="true"] { background: #1a1b1f; color: #fff; }
.ap-cap { font-size: 15px !important; line-height: 1.6 !important; color: #444 !important; min-height: 50px; margin-top: 12px !important; }

/* Scroll-in animation. Gated on .ap-js (set by article-plus.js) so no-JS readers see the finished chart */
.ap-js .ap-anim .draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 2.2s ease-out; }
.ap-js .ap-anim.in .draw { stroke-dashoffset: 0; }
.ap-js .ap-anim .grow { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1.2s ease-out .4s; }
.ap-js .ap-anim.in .grow { transform: scaleY(1); }
.ap-js .ap-anim .fade { opacity: 0; transition: opacity .6s ease 1.6s; }
.ap-js .ap-anim.in .fade { opacity: 1; }
.ap-flow { fill: none; stroke-linecap: round; stroke-dasharray: 7 15; animation: apflow 1.8s linear infinite; }
.ap-flow.off { animation: none; stroke-dasharray: 3 9; opacity: .3; }
@keyframes apflow { to { stroke-dashoffset: -44; } }

/* 3D tour card (reuses .tour-door-media and .tc-tour from nav.css) */
.ap-tour { border: 1px solid #e8e2d4; border-radius: 16px; overflow: hidden; background: #fff; margin: 34px 0 40px; box-shadow: 0 18px 44px rgba(20,24,34,.08); }
.ap-tour .tour-door-media { border-radius: 0; box-shadow: none; }
.ap-tour-body { padding: 22px 24px 24px; }
.article-content .ap-tour-body h3 { margin: 0 0 8px; font-size: 22px; }
.article-content .ap-tour-body p { font-size: 16px; line-height: 1.7; margin: 0 0 18px; }
.article-content .ap-tour-body a.tc-tour { color: #1a1a1a; text-decoration: none; }
.article-content .ap-tour-body a.tc-tour:hover { color: #fff; }
.article-content .ap-tour-body .ap-cases { font-size: 15px; margin: 18px 0 0; color: #555; }

/* Inline POTS Roadmap offer */
.ap-roadmap { display: flex; gap: 18px; align-items: center; background: #1a1b1f; color: #fff; border-radius: 14px; padding: 22px 24px; margin: 30px 0 36px; }
.article-content .ap-roadmap p { color: #e9e6df; font-size: 16px; line-height: 1.6; margin: 0; flex: 1; }
.article-content .ap-roadmap p strong { color: #fff; }
.article-content .ap-roadmap a { flex: none; background: #e4be74; color: #1a1a1a; text-decoration: none; border-radius: 100px; padding: 14px 22px; font: 600 12px/1.2 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.article-content .ap-roadmap a:hover { background: #fff; }

/* Takeaways, FAQ, related, sources */
.ap-takeaways { border: 1px solid #e8e2d4; border-left: 4px solid #c9a55f; border-radius: 0 12px 12px 0; padding: 20px 22px 6px; margin: 40px 0; background: #fffdf8; }
.article-content .ap-takeaways h2 { font-size: 20px; margin: 0 0 12px; }
.article-content .ap-takeaways li { font-size: 16px; }
.ap-faq details { border-bottom: 1px solid #e6e0d2; }
.ap-faq summary { list-style: none; cursor: pointer; padding: 16px 34px 16px 0; position: relative; font: 600 17px/1.45 'Montserrat', sans-serif; color: #1a1b1f; }
.ap-faq summary::-webkit-details-marker { display: none; }
.ap-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; font-weight: 400; color: #9a7b3c; }
.ap-faq details[open] summary::after { content: "\2212"; }
.article-content .ap-faq details p { font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
.ap-sources ol { margin: 10px 0 0 20px; }
.article-content .ap-sources li { font-size: 14px; line-height: 1.6; color: #555; margin-bottom: 8px; word-break: break-word; }
.ap-related { margin: 8px 0 0 20px !important; }
.article-content .ap-related li { font-size: 16px; }

/* End CTA. .article-content a (gold, underlined) was overriding .cta-button, leaving gold text on a gold pill
   that wrapped to 3 lines on phones; the arrow PNG is gold, so the pill is dark */
.article-content .article-cta .cta-button { background: #1a1b1f; color: #fff; text-decoration: none; white-space: nowrap; justify-content: center; }
.article-content .article-cta .cta-button:hover { background: #e4be74; color: #1a1a1a; }
.article-content .article-cta .cta-button img { width: 44px; height: auto; display: block; }
.article-content .article-cta .cta-sub a { color: #8a6a1e; }

@media (max-width: 760px) {
    .ap .article-hero { padding: 26px 0 8px; }
    .ap .article-hero h1 { font-size: 28px; }
    .ap .article-hero .hero-description { font-size: 15.5px; line-height: 1.6; }
    .ap .article-section { padding-top: 6px; }
    .ap .article-meta { padding: 4px 0 14px; margin-bottom: 16px; }
    .ap .article-meta .author { font-size: 15px; margin: 0; }
    .ap-plate.bleed { margin-left: -20px; margin-right: -20px; border-radius: 0; border-left: 0; border-right: 0; }
    .ap-panel.bleed { margin-left: -20px; margin-right: -20px; border-radius: 0; border-left: 0; border-right: 0; }
    .ap-roadmap { flex-direction: column; align-items: stretch; text-align: left; }
    .ap-tour-body { padding: 18px 18px 20px; }
    .ap-tour-body .tc-tour { width: 100%; }
    .article-content .article-cta .cta-button { padding: 15px 22px; font-size: 13px; letter-spacing: 1.2px; }
    .article-content .article-cta .cta-button img { width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .ap-flow { animation: none; }
    .ap-js .ap-anim .draw { transition: none; stroke-dashoffset: 0; }
    .ap-js .ap-anim .grow { transition: none; transform: none; }
    .ap-js .ap-anim .fade { transition: none; opacity: 1; }
}