/* Re-org pages, design round 3 (2 Nov 2026, drafted on /coquitlam-renovations-preview; on the four live re-org pages from 3 Nov). Naous: "can we add some more visuals, our rsvp page was very nice
   in terms of layout and visuals ... can we update our completed reorgs with a collage of images, diagonally split etc for the
   hero section". Patterns from the Sweet 16 RSVP page (sweet16-page.css): photo hero with chips, orange ticker, photo bento with
   captions, dark band with paired photos. Prefixed rc- so the site sheets cannot collide. live.css and production-final.css force
   p and heading colours with !important, so text colours here carry !important; verified with getComputedStyle. */

/* ---------- Hero: club photos split diagonally ---------- */
.rc-hero{position:relative;min-height:min(calc(100svh - 120px),780px);display:flex;align-items:center;overflow:hidden;background:#0e0e0e;isolation:isolate}
.rc-panels{position:absolute;top:0;bottom:0;left:41%;right:-10%;display:flex;z-index:-2}
.rc-p{position:relative;flex:1 1 0;overflow:hidden;transform:skewX(-12deg);border-left:7px solid #f78f1e;background:#1a1a1a}
.rc-p img{position:absolute;top:0;bottom:0;left:-35%;width:170%;max-width:none!important;height:100%;object-fit:cover;transform:skewX(12deg)}
.rc-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(14,14,14,1) 0%,rgba(14,14,14,.92) 34%,rgba(14,14,14,.35) 46%,rgba(14,14,14,0) 56%),linear-gradient(0deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 30%)}
.rc-hero-in{width:100%;max-width:1240px;margin:0 auto;padding:96px 48px 84px}
.rc-hero-copy{max-width:560px}
.rc-eyebrow{display:flex;align-items:center;gap:12px;font:500 12.5px 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:#fff!important;margin-bottom:18px}
.rc-eyebrow::before{content:"";width:34px;height:2px;background:#f78f1e}
.rc-hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;text-transform:uppercase;color:#fff!important;font-size:clamp(3rem,6.2vw,5.6rem)!important;line-height:.92!important;letter-spacing:-.01em;margin:0 0 18px}
.rc-hero h1 span{display:block;color:#f78f1e!important}
.rc-sub{font:500 clamp(1.02rem,1.5vw,1.2rem)/1.5 Inter,sans-serif;color:rgba(255,255,255,.88)!important;max-width:34ch;margin:0 0 22px}
.rc-when{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.rc-when span{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);font:600 15px Inter,sans-serif;color:#fff!important}
.rc-when svg{width:17px;height:17px;color:#f78f1e;flex:none}
.rc-ctas{display:flex;flex-wrap:wrap;gap:12px}
.rc-pill{display:inline-flex;align-items:center;gap:9px;padding:16px 28px;border-radius:100px;background:#f78f1e;color:#0a0a0a!important;text-decoration:none;font:800 1.05rem 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 12px 30px -10px rgba(247,143,30,.7);transition:transform .2s ease,background .2s ease}
.rc-pill:hover{transform:translateY(-2px);background:#ffb54d}
.rc-pill.rc-ghost{background:rgba(255,255,255,.08);color:#fff!important;border:1.5px solid rgba(255,255,255,.5);box-shadow:none}
.rc-pill.rc-ghost:hover{background:#fff;color:#0a0a0a!important}

/* ---------- Ticker ---------- */
.rc-tick{background:#f78f1e;overflow:hidden;padding:15px 0;border-block:2px solid #0a0a0a}
.rc-tick-t{display:flex;width:max-content;gap:26px;align-items:center;animation:rcTick 40s linear infinite;font:900 clamp(22px,2.6vw,32px)/1 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;color:#0a0a0a}
.rc-tick-t span{color:#0a0a0a!important}
.rc-tick-t i{font-style:normal;font-size:.7em;color:#fff}
@keyframes rcTick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rc-tick-t{animation:none}}

/* ---------- Shared section bits ---------- */
.rc-wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.rc-sec{padding:clamp(64px,8vw,104px) 0}
.rc-head{max-width:760px;margin-bottom:30px}
.rc-kick{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:#6b6b6b!important}
.rc-h2{font-family:'Barlow Condensed',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(38px,4.6vw,64px)!important;line-height:.95!important;color:#0e0e0e!important;margin:10px 0 0}
.rc-h2 span{color:#f78f1e!important}
.rc-head p{margin-top:14px;font-size:16.5px;line-height:1.6;color:#55554f!important}

/* ---------- Before and after: dark band ---------- */
.rc-ba{position:relative;overflow:hidden;background:radial-gradient(70% 90% at 85% 10%,rgba(247,143,30,.26),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(140,198,62,.12),transparent 60%),#0a0a0a;padding:clamp(64px,8vw,104px) 0}
.rc-ba-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.rc-ba .rc-kick{color:rgba(255,255,255,.66)!important}
.rc-ba .rc-h2{color:#fff!important}
.rc-ba p{margin-top:14px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.8)!important}
.rc-ba-pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rc-ba-pics figure{position:relative;margin:0;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 70px -30px rgba(0,0,0,.9)}
.rc-ba-pics img{display:block;width:100%;aspect-ratio:7/5;object-fit:cover}
.rc-ba-pics figcaption{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:100px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;background:rgba(10,10,10,.75);color:#fff!important}
.rc-ba-pics figure:last-child figcaption{background:#f78f1e;color:#0a0a0a!important}

/* ---------- Photo bento ---------- */
.rc-bento{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;grid-template-rows:240px 240px;gap:14px}
.rc-b{position:relative;overflow:hidden;border-radius:24px;margin:0;display:flex;flex-direction:column;justify-content:flex-end;background:#111;color:#fff}
.rc-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.rc-b:hover img{transform:scale(1.04)}
.rc-b figcaption{position:relative;padding:60px 22px 20px;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);display:flex;flex-direction:column;gap:4px}
.rc-b b{font:800 clamp(24px,2.2vw,30px)/1 'Barlow Condensed',sans-serif;text-transform:uppercase;color:#fff!important}
.rc-b figcaption span{font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.88)!important}
.rc-tall{grid-row:span 2}
.rc-wide{grid-column:span 2}
.rc-b4{grid-column:4;grid-row:1 / span 2}
.rc-orange{background:#f78f1e;padding:26px 24px;justify-content:space-between;text-decoration:none}
.rc-orange b{color:#0a0a0a!important;font-size:clamp(30px,2.8vw,40px)}
.rc-orange span{font:500 15px/1.5 Inter,sans-serif;color:rgba(10,10,10,.85)!important}
.rc-orange em{font:800 15px Inter,sans-serif;font-style:normal;white-space:nowrap;color:#0a0a0a!important;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

@media (max-width:1023px){
  .rc-bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:200px}
  .rc-b4{grid-column:auto;grid-row:span 2;order:1}
  .rc-wide{order:2}
  .rc-ba-g{grid-template-columns:1fr}
}
@media (max-width:760px){
  .rc-hero{display:block;min-height:0}
  .rc-panels{position:relative;left:auto;right:auto;margin:0 -18%;max-width:none;height:clamp(240px,58vw,340px);z-index:0}
  .rc-shade{background:linear-gradient(0deg,rgba(14,14,14,1) 0%,rgba(14,14,14,0) 40%);top:0;bottom:auto;height:clamp(240px,58vw,340px);z-index:1}
  .rc-hero-in{position:relative;z-index:2;padding:6px 20px 44px;margin-top:-34px}
  .rc-wrap{padding:0 20px}
  .rc-when span{font-size:14px;padding:9px 13px}
  .rc-pill{padding:14px 22px;font-size:1rem}
  .rc-bento{grid-auto-rows:170px;gap:10px}
  .rc-b{border-radius:20px}
  .rc-b figcaption{padding:44px 16px 14px}
  .rc-ba-pics{gap:8px}
}

/* ---------- 3 Nov 2026, for the live pages ---------- */
/* Video hero: Maple Ridge keeps its video (Naous 2 Nov: "the video was for maple ridge, so we can keep that one there"),
   with the same copy block as the photo heroes. */
.rc-hero--video video{position:absolute;inset:0;width:100%;height:100%;max-width:none!important;object-fit:cover;z-index:-2}
.rc-hero--video .rc-shade{background:linear-gradient(90deg,rgba(14,14,14,.9) 0%,rgba(14,14,14,.66) 40%,rgba(14,14,14,.22) 72%,rgba(14,14,14,.1) 100%),linear-gradient(0deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,0) 34%)}
/* Two equipment columns where a club has no She's FIT! list on record (Abbotsford). */
.c-cols.c-cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Hero buttons that jump down the page; the nav is sticky. */
#whats-new,#clubs{scroll-margin-top:90px}
@media (max-width:960px){.c-cols.c-cols--2{grid-template-columns:1fr}}
@media (max-width:760px){
  .rc-hero--video{display:flex;align-items:flex-end;min-height:min(calc(100svh - 110px),640px)}
  .rc-hero--video .rc-shade{top:0;bottom:0;height:auto;background:linear-gradient(0deg,rgba(14,14,14,.94) 0%,rgba(14,14,14,.6) 55%,rgba(14,14,14,.38) 100%)}
  .rc-hero--video .rc-hero-in{margin-top:0;padding:110px 20px 40px}
}