/* ============================================================
   RAINCITY — Editorial Index site chrome & components
   Loaded after brand.css on every page of Direction A site.
   ============================================================ */

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav__in { display:flex; align-items:center; justify-content:space-between; height:76px; }
.nav__links { display:flex; gap:30px; align-items:center; }
.nav__links a { font-size:14.5px; font-weight:500; color:var(--ink-3); position:relative; padding:4px 0; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--green); transition:width .22s ease; }
.nav__links a:hover, .nav__links a.is-active { color:var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after { width:100%; }
.nav__cta { display:flex; align-items:center; gap:18px; }
.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.burger span { width:24px; height:2px; background:var(--ink); display:block; }
@media (max-width: 920px){
  .nav__links{ position:absolute; top:76px; left:0; right:0; background:#fff; flex-direction:column; align-items:flex-start; padding:18px 28px; gap:6px; border-bottom:1px solid var(--line); display:none; }
  .nav__links.open{ display:flex; }
  .nav__links a{ font-size:18px; padding:10px 0; width:100%; }
  .burger{ display:flex; }
}

/* ---------- NAV DROPDOWNS ---------- */
.nav__item { position:relative; display:inline-flex; align-items:center; }
.nav__trigger { display:inline-flex; align-items:center; gap:6px; }
.dd-caret { font-size:9px; line-height:1; transition:transform .2s ease; opacity:.65; }
.nav__item.has-dd:hover .dd-caret, .nav__item.has-dd:focus-within .dd-caret { transform:rotate(180deg); }
.dropdown { position:absolute; top:100%; left:0; margin-top:16px; min-width:252px; background:#fff; border:1px solid var(--line); box-shadow:0 20px 44px rgba(0,0,0,0.13); padding:8px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:60; }
.dropdown::before { content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav__item.has-dd:hover .dropdown, .nav__item.has-dd:focus-within .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a { padding:11px 14px; font-size:14px; font-weight:500; color:var(--ink-3); border-radius:4px; white-space:nowrap; }
.dropdown a::after { display:none !important; }
.dropdown a:hover { background:var(--paper-2); color:var(--ink); }
@media (max-width:920px){
  .nav__item { display:flex; flex-direction:column; align-items:flex-start; width:100%; }
  .nav__trigger { width:100%; }
  .dd-caret { display:none; }
  .dropdown { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; margin-top:0; padding:0 0 6px 16px; min-width:0; }
  .dropdown::before { display:none; }
  .dropdown a { padding:8px 0; font-size:15px; color:var(--muted); }
}

/* ---------- PAGE HERO (subpage) ---------- */
.pagehero { position:relative; min-height: clamp(380px, 56vh, 600px); display:flex; align-items:flex-end; }
.pagehero .ph { position:absolute; inset:0; }
.pagehero__scrim { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.7) 100%); }
.pagehero__in { position:relative; width:100%; color:#fff; padding: 120px 0 clamp(34px,5vw,60px); }
.pagehero .kicker { color:var(--green); }
.pagehero .kicker::before { background:var(--green); }
.pagehero h1 { color:#fff; font-size: clamp(54px, 13vw, 200px); font-weight:900; letter-spacing:-0.035em; line-height:.86; margin-top:22px; }
.pagehero__sub { max-width:520px; font-size:18px; color:rgba(255,255,255,0.86); margin-top:24px; }

/* breadcrumb */
.crumb { font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color: rgba(255,255,255,0.6); display:flex; gap:10px; align-items:center; }
.crumb a:hover { color: var(--green); }
.crumb span { opacity:.5; }

/* ---------- section scaffolding ---------- */
.pad { padding: clamp(64px, 10vw, 130px) 0; }
section { scroll-margin-top: 80px; }
.secthead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom: 12px; }
.secthead h2 { font-size: clamp(32px,5vw,64px); }
.lead-meta { font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.divider { height:1px; background:var(--line); border:0; margin:0; }

/* ---------- PROGRAM DETAIL BLOCK ---------- */
.prog { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items:start; padding: clamp(56px,7vw,96px) 0; border-top:1px solid var(--line); }
.prog:nth-child(even) .prog__media { order:-1; }
@media (max-width: 880px){ .prog{ grid-template-columns:1fr; gap:32px; } .prog:nth-child(even) .prog__media{ order:0; } }
.prog__media { position:sticky; top:96px; }
.prog__media .ph { aspect-ratio: 4/5; }
@media (max-width: 880px){ .prog__media{ position:static; } .prog__media .ph{ aspect-ratio:16/11; } }
.prog__tag { font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--green-deep); }
.prog h2 { font-size: clamp(32px,4.6vw,60px); margin:14px 0 20px; }
.prog__intro { font-size:18px; color:var(--ink-3); }
.prog__list { list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:14px; }
.prog__list li { display:grid; grid-template-columns: 130px 1fr; gap:16px; font-size:15.5px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.prog__list b { font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); padding-top:2px; }
.prog__list span { color:var(--ink-3); }
@media (max-width:520px){ .prog__list li{ grid-template-columns:1fr; gap:4px; } }

/* ---------- ACCORDION (schedules / FAQ) ---------- */
.acc { border-top:1px solid var(--ink); margin-top:32px; }
.acc__item { border-bottom:1px solid var(--line-2); }
.acc__head { width:100%; background:none; border:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; text-align:left; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size: clamp(17px,2.2vw,24px); letter-spacing:-0.01em; color:var(--ink); transition:color .2s; }
.acc__head:hover { color: var(--green-deep); }
.acc__sign { flex:none; width:26px; height:26px; position:relative; }
.acc__sign::before, .acc__sign::after { content:""; position:absolute; background:var(--ink); transition:transform .25s ease, background .2s; }
.acc__sign::before { left:0; top:12px; width:26px; height:2px; }
.acc__sign::after { left:12px; top:0; width:2px; height:26px; }
.acc__item.open .acc__sign::after { transform: scaleY(0); }
.acc__item.open .acc__head { color: var(--green-deep); }
.acc__item.open .acc__sign::before, .acc__item.open .acc__sign::after { background: var(--green-deep); }
.acc__body { max-height:0; overflow:hidden; transition: max-height .35s ease; }
.acc__inner { padding: 0 0 26px; color:var(--ink-3); font-size:15.5px; }
.acc__inner .slot { display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-bottom:1px dashed var(--line); }
.acc__inner .slot:last-child { border-bottom:0; }
.acc__inner .slot b { color:var(--ink); font-weight:600; }
.acc__inner .slot span { font-family:var(--mono); font-size:13px; color:var(--muted); }

/* ---------- JOIN CARDS (dark) ---------- */
.join { background: var(--ink); color:#fff; }
.join .kicker { color: var(--green); }
.join h2 { color:#fff; }
.jcards { display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--ink-3); border:1px solid var(--ink-3); margin-top:48px; }
@media (max-width: 860px){ .jcards{ grid-template-columns:1fr; } }
.jcard { background:var(--ink); padding:38px 32px 32px; display:flex; flex-direction:column; min-height:320px; transition:background .25s; }
.jcard:hover { background:var(--ink-2); }
.jcard__no { font-family:var(--mono); font-size:13px; color:var(--green); letter-spacing:0.1em; }
.jcard h3 { font-size:25px; margin-top:24px; color:#fff; }
.jcard p { font-size:15px; color:rgba(255,255,255,0.66); margin-top:14px; }
.jcard .btn { margin-top:auto; }

/* ---------- PRICING TIERS ---------- */
.ptiers { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width: 860px){ .ptiers{ grid-template-columns:1fr; } }
.ptier { border:1px solid var(--line-2); padding:34px 30px; display:flex; flex-direction:column; transition:border-color .2s, transform .2s; }
.ptier:hover { border-color:var(--ink); transform:translateY(-4px); }
.ptier--feat { background:var(--ink); color:#fff; border-color:var(--ink); }
.ptier--feat .ptier__price, .ptier--feat h3 { color:#fff; }
.ptier__tag { font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.ptier--feat .ptier__tag { color:var(--green); }
.ptier h3 { font-size:22px; margin-top:6px; }
.ptier__price { font-family:var(--display); font-weight:800; font-size:48px; letter-spacing:-0.02em; margin-top:22px; line-height:1; }
.ptier__price small { font-family:var(--body); font-weight:500; font-size:15px; color:var(--muted); text-transform:none; letter-spacing:0; }
.ptier--feat .ptier__price small { color: rgba(255,255,255,0.6); }
.ptier ul { list-style:none; padding:0; margin:24px 0 30px; display:flex; flex-direction:column; gap:11px; font-size:15px; }
.ptier li { display:flex; gap:10px; color:inherit; }
.ptier li::before { content:"—"; color:var(--green-deep); }
.ptier--feat li::before { color:var(--green); }
.ptier .btn { margin-top:auto; }

/* ---------- BIG CTA ---------- */
.cta { background: var(--green); color: var(--ink); text-align:center; }
.cta h2 { font-size: clamp(40px, 8vw, 116px); font-weight:900; letter-spacing:-0.03em; }
.cta p { max-width:520px; margin:22px auto 34px; font-size:18px; color:var(--green-ink); }

/* ---------- FOOTER ---------- */
footer { background: var(--ink); color: rgba(255,255,255,0.7); padding: 72px 0 40px; }
.fgrid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; }
@media (max-width: 860px){ .fgrid{ grid-template-columns: 1fr 1fr; gap:32px; } }
footer h4 { color:#fff; font-size:13px; letter-spacing:0.14em; font-family:var(--mono); font-weight:500; margin-bottom:18px; }
footer a { display:block; padding:5px 0; font-size:15px; color: rgba(255,255,255,0.7); overflow-wrap:anywhere; }
footer a:hover { color: var(--green); }
.fbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:56px; padding-top:24px; border-top:1px solid var(--ink-3); font-size:13px; font-family:var(--mono); letter-spacing:0.06em; }

/* ---------- generic two-col intro ---------- */
.eyebrow-grid { display:grid; grid-template-columns: 0.8fr 2.2fr; gap: clamp(28px,5vw,72px); }
@media (max-width: 860px){ .eyebrow-grid{ grid-template-columns:1fr; gap:28px; } }
.statement { font-family:var(--display); font-weight:700; text-transform:none; font-size: clamp(26px, 3.4vw, 46px); line-height:1.08; letter-spacing:-0.02em; }
.statement em { font-style:normal; color: var(--green-deep); }