/* Cinematic record detail pages (vehicles / weapons / items).
   Full-bleed hero + sticky spec panel + scroll reveals. Pairs with the
   animated effect-stats / stat-meters partials. */

/* ---------- Hero ---------- */
.rec-hero{position:relative;min-height:clamp(380px,56vh,600px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink-raised);isolation:isolate}
.rec-hero__bg{position:absolute;inset:0;z-index:0;animation:recHeroIn 1.3s cubic-bezier(.16,1,.3,1) both}
.rec-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.rec-hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top,var(--ink) 0%,rgba(23,14,33,.85) 34%,rgba(23,14,33,.45) 58%,rgba(23,14,33,.2) 78%,rgba(23,14,33,.5) 100%)}
.rec-hero--plain{min-height:clamp(220px,30vh,320px);
  background:radial-gradient(130% 150% at 18% -10%,#31203f,var(--ink))}
.rec-hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(22px,4vw,54px) clamp(16px,3vw,24px)}
.rec-hero .crumbs{margin-bottom:14px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.rec-hero .crumbs a{color:var(--paper)}
.rec-hero .crumbs [aria-current]{color:var(--paper);opacity:.8}
.rec-eyebrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.rec-title{font-size:clamp(2.4rem,7vw,5rem);line-height:.9;margin:0 0 12px;letter-spacing:.005em;
  text-shadow:0 2px 5px rgba(0,0,0,.6),0 6px 26px rgba(0,0,0,.55)}
.rec-sub{font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.5;color:var(--paper);max-width:62ch;
  margin:0 0 22px;font-weight:600}
.rec-hero .progress-actions{margin:0}

/* ---------- Body layout ---------- */
.rec-body{padding-top:clamp(36px,4.5vw,64px)}
.rec-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.5vw,44px)}
@media (min-width:920px){ .rec-grid{grid-template-columns:minmax(0,1fr) 358px;align-items:start} }
.rec-main{min-width:0}
.rec-side{display:flex;flex-direction:column;gap:18px}
@media (min-width:920px){ .rec-side{position:sticky;top:calc(var(--header-h) + 18px)} }

/* No gallery → skip the side-rail (which leaves a void) and centre everything:
   description on top, then spec + details as a compact row below. */
.rec-grid--solo{max-width:900px;margin-inline:auto}
@media (min-width:920px){ .rec-grid--solo{grid-template-columns:1fr} }
.rec-grid--solo .rec-side{position:static;top:auto}
@media (min-width:620px){
  .rec-grid--solo .rec-side{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
}

.rec-card{background:var(--ink-raised);border:1px solid var(--hairline);border-radius:16px;
  padding:20px 22px;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.rec-card .effblock,.rec-card .smblock{margin-top:0}
.rec-card .effnote,.rec-card .smnote{margin-top:14px}

/* ---------- Spec list (facts) ---------- */
.rec-eyebrow-h{display:block;font:800 12px/1 'Manrope',system-ui,sans-serif;color:var(--sun-gold);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.rec-spec{display:flex;flex-direction:column}
.rec-spec__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--hairline)}
.rec-spec__row:last-child{border-bottom:0}
.rec-spec__k{color:var(--text-quiet-dark);font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;flex-shrink:0}
.rec-spec__v{color:var(--paper);font-weight:700;text-align:right}

/* ---------- Gallery ---------- */
.rec-gallery{margin-top:clamp(26px,3.5vw,40px)}
/* Adaptive: a lone image (e.g. the hero shown in full) stretches to fill,
   rather than sitting tiny in a fixed 3-col grid. */
.rec-gallery .gallery{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
/* Product/vehicle shots vary in aspect — show each in FULL (natural ratio),
   don't crop/zoom to a fixed 3:2 box. */
.rec-gallery .gitem{aspect-ratio:auto;background:var(--ink-raised)}
.rec-gallery .gitem img{height:auto;object-fit:contain}
.rec-gallery .gitem:hover img{transform:none}

/* ---------- Scroll reveal ---------- */
.rec-rev{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.rec-rev.is-in{opacity:1;transform:none}

@keyframes recHeroIn{from{transform:scale(1.07)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .rec-hero__bg{animation:none}
  .rec-rev{opacity:1;transform:none;transition:none}
}