/* ========== BASE (mobile-first) ========== */
:root {
  --bg-color: #000;
  --text-color: white;
  --ndrl-red: #fd0202;  
  --nav-h: 200px;   /* change to match your mobile nav height */

  /* Background image and base height (mobile first) */
  --hdr-ratio: 1300 / 710;     /* match your artwork aspect */
  --hdr-maxw: 1300px;

  /* Rotator geometry (16:9) */
  --stage-w-max: 840px;
  --stage-ratio: 480 / 840;

  /* Mobile anchors (percent of header box) */
  --logo-x: 4%;     --logo-y: 4%;     --logo-w: 80px;
  --stage-x: 55%;   --stage-y: 65%;   --stage-w: min(92vw, 640px);
  --socials-x: .5%;     --socials-y: 50%;     --socials-w: 40px;
  --s-premiere-x: 25%;     --s-premiere-y: .5%;     --s-premiere-w: 280px;

  /* Slider (only shows ≥1300) */
  --slide-w: 150px; --slide-h: 100px; --slide-n: 10; --slide-d: 20s;

  /* Grid Setup */
  --grid-gap: 1rem;
  --cell-min: 390px;

  /* Card Setup */
  --card-text: white;
  --card-bg: #23252b;
  --card-bg-color: #23252b;


}

/* ---------- Header block stays in normal flow ---------- */
.site-header{
  display:block;
  background: #000;
}

/* Header artwork box: width clamps to design, height follows width (no overlap) */
.header-art{
  position: relative;
  width: min(100vw, var(--hdr-maxw));
  margin: 0 auto;
  aspect-ratio: var(--hdr-ratio);
  background: var(--hdr-art) no-repeat center top;
  background-size: cover;           /* swap to contain on very small if you prefer */
  overflow: hidden;
}

.site-header,
  .header-art {
    padding-top: var(--nav-h);
  }

/* Children positioned by percentage anchors */
#logo{
  position: absolute;
  left: var(--logo-x);
  top:  var(--logo-y);
  width: var(--logo-w);
  height: auto;
  z-index: 2;
}

#socials_vertical{
  position: absolute;
  left: var(--socials-x);
  top:  var(--socials-y);
  width: var(--socials-w);
  height: auto;
  z-index: 2;
}
#socials_vertical img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain; /* or 'cover' if you want them to fill tightly */
}

/* stage block */
.stage{
  position: absolute;
  left: var(--stage-x, 50%);
  top:  var(--stage-y, 50%);
  transform: translate(-50%, -50%);
  width: clamp(40vw, var(--stage-w, 86vw), var(--stage-w-max));
  height: calc(clamp(200px, var(--stage-w, 92vw), var(--stage-w-max)) * var(--stage-ratio));
  z-index: 1;
}

/* stage width derived from mobile var; override per breakpoint */
:root{ --stage-w: var(--stage-w); } /* keeps the token valid */

/* Rotator images */
.img-base,.img-over{
  position:absolute; inset:0; margin:auto;
  width:100%; height:100%;
  object-fit: contain; pointer-events:none;
}

/* Premiere banner and slider default hidden (mobile/tablet/desktop<1300) */
#sponsor_premiere{
  position: absolute;
  left: var(--s-premiere-x);
  top:  var(--s-premiere-y);
  width: var(--s-premiere-w);
  height: auto;
  z-index: 2;
}
#sponsor_premiere .row-logos {
  display: flex;
  align-items: center;
  justify-content: center; /* or space-between */
  gap: .75rem;
  flex-wrap: nowrap;       /* <-- keep single row */
}

#sponsor_premiere .row-logos img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

#sponsor_carousel{ display:none; z-index: 3;}


/* ---------- Slider guts ---------- */
.slider{
  position:absolute;
  right: 0; top: 0; /* you can also anchor with percent if desired */
  width: var(--slide-w);
  height: 650px;
  overflow: hidden;
}
.slide-track{
  display:flex; flex-direction:column; flex-wrap:nowrap;
  height: calc(var(--slide-h) * (var(--slide-n) * 2));
}
.slide{ flex:0 0 var(--slide-h); width:var(--slide-w); height:var(--slide-h); }
.slide img{ display:block; width:var(--slide-w); height:var(--slide-h); }
@keyframes scroll-vertical{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(0, calc(-1 * var(--slide-h) * var(--slide-n)), 0); }
}

/* ---------- Breakpoints ---------- */

/* Tablet */
@media (min-width: 700px){
  :root{
    --logo-x: 1%;     --logo-y: 2%;    --logo-w: 150px;
    --stage-x: 58%;   --stage-y: 55%;  --stage-w: 720px;
    --cell-min: 350px;
  }
  .header-art{ background-size: contain;} 
}

/* Desktop (layout targets, still hide slider & premiere) */
@media (min-width: 1024px){
  :root{
    --logo-x: 0.5%;   --logo-y: 3%;   --logo-w: 250px;
    --stage-x: 57%;   --stage-y: 58%; --stage-w: 840px;  /* cap to design */
    --socials-x: 2%;     --socials-y: 60%;     --socials-w: 80px;
    --s-premiere-x: 35%;     --s-premiere-y: .5%;     --s-premiere-w: 450px;
    --cell-min: 500px;
  }
  .site-header,
  .header-art {
    padding-top: 0;
  }
}

/* Wide: show premiere + slider and start animation */
@media (min-width: 1300px){
  :root{
    --logo-x: 0.5%;   --logo-y: 2%;   --logo-w: 400px;
    --stage-x: 57%;   --stage-y: 56%; --stage-w: 840px;  /* cap to design */
    --socials-x: 2%;     --socials-y: 55%;     --socials-w: 90px;
    --s-premiere-x: 35%;     --s-premiere-y: .5%;     --s-premiere-w: 650px;
    --cell-min: 650px;
  }
  #sponsor_premiere{ display:block; }
  #sponsor_carousel{ display:block; }
  #sponsor_carousel .slide-track{
    animation: scroll-vertical var(--slide-d) linear infinite;
    will-change: transform;
  }
}


body{
  margin: 0;
  background: var(--bg-color, #000);
  color: var(--text-color, #fff);
  font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
}
h1, h2, h3 {
  font-family: 'Montserrat', 'Lato', Arial, sans-serif;
}

.content-wrapper {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;           /* centers the whole container on the page */
  display: flex;
  flex-direction: column;   /* keeps content stacked top-to-bottom */
  align-items: center;      /* centers child elements left-to-right */
  color: var(--text-color);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ========= Grid System ========= */
.grid {
  display: grid;
  gap: var(--grid-gap, 1rem);
  padding-left: 5px;
  padding-right: 5px;
}

/* Auto-fit: flows 1→N columns based on space */
.grid.auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--cell-min, 360px), 1fr));
}

/* Cap to at most 2 columns (but still responsive) */
.grid.max-2 {
  grid-template-columns: repeat(auto-fit, minmax(var(--cell-min, 360px), 1fr));
  /* width for two cells + gaps; keeps from growing to 3+ cols */
  max-width: calc((var(--cell-min, 360px) * 2) + var(--grid-gap, 1rem));
  margin-left: auto; margin-right: auto;
}

/* Fixed column counts (use if you need hard control) */
.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Collapse fixed grids to 1 column on small screens */
@media (max-width: 800px) {
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}

/* Spans (behave nicely on mobile) */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
@media (max-width: 800px) {
  .span-2, .span-3 { grid-column: span 1; }
}
.tight-span {
  grid-column: span 2;
  justify-self: center;
  align-self: start;
}


/* ========= Card Base ========= */
.card {
  --card-bg: var(--card-bg-color, #0b0f1a);
  --card-bd: var(--card-border-color, rgba(255,255,255,0.08));
  --card-r: 12px;

  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--card-bg);
  color: var(--text-color, #e8eef8);
  border: 1px solid var(--card-bd);
  border-radius: var(--card-r);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  padding: 1rem;
  min-width: 0; /* prevent overflow with long content */
}
/* ========= Card Shrink Decorator ========= */

/* Makes the card size itself to its content (no forced flex growth) */
.card.shrink {
  display: inline-flex;          /* shrink-wraps content horizontally */
  flex-direction: column;
  width: auto;
  height: auto;
  align-self: start;             /* allows independent height in grid */
  justify-content: center;
}

/* Optional variant: keep flex but disable vertical stretching */
.card.shrink-flex {
  flex: 0 0 auto;                /* don't stretch */
  height: auto;
}

/* Adjust padding if you want tighter fit */
.card.shrink.pad-sm { padding: 0.5rem; }
.card.shrink.pad-0  { padding: 0; }


/* Sections (optional) */
.card .card-hd { font-weight: 700; font-size: 1.05rem; }
.card .card-bd { flex: 1 1 auto; }
.card .card-ft { margin-top: auto; }
.card.full {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.5rem;
  margin: 0 auto;
}
.card.full.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ========= Decorators ========= */
/* Borders */
.border        { border: 1px solid var(--card-bd); }
.border-strong { border: 2px solid rgba(255,255,255,0.18); }
.border-red    { border: 2px solid #ef4444; }   /* “racing red” */
.border-glow   { box-shadow: 0 0 0 1px #ef4444, 0 0 18px #ef4444aa; }

/* Centering helpers */
.center-content { display: flex; justify-content: center; align-items: center; text-align: center; }
.center-h       { display: flex; justify-content: center; text-align: center; }
.center-grid    { display: grid; place-items: center; text-align: center; }

/* Padding toggles */
.pad-0 { padding: 0 !important; }
.pad-sm { padding: 0.5rem !important; }
.pad-lg { padding: 1.5rem !important; }

/* Width helpers */
.w-full { width: 100%; }
.max-w-prose { max-width: 70ch; }

/* ========= Media (auto-fit for large images/video) ========= */
.card img, .card picture, .card video, .card canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Choose ONE of these per media container: */
.media-contain { object-fit: contain; width: 100%; height: 100%; }
.media-cover   { object-fit: cover;   width: 100%; height: 100%; }  /* crops */
.media-auto    { width: 100%; height: auto; }                       /* default */

/* Aspect ratio helpers for hero/embeds */
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-1x1  { aspect-ratio: 1 / 1; }

/* ========= Optional polish ========= */
.card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.35); transition: box-shadow .2s ease; }
.clickable  { cursor: pointer; }


/* =========== Buttons and Button Gird ======= */

/* ========== Buttons ========== */
.btn{
  --btn-h: 90px;
  --btn-w: 100%;
  --chev-w: 86px;
  --chev-skew: -18deg;
  --chev-offset: -22px;
  --divider-w: 10px;
  --pad-l: 40px; /* default when no left wedge */
  --pad-r: 40px; /* default when no right wedge */

  --btn-bg: radial-gradient(120% 180% at 50% 0%, #2b2b2b 0%, #1a1a1a 50%, #111 100%);
  background: var(--btn-bg);

  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;

  width: var(--btn-w, 100%);
  min-height: var(--btn-h, 90px);
  padding: 26px var(--pad-r) 26px var(--pad-l);

  margin: 0 auto 6px auto;
  color: var(--text-color, #fff);
  text-decoration: none;

  background: radial-gradient(120% 180% at 50% 0%, #2b2b2b 0%, #1a1a1a 50%, #111 100%);
  border-radius: 8px;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.08),
    inset 0 -3px 0 rgba(0,0,0,.6),
    0 8px 20px rgba(0,0,0,.8);
  outline: 1px solid rgba(255,255,255,.06);
  overflow: hidden;

  transition: transform .06s ease, box-shadow .12s ease;
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.08),
    inset 0 -3px 0 rgba(0,0,0,.7),
    0 10px 22px rgba(0,0,0,.9);
}

/* Label styling (kept from your original) */
.btn .label{
    font-family: Impact, Haettenschweiler, "Arial Black", "Anton", system-ui, sans-serif;
    font-size: var(--btn-fs, clamp(28px, 3.2vw + 6px, 56px));
    line-height: 1;
    text-transform: uppercase;
    text-shadow:
      -3px -3px 0 #000,
      3px -3px 0 #000,
      -3px 3px 0 #000,
      3px 3px 0 #000,
      0 0 6px rgba(0, 0, 0, .75);
    letter-spacing: .02em;
}

/* ---------- Chevron/Wedge decorators (opt-in) ---------- */
/* LEFT wedge + divider */
/* ---------- LEFT ONLY ---------- */
.btn--chev-left{
  --pad-l: calc(var(--chev-w) + 34px);
  /* left metallic divider + base bg */
  background-image:
    linear-gradient(180deg, #666, #2a2a2a 48%, #111 52%, #2a2a2a 100%),
    var(--btn-bg);
  background-repeat: no-repeat, no-repeat;
  background-size:
    var(--divider-w) calc(100% - 16px),
    cover;
  background-position:
    calc(var(--chev-w) - 2px) 8px,
    center;
}
.btn--chev-left::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: var(--chev-w);
  background: linear-gradient(#ff2c2c, var(--ndrl-red));
  transform: skewX(var(--chev-skew)) translateX(var(--chev-offset));
  box-shadow: inset -6px 0 10px rgba(0,0,0,.45);
  pointer-events:none;
}
/* Adjust padding only if left wedge is present */
.btn--chev-left{ --pad-l: calc(var(--chev-w) + 34px); }

/* RIGHT wedge + divider */
/* ---------- RIGHT ONLY ---------- */
.btn--chev-right{
  --pad-r: calc(var(--chev-w) + 34px);
  /* right metallic divider + base bg */
  background-image:
    linear-gradient(180deg, #666, #2a2a2a 48%, #111 52%, #2a2a2a 100%),
    var(--btn-bg);
  background-repeat: no-repeat, no-repeat;
  background-size:
    var(--divider-w) calc(100% - 16px),
    cover;
  background-position:
    calc(100% - (var(--chev-w) - 2px) - var(--divider-w)) 8px,
    center;
}
.btn--chev-right::after{
  content:"";
  position:absolute; inset:0 0 0 auto;
  width: var(--chev-w);
  background: linear-gradient(#ff2c2c, var(--ndrl-red));
  transform: skewX(calc(var(--chev-skew) * -1)) translateX(calc(var(--chev-offset) * -1));
  box-shadow: inset 6px 0 10px rgba(0,0,0,.45);
  pointer-events:none;
}

/* Adjust padding only if right wedge is present */
.btn--chev-right{ --pad-r: calc(var(--chev-w) + 34px); }

/* BOTH sides: just apply both modifiers */
/* ---------- BOTH SIDES ---------- */
.btn--chev-both{
  --pad-l: calc(var(--chev-w) + 34px);
  --pad-r: calc(var(--chev-w) + 34px);
  /* left divider, right divider, base bg */
  background-image:
    linear-gradient(180deg, #666, #2a2a2a 48%, #111 52%, #2a2a2a 100%),
    linear-gradient(180deg, #666, #2a2a2a 48%, #111 52%, #2a2a2a 100%),
    var(--btn-bg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size:
    var(--divider-w) calc(100% - 16px),
    var(--divider-w) calc(100% - 16px),
    cover;
  background-position:
    calc(var(--chev-w) - 2px) 8px,
    calc(100% - (var(--chev-w) - 2px) - var(--divider-w)) 8px,
    center;
}
.btn--chev-both::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: var(--chev-w);
  background: linear-gradient(#ff2c2c, var(--ndrl-red));
  transform: skewX(var(--chev-skew)) translateX(var(--chev-offset));
  box-shadow: inset -6px 0 10px rgba(0,0,0,.45);
  pointer-events:none;
}
.btn--chev-both::after{
  content:"";
  position:absolute; inset:0 0 0 auto;
  width: var(--chev-w);
  background: linear-gradient(#ff2c2c, var(--ndrl-red));
  transform: skewX(calc(var(--chev-skew) * -1)) translateX(calc(var(--chev-offset) * -1));
  box-shadow: inset 6px 0 10px rgba(0,0,0,.45);
  pointer-events:none;
}

/* Justifies left default center and right below */
/* Centers the label horizontally within the button */
.btn--center {
  justify-content: center;
  text-align: center;
  padding-left: var(--pad-r);   /* neutralize left wedge padding */
  padding-right: var(--pad-r);  /* keep symmetrical spacing */
}

/* Right-align if needed later (for rare layouts) */
.btn--right {
  justify-content: flex-end;
  text-align: right;
}

/* Secondary/dimmer look */
.btn--secondary.btn--chev-left::before,
.btn--secondary.btn--chev-right::after,
.btn--secondary.btn--chev-both::before,
.btn--secondary.btn--chev-both::after{
  background: linear-gradient(#9b0000, #5a0000);
}

.btn{ padding: 26px var(--pad-r) 26px var(--pad-l); }

/* Convenience sizes (optional) */
.btn-ex-sm { --btn-h: 20px; padding: 5px var(--pad-r) 5px var(--pad-l);}
.btn-sm { --btn-h: 40px; padding: 10px var(--pad-r) 10px var(--pad-l); }
.btn-md { --btn-h: 56px; }
.btn-lg { --btn-h: 90px; }

/* ========== Button Grid ========== */
.btn-grid{
  --btn-grid-gap: 0.75rem;
  --cell-min: 320px; /* can override per container */

  display: grid;
  gap: var(--btn-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--cell-min), 1fr));
  width: 100%;
}


/* ========  DETAILED POSIBLE ONE OFFS ======= */

.card .btn{
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  min-width: 0; /* helps in flex/grid parents */
}

.card.pdf {
  display: flex;
  flex-direction: column;
  height: 80vh;
  max-height: 900px;
}

.card.pdf embed {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
}