/* Race gallery page (/gallery/) — ported from the "Nascar Racing Gallery" handover, 2026-09-12.
   Classes are namespaced rg-* because main.css loads site-wide and owns generic names
   like .hero/.grid. Shared site header + footer are reused, so the standalone page's own
   nav/footer/tri styles are intentionally dropped. Tokens come from main.css. */

  body.page-template-page-gallery{ background:var(--dark); color:var(--light); --soft:#9D9DA3 }

  /* ---- hero ---- */
  .rg-hero{ max-width:1440px; margin:0 auto; padding:clamp(40px,6vw,84px) var(--gutter) clamp(24px,4vw,40px); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:end }
  .rg-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--soft); display:flex; align-items:center; gap:14px; margin-bottom:22px }
  .rg-eyebrow::before{ content:""; width:28px; height:1px; background:var(--yellow) }
  .rg-hero h1{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:.92; font-size:clamp(40px,8vw,116px); margin:0; text-wrap:balance; color:#fff }
  .rg-hero h1 b{ color:var(--yellow); font-weight:700 }
  .rg-lede{ font-size:clamp(15px,1.3vw,18px); line-height:1.6; color:#CFCFD4; max-width:52ch; margin:0 0 26px }
  .rg-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12) }
  .rg-stat{ background:var(--dark); padding:18px 16px }
  .rg-stat .n{ font-family:var(--display); font-weight:700; font-size:clamp(24px,3vw,40px); line-height:1; color:#fff }
  .rg-stat .n span{ font-size:.5em }
  .rg-stat .l{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); margin-top:8px }

  /* ---- sticky filter bar (sits under the shared sticky nav) ---- */
  .rg-bar{ position:sticky; top:var(--rg-navh,72px); z-index:30; background:var(--dark); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08) }
  .rg-bar-in{ max-width:1440px; margin:0 auto; padding:12px var(--gutter); display:flex; align-items:center; gap:10px; overflow-x:auto; scrollbar-width:none }
  .rg-bar-in::-webkit-scrollbar{ display:none }
  .rg-chip{ flex:0 0 auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--light); background:none; border:1px solid rgba(255,255,255,.22); padding:9px 14px; cursor:pointer; border-radius:2px; display:flex; gap:8px; align-items:center; transition:border-color .15s,color .15s }
  .rg-chip i{ font-style:normal; color:var(--soft); font-size:9.5px }
  .rg-chip:hover{ border-color:var(--yellow); color:var(--yellow) }
  .rg-chip.on{ background:var(--yellow); border-color:var(--yellow); color:#111 }
  .rg-chip.on i{ color:rgba(17,17,17,.6) }
  .rg-count{ margin-left:auto; flex:0 0 auto; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); padding-left:14px }

  /* ---- grid ---- */
  .rg-grid{ max-width:1440px; margin:0 auto; padding:clamp(20px,3vw,40px) var(--gutter) clamp(64px,8vw,110px); display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:clamp(6px,1vw,14px); grid-auto-flow:dense }
  .rg-ph{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--dark-2); cursor:zoom-in; border:0; padding:0; display:block; width:100% }
  .rg-ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1) }
  .rg-ph:hover img{ transform:scale(1.04) }
  /* landscape originals (3:2) get a double-width tile so they are shown all but uncropped */
  .rg-ph.land{ grid-column:span 2; aspect-ratio:8/5 }
  /* portrait feature tile */
  .rg-ph.wide{ grid-column:span 2; grid-row:span 2; aspect-ratio:4/5 }
  /* landscape feature tile: 4 columns x 2 rows keeps the same 8:5 frame, just bigger */
  .rg-ph.land.wide{ grid-column:span 4; grid-row:span 2; aspect-ratio:8/5 }
  .rg-ph .tag{ position:absolute; left:10px; bottom:10px; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(11,11,13,.7); padding:5px 8px; opacity:0; transition:opacity .2s }
  .rg-ph:hover .tag,.rg-ph:focus-visible .tag{ opacity:1 }
  .rg-ph:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }
  .rg-ph.hide{ display:none }
  .rg-empty{ grid-column:1 / -1; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); padding:40px 0 }

  @media (max-width:820px){
    .rg-hero{ grid-template-columns:1fr }
    .rg-grid{ grid-template-columns:repeat(2,1fr) }
    .rg-ph.land{ grid-column:span 2 }
    .rg-ph.wide{ grid-column:span 2; grid-row:span 2 }
    .rg-ph.land.wide{ grid-column:span 2; grid-row:auto; aspect-ratio:8/5 }
  }

  /* ---- lightbox ---- */
  .rg-lb{ position:fixed; inset:0; z-index:140; background:rgba(6,6,8,.96); display:none; flex-direction:column }
  .rg-lb.open{ display:flex }
  .rg-lb-top{ display:flex; align-items:center; gap:16px; padding:14px var(--gutter); font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft) }
  .rg-lb-top .sp{ flex:1 }
  .rg-lb-btn{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--light); background:none; border:1px solid rgba(255,255,255,.25); padding:9px 14px; cursor:pointer; border-radius:2px; display:inline-flex; gap:8px; align-items:center; text-decoration:none }
  .rg-lb-btn:hover{ border-color:var(--yellow); color:var(--yellow) }
  .rg-lb-btn.primary{ background:var(--yellow); border-color:var(--yellow); color:#111 }
  .rg-lb-btn.primary:hover{ background:#fff; border-color:#fff; color:#111 }
  .rg-lb-stage{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; padding:0 clamp(56px,8vw,120px) 20px; min-height:0 }
  .rg-lb-stage img{ max-width:100%; max-height:100%; object-fit:contain; display:block; box-shadow:0 30px 80px rgba(0,0,0,.6) }
  .rg-arr{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:1px solid rgba(255,255,255,.25); background:rgba(11,11,13,.6); color:#fff; font-family:var(--display); font-size:22px; cursor:pointer; display:grid; place-items:center; border-radius:2px }
  .rg-arr:hover{ border-color:var(--yellow); color:var(--yellow) }
  .rg-arr.l{ left:clamp(10px,2vw,32px) } .rg-arr.r{ right:clamp(10px,2vw,32px) }
  .rg-lb-cap{ padding:0 var(--gutter) 22px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft) }
  .rg-lb-cap b{ color:#fff; font-weight:500 }
  @media (max-width:600px){
    .rg-lb-stage{ padding:0 8px 12px }
    .rg-arr{ width:42px; height:42px }
    .rg-lb-cap .hint{ display:none }
  }