/* =============================================================================
   Classes page — art direction (WP-20c: operator-canonical Claude-Design v2,
   Opanije-Classes-v2.dc.html). Warm Heritage-Gold identity, editorial rhythm,
   woodcut/contas/straw motifs. Own stack — no camp-final/Bootstrap dependency
   (SD-26 own frontend, SD-20 self-hosted fonts). Layout-critical helpers +
   textures live here; one-off styling stays inline in page-templates/classes.php.

   SD-QB-A11Y: the primary gold token #B7780D fails AA as text, so the primary
   CTA fill (.op-pill--gold) uses the gold-accessible deep gold and small gold
   text uses #7a5c11; decorative gold keeps #B7780D.
   ============================================================================= */

.classes-page {
    --sys-color-ink: #231F19;
    --sys-color-ink-deep: #15120D;
    --sys-color-cream: #F4EEE1;
    --sys-color-cream-2: #EDE4D2;
    --sys-color-primary: #B7780D;               /* decorative fills/borders only */
    --sys-color-cta-gold: #9c6408;           /* AA-safe deep gold behind white CTA text (SD-QB-A11Y, ~4.9:1) */
    --sys-color-gold-a11y-text: #70633C; /* gold text on light (AA) */
    --sys-color-primary-light: #E0A92B;
    --sys-color-gold-bright: #EBC65A;
    --sys-color-gold-deep: #7a5c11;          /* small gold text on light (AA) */
    --sys-color-terra: #9a3b1f;
    /* fractal-noise paper grain, used tone-on-tone over photos/bands */
    --sys-texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* screen-reader-only (self-contained; no Bootstrap dependency) */
.classes-page .visually-hidden {
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* anchor jumps clear the fixed/transparent header */
.classes-page section[id] { scroll-margin-top: 84px; }

/* ---- texture layers (absolute, inside position:relative parents) ---- */
.op-grain-layer { position:absolute; inset:0; background-image:var(--sys-texture-grain); background-size:180px; mix-blend-mode:overlay; opacity:.5; pointer-events:none; }
.op-dots-gold { position:absolute; inset:0; background-image:radial-gradient(#EBC65A 1.2px, transparent 1.5px); background-size:10px 10px; mix-blend-mode:soft-light; opacity:.5; pointer-events:none; }
.op-dots-cream { position:absolute; inset:0; background-image:radial-gradient(#fff 1.1px, transparent 1.4px); background-size:11px 11px; mix-blend-mode:soft-light; opacity:.4; pointer-events:none; }
.op-straw { position:absolute; inset:0; background:repeating-linear-gradient(91deg, rgba(212,160,40,.10) 0 2px, transparent 2px 7px), repeating-linear-gradient(86deg, rgba(0,0,0,.45) 0 1px, transparent 1px 8px); pointer-events:none; }

/* ---- giant faint section number ---- */
.op-bignum { position:absolute; right:18px; top:-34px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(120px,18vw,260px); line-height:1; color:rgba(154,77,18,.08); z-index:0; user-select:none; pointer-events:none; }

/* ---- numbered section header ---- */
.op-secnum { font-family:'Montserrat',sans-serif; font-weight:800; font-size:46px; line-height:.8; }
.op-eyebrow { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }

/* ---- card lift ---- */
.op-lift { transition:transform .2s ease, box-shadow .2s ease; }
.op-lift:hover { transform:translateY(-5px); box-shadow:0 22px 48px rgba(43,40,35,.18); }

/* ---- vertical rhythm rail (hero) ---- */
.op-rail { position:absolute; left:40px; top:128px; bottom:36px; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.op-rail__label { writing-mode:vertical-rl; transform:rotate(180deg); font-family:'Montserrat',sans-serif; font-weight:800; font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--sys-color-primary-light); }
.op-rail__bars { display:flex; flex-direction:column; gap:5px; align-items:center; }
.op-rail__bars span { width:3px; height:18px; background:var(--sys-color-primary); border-radius:2px; opacity:.6; }

/* ---- contas (Orixá bead) ring around master portraits ---- */
.op-contas-ring { position:absolute; inset:-8px; border-radius:50%; background:conic-gradient(#B7780D 0 12.5%, #EBC65A 0 25%, #6f562f 0 37.5%, #7a5c11 0 50%, #B7780D 0 62.5%, #EBC65A 0 75%, #6f562f 0 87.5%, #7a5c11 0); }

/* ---- woodcut icon badge (offering cards) ---- */
.op-icon-badge { position:absolute; left:18px; bottom:-26px; width:62px; height:62px; border:1.5px solid rgba(35,31,25,.16); border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ---- focus-visible on the conversion path ---- */
.classes-page .op-pill:focus-visible { outline:3px solid #D8A81B; outline-offset:3px; }
.classes-page .op-band-dark .op-pill:focus-visible,
.classes-page .op-sticky-cta .op-pill:focus-visible { outline-color:#fff; }

/* ---- pill button primitives (match the site's rounded gold pills) ---- */
.op-pill { display:inline-flex; align-items:center; gap:10px; border-radius:9999px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:14.5px; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.op-pill--gold { background:var(--sys-color-cta-gold); color:#fff; border:none; padding:15px 28px; box-shadow:0 10px 24px rgba(43,40,35,.18); }
.op-pill--gold:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(43,40,35,.24); color:#fff; }
.op-pill--ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); padding:13px 26px; }
.op-pill--ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.op-pill--ink { background:var(--sys-color-ink); color:#fff; border:none; padding:14px 26px; box-shadow:0 10px 24px rgba(43,40,35,.18); }
.op-pill--ink:hover { transform:translateY(-2px); color:#fff; }
.op-pill--outline-ink { background:transparent; color:var(--sys-color-ink); border:1.5px solid rgba(35,31,25,.22); padding:13px 24px; }
.op-pill--outline-ink:hover { background:var(--sys-color-ink); color:#fff; }
.op-pill--cream { background:var(--sys-color-cream); color:var(--sys-color-ink); border:none; padding:13px 22px; box-shadow:0 10px 24px rgba(43,40,35,.18); }
.op-pill--cream:hover { transform:translateY(-2px); color:var(--sys-color-ink); }

/* ---- FAQ: native <details> accordion (keyboard-operable; no Bootstrap) ---- */
.op-faq { border-top:3px solid var(--sys-color-ink); }
.op-faq details { border-bottom:2px solid rgba(35,31,25,.16); background:transparent; }
.op-faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:20px 6px; }
.op-faq summary::-webkit-details-marker { display:none; }
.op-faq summary:focus-visible { outline:3px solid #D8A81B; outline-offset:-2px; }
.op-faq__num { font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.4rem; color:#9a4d12; flex-shrink:0; min-width:38px; }
.op-faq__q { flex:1; font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(1rem,2.4vw,1.1rem); color:var(--sys-color-ink); text-transform:uppercase; letter-spacing:.01em; }
.op-faq summary::after { content:""; flex-shrink:0; width:12px; height:12px; margin-left:6px; border-right:2.6px solid var(--sys-color-ink); border-bottom:2.6px solid var(--sys-color-ink); transform:rotate(45deg); transition:transform .2s ease; }
.op-faq details[open] summary::after { transform:rotate(-135deg); }
.op-faq__a { padding:0 6px 22px 54px; font-family:'Lato',sans-serif; font-size:1rem; line-height:1.62; color:#544c3e; }

/* ---- video modal: native <dialog> (ESC/focus-trap native; no Bootstrap) ---- */
.op-modal { border:none; padding:0; background:transparent; max-width:min(920px,92vw); width:100%; }
.op-modal::backdrop { background:rgba(13,12,8,.82); }
.op-modal__panel { position:relative; background:#15120D; border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.op-modal__video { position:relative; aspect-ratio:16/9; }
.op-modal__video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.op-modal__close { position:absolute; top:10px; right:10px; z-index:2; width:44px; height:44px; border-radius:50%; border:none; background:rgba(244,238,225,.15); color:#F4EEE1; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.op-modal__close:hover { background:rgba(244,238,225,.3); }
.op-modal__close:focus-visible { outline:3px solid #D8A81B; outline-offset:2px; }

/* ---- single sticky booking bar (WhatsApp-first) ---- */
.op-sticky-cta {
    position:fixed; left:0; right:0; bottom:0; z-index:900;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background:var(--sys-color-ink-deep); border-top:1px solid rgba(235,198,90,.25);
    box-shadow:0 -8px 30px rgba(0,0,0,.3);
    transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.op-sticky-cta.is-visible { transform:translateY(0); }
.op-sticky-cta__cue { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.op-sticky-cta__label { font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--sys-color-gold-bright); }
.op-sticky-cta__value { font-family:'Lato',sans-serif; font-size:13px; color:rgba(244,238,225,.8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- reveal-on-scroll (progressive enhancement; visible by default) ---- */
.op-reveal { opacity:1; }
.js .classes-page .op-reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .classes-page .op-reveal.is-in { opacity:1; transform:none; }

/* =============================== responsive =============================== */
@media (max-width:900px) {
    .op-rail { display:none; }
    .classes-page .op-hero__content { padding-left:24px !important; padding-right:24px !important; padding-top:96px !important; }
    .classes-page .op-grid-2,
    .classes-page .op-grid-3,
    .classes-page .op-lead-grid,
    .classes-page .op-masters-grid { grid-template-columns:1fr !important; }
    .classes-page .op-offer-card { margin-top:0 !important; }
    .classes-page .op-master-card { margin-top:0 !important; }
    .classes-page .op-lead-portrait { width:100% !important; max-width:430px; margin:0 auto; }
    .classes-page .op-cities-grid { grid-template-columns:1fr !important; }
}

@media (max-width:600px) {
    .classes-page .op-hero h1 { font-size:40px !important; }
    .classes-page .op-section-pad { padding-left:22px !important; padding-right:22px !important; }
    .op-sticky-cta__value { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    .op-lift, .op-pill, .op-sticky-cta, .js .classes-page .op-reveal, .op-faq summary::after { transition:none; }
    .js .classes-page .op-reveal { opacity:1; transform:none; }
}