/* ============================================================
   Lake Mirror Classic — LOCKED component specs
   Scanned from the finished Homepage A (Dark) and frozen here.
   Load AFTER tokens.css + site.css. Components are scoped to the
   same section ids used on the homepage (#about, #events, #sponsors,
   #register, #gallery) so they render pixel-identical.
   ============================================================ */

/* ---- HERO: title font differs from body display ---- */
/* Hero title is Helvetica 600 (NOT the Libre Baskerville display face). */
.lmc-hero-title { font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-weight: 600; }
.lmc-hero-eyebrow { font-size: 30px; color: rgb(212, 183, 101); }
.lmc-hero-dates { font-size: 40px; }

/* ---- STAT STRIP numerals: Libre Baskerville serif ---- */
.lmc-stat-num { font-family: "Libre Baskerville", Georgia, serif; }
.lmc-stat-label { font-size: 22px; letter-spacing: 1px; line-height: 1.2; }

/* ============================================================
   BEST IN SHOW CARDS  (#about)
   Overlay winner card: gold pill top-left, white title bottom-left.
   ============================================================ */
.bis-wide .bis-media { aspect-ratio: 7822 / 2683; }     /* full panorama, no crop */
#about .winner.bis-item { position: relative; }
#about .winner.bis-item .winner-tag { position: absolute; top: 1.1rem; left: 1.1rem; margin: 0; z-index: 3;
  font-size: 17px; letter-spacing: 1px; font-weight: 700; }
#about .winner.bis-item .winner-name { font-size: 32px; }

/* ============================================================
   EVENT (CAR REGISTRATION) CARDS  (#events)  — locked exactly
   ============================================================ */
#events .event-day { font-size: 19px; font-weight: 700; z-index: 3; }
#events .event-foot { margin-top: auto; }                 /* price/REGISTER pinned to bottom */
#events .event-when { font-size: 22px; }
#events .event-desc { color: rgb(255, 255, 255); font-size: 19px; }
#events .event-price { font-size: 19px; }
#events .event-price em { font-weight: 900; color: rgb(165, 169, 199); }
#events .btn-primary.btn-sm { font-weight: 900; }         /* gold REGISTER button */

/* ============================================================
   MISSION / CHARITY band  (#register)  — white surface
   ============================================================ */
#register.mission { background: #ffffff; border-top-color: rgba(0,0,0,0.06); border-bottom: none;
  padding-bottom: clamp(2rem, 4vw, 3.25rem); position: relative; }
#register.mission::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin-inline: auto;
  width: min(var(--container), calc(100% - 2 * var(--gutter))); height: 1px; background: rgba(20,24,48,0.12); }
#register .title { color: var(--near-black); }
#register .lead { color: var(--body-gray); }
#register .big-num { color: var(--french-blue); font-family: "Libre Baskerville", Georgia, serif; }
#register .big-num span { color: var(--slate); font-size: 19px; letter-spacing: 1px; }
#register .link-arrow { color: var(--gold-deep); font-size: 22px; }
#register .mission-thumb { width: 100%; max-width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--r-md); box-shadow: var(--shadow-md); margin-bottom: 1.4rem; }

/* ============================================================
   PARTNERS  (#sponsors)  — white, image-only three-tier pyramid
   ============================================================ */
#sponsors { background: #ffffff; padding-top: clamp(2rem, 4vw, 3.25rem); }
#sponsors .partner-stack { display: flex; flex-direction: column; gap: clamp(2rem, 4.5vw, 3.75rem); align-items: center; }
#sponsors .partner-row { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 5vw, 5rem); flex-wrap: wrap; width: 100%; }
#sponsors .partner-row img { width: auto; object-fit: contain; transition: transform .4s var(--ease), filter .4s var(--ease); }
#sponsors .partner-row img:hover { transform: scale(1.05); }
/* TIER SIZES — locked */
#sponsors .r1 img { max-height: 281px; max-width: 100%; }   /* 1st largest (presenting) */
#sponsors .r2 img { max-height: 130px; max-width: 40%; }    /* 2nd largest (two across) */
#sponsors .r2 img:first-child { max-height: 94px; }         /* Mecum runs smaller in row 2 */
#sponsors .r3 img { max-height: 96px; max-width: 28%; }     /* 3rd largest (three across) */

/* SPONSOR DIVIDERS — hairline gradient + centered gold diamond */
#sponsors .partner-divider { width: 100%; max-width: 760px; display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
#sponsors .partner-divider::before, #sponsors .partner-divider::after { content: ""; height: 1px; flex: 1; }
#sponsors .partner-divider::before { background: linear-gradient(90deg, transparent, rgba(20,24,48,0.16)); }
#sponsors .partner-divider::after { background: linear-gradient(90deg, rgba(20,24,48,0.16), transparent); }
#sponsors .partner-divider i { width: 7px; height: 7px; transform: rotate(45deg); border: 1.5px solid var(--gold); flex: none; }

/* ============================================================
   PARTNERS SCROLLING ELEMENT — auto-scroll + drag logo carousel
   Class-based (used in the Partners section AND the footer strip).
   JS drives motion: time-based, whole-pixel translate3d (crisp, no
   motion blur), ~50s per set, hover-pause, drag-to-scroll, and it
   re-measures after images load so the loop never jumps.
   ============================================================ */
.logo-carousel { width: min(1680px, 96vw); margin-inline: auto; margin-top: clamp(2.75rem, 5vw, 4.25rem);
  padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(20,24,48,0.10); overflow: hidden; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); touch-action: pan-y; }
.logo-carousel.dragging { cursor: grabbing; }
.logo-carousel img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.logo-carousel-track { display: flex; align-items: center; width: max-content; animation: lmc-logo-scroll 50s linear infinite; }
.logo-carousel:hover .logo-carousel-track { animation-play-state: paused; }
.logo-carousel-item { display: flex; align-items: center; flex: none; position: relative; }
.logo-carousel-item img { height: 74px; width: auto; object-fit: contain; margin: 0 clamp(2.2rem, 4vw, 3.75rem); }
/* per-logo height tuning so narrow/square marks read with equal weight */
.logo-carousel-item img[src*="amca"] { height: 150px; }
.logo-carousel-item img[src*="ocd-detailing"] { height: 160px; }
.logo-carousel-item img[src*="motor-vault"] { height: 118px; }
.logo-carousel-item img[src*="visit-central-fl"] { height: 92px; }
.logo-carousel-item img[src*="flacarshows"], .logo-carousel-item img[src*="col-logo"] { height: 118px; }
.logo-carousel-item img[src*="SunshineGrowers"], .logo-carousel-item img[src*="camp4"], .logo-carousel-item img[src*="jets_pizza"] { height: 100px; }
/* thin vertical divider between logos */
.logo-carousel-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 48px; background: rgba(20,24,48,0.14); }
@keyframes lmc-logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-carousel-track { animation: none; } }
/* "Web design by" Sozo credit cell — sits just after Passport Transport */
.logo-carousel-credit { flex-direction: column; gap: 7px; }
.logo-carousel-credit span { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #86868B; }
.logo-carousel-credit img { height: 64px !important; margin: 0 clamp(2.2rem, 4vw, 3.75rem) !important; }
/* Duplicate logo strip directly above the footer — white, minimal padding */
.logo-strip-footer { background: #ffffff; padding: 12px 0; }
.logo-strip-footer .logo-carousel { margin-top: 0; padding-top: 0; border-top: none; }

/* ============================================================
   GALLERY  (#gallery) — masonry columns, full uncropped images
   ============================================================ */
#gallery .gallery-grid { display: block; columns: 3 300px; column-gap: 14px; grid-template-columns: none; grid-auto-rows: auto; }
#gallery .g-item { break-inside: avoid; margin: 0 0 14px; display: block; height: auto; grid-row: auto !important; grid-column: auto !important; }
#gallery .g-item img { width: 100%; height: auto; object-fit: contain; display: block; }

@media (max-width: 720px) {
  #sponsors .r1 img { max-height: 117px; }
  #sponsors .r2 img { max-height: 83px; }
  #sponsors .r2 img:first-child { max-height: 60px; }
  #sponsors .r3 img { max-height: 62px; }
}