/* ============================================================
   RACETUNE — split hero slider (v3a)
   Text on light background, photo in an angled panel on the
   right. No heavy overlays — photos stay bright and sharp.
   Slides are stacked in one grid cell, so the hero takes the
   height of the tallest slide (no jump between slides) and sizes
   itself to its content rather than to the screen height.
   Load AFTER style.css + theme-light.css.
   ============================================================ */

.hero-split {
  position: relative;
  display: grid;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(20, 30, 80, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 30, 80, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
}
.hero-split::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 85% 20%, rgba(50, 69, 184, 0.1), transparent 65%);
  pointer-events: none;
}

.hero-split .slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: stretch;
  /* same top spacing as .page-hero on the other pages */
  padding: calc(var(--header-h) + clamp(24px, 3.5vw, 44px)) 0 92px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.6s ease, visibility 1.6s;
}
.hero-split .slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr; /* photo panel ~20% wider than the old 50/50 split */
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  width: 100%;
  height: 100%;
}

/* text column fills the full slide height:
   tag + heading + lead at top, buttons pinned to the bottom */
.split-text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.split-text .btn-row { margin-top: auto; padding-top: 28px; gap: 12px; }
/* keep the tag on one line so the heading starts at the same height on every slide */
.split-text .tag { white-space: nowrap; letter-spacing: 0.22em; }

/* top edge aligned with the heading — margin set in the panel rule below */
.split-photo { align-self: start; }

/* compact buttons inside the hero so both fit on one row */
.hero-split .btn {
  font-size: 17px;
  padding: 13px 22px;
}

.split-text h1,
.split-text h2 {
  font-size: clamp(40px, 5.4vw, 76px);
  margin: 8px 0 20px;
  line-height: 0.95;
  max-width: 13ch;
}
.split-text .row2 { color: var(--red-bright); display: block; }
.split-text .lead { max-width: 46ch; font-size: clamp(16px, 1.6vw, 19px); }
.split-text .lead-sub {
  max-width: 52ch;
  color: var(--muted);
  font-size: 15.5px;
  margin-top: 16px;
}

/* HP Tuners slide: only the "HP" letters carry the brand blue,
   the rest of the heading stays in the normal text color */
.slide-hp .split-text .row2 { color: inherit; }
.slide-hp .split-text .tag { color: #00a7ea; }
.slide-hp .split-text .tag::before { background: #00a7ea; }
.slide-hp .split-photo figcaption { border-left-color: #00a7ea; }

/* photo panel: angled clip + offset indigo slab behind */
.split-photo {
  position: relative;
  margin: 60px 0 0; /* aligns the photo top with the heading cap height */
  width: 100%;
}
.split-photo::before {
  content: "";
  position: absolute;
  inset: 22px -20px -22px 20px;
  background: linear-gradient(120deg, #20255f, #3a4cc9);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  opacity: 0.9;
}
.split-photo .ph {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: min(64vh, 600px);
  width: 100%;
  background-size: cover;
  background-position: center;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}
.split-photo figcaption {
  position: absolute;
  left: 10%;
  bottom: 18px;
  z-index: 2;
  background: rgba(10, 12, 20, 0.82);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-left: 3px solid #5b7bff;
}

/* slide crossfade — slow fade in, gentle fade out */
.split-text > *, .hero-split .split-photo {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.slide.is-active .split-text > *, .slide.is-active .split-photo {
  opacity: 1;
  transition: opacity 2s ease 0.3s;
}

/* ---------- controls (light surface styling) ---------- */

.hero-split .slider-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}
.hero-split .slider-controls .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 26px;
}
.hero-split .slider-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
  white-space: nowrap;
}
.hero-split .slider-count b { color: var(--text); font-weight: 500; }

.hero-split .slider-dots { display: flex; gap: 10px; flex: 1; }
.hero-split .slider-dots button {
  width: 34px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.hero-split .slider-dots button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 2px;
  background: rgba(15, 20, 50, 0.25);
  transition: background 0.25s;
}
.hero-split .slider-dots button:hover::before { background: rgba(15, 20, 50, 0.5); }
.hero-split .slider-dots button[aria-current="true"]::before { background: var(--red-bright); height: 3px; top: 9.5px; }

.hero-split .slider-arrows { display: flex; gap: 10px; }
.hero-split .slider-arrows button {
  width: 46px;
  height: 46px;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.hero-split .slider-arrows button:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* desktop: controls sit on the same row as the hero buttons, aligned right,
   a fixed distance below the photo (the photo's bottom margin reserves the
   room: 22px slab offset + 24px gap + 46px controls) */
@media (min-width: 901px) {
  .hero-split .slide { padding-bottom: 56px; }
  .split-photo { margin-bottom: 92px; }
  .hero-split .slider-controls { bottom: 56px; }
  .hero-split .slider-controls .wrap {
    justify-content: flex-end;
    padding-bottom: 0;
    gap: 18px;
  }
  .hero-split .slider-dots { flex: 0 0 auto; }
}

/* ---------- mobile: stacked, auto height ---------- */

@media (max-width: 900px) {
  .hero-split .slide {
    position: absolute;
    inset: 0;
    padding: calc(var(--header-h) + 16px) 0 116px;
  }
  .hero-split .slide.is-active { position: relative; }
  .split-grid { grid-template-columns: 1fr; gap: 28px; }
  .split-photo { order: -1; max-width: 560px; margin: 0; }
  .split-photo::before { inset: 12px -10px -12px 10px; }
  .split-photo .ph { max-height: 340px; }
  .split-text h1, .split-text h2 { font-size: clamp(38px, 9vw, 56px); }
  .hero-split .slider-count { display: none; }
  /* long tag lines wrap on phones instead of running off the screen */
  .split-text .tag { white-space: normal; line-height: 1.7; align-items: flex-start; }
  .split-text .tag::before { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide.is-active .split-text > *, .slide.is-active .split-photo {
    transition: none;
  }
}

/* ---------- dark mode (html[data-theme="dark"]) ---------- */

html[data-theme="dark"] .hero-split {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}
html[data-theme="dark"] .hero-split::before {
  background: radial-gradient(900px 480px at 85% 20%, rgba(50, 69, 184, 0.18), transparent 65%);
}
html[data-theme="dark"] .hero-split .slider-dots button::before { background: rgba(255, 255, 255, 0.3); }
html[data-theme="dark"] .hero-split .slider-dots button:hover::before { background: rgba(255, 255, 255, 0.6); }
html[data-theme="dark"] .hero-split .slider-arrows button {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}
html[data-theme="dark"] .hero-split .slider-arrows button:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
html[data-theme="dark"] .split-text .row2 { color: #5b7bff; }

/* ---------- YouTube section ---------- */

.yt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 1060px) { .yt-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .yt-grid { grid-template-columns: 1fr; } }

.yt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.yt-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: 0 16px 36px rgba(15, 20, 50, 0.12);
}

.yt-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.yt-card:hover .yt-thumb img { transform: scale(1.05); }

.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 36px;
  background: rgba(10, 12, 20, 0.75);
  border-radius: 8px;
  display: grid;
  place-items: center;
  transition: background 0.2s;
}
.yt-play::after {
  content: "";
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
.yt-card:hover .yt-play { background: #c00; }

.yt-card h3 {
  font-size: 19px;
  line-height: 1.15;
  padding: 16px 18px 6px;
  flex: 1;
}
.yt-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 18px 18px;
}

/* ---------- "Miks Racetune" band with angled dyno photo ---------- */

.band-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
/* yellow slab + caption edge to match the band's yellow accents */
.band .split-photo { margin: 0; }
.band .split-photo::before { background: linear-gradient(120deg, var(--yellow), #e3cf00); opacity: 0.95; }
.band .split-photo figcaption { border-left-color: var(--yellow); }
@media (max-width: 900px) {
  .band-grid { grid-template-columns: 1fr; }
  .band-grid .split-photo { max-width: 560px; }
}

/* ---------- CTA band with angled photo (same style as hero slides) ---------- */

.cta-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 900px) {
  .cta-grid { grid-template-columns: 1fr; }
  .cta-grid .split-photo { max-width: 560px; }
}

/* theme toggle button lives in theme-light.css — it ships on every page,
   not just the ones with the split hero */