/* ==========================================================================
   home-hero.css — homepage hero: client pick R5·7 "Broadcast" (Figma "WFL — Hero links · varianten", Ronde 5, 2026-10-08)
   One sharp photo at the right (the winner with raised fists and the belt), the line on black at the
   left, and a TV lower-third along the foot: red "VOLGENDE" tab on the 17° logo slant · next event + status · venue ·
   days to go · Tickets. Measures are the Figma desktop (1440 × 900 incl. the 72px header → hero 828) and mobile
   (390 × 844 incl. the 64px header). Below 1024px the bar becomes a card with a full-width button.
   ========================================================================== */
.page-home .home-hero.home-hero--bc {
  position: relative; padding: 0; overflow: hidden;
  background: var(--nacht);
}
.page-home .home-bc { position: relative; }
.page-home .home-bc__photo { position: absolute; z-index: 0; pointer-events: none; }
.page-home .home-bc__photo .media, .page-home .home-bc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the Figma grade (exposure +.06, contrast +.24, saturation −.1, shadows −.42) */
.page-home .home-bc__photo img { filter: contrast(1.16) saturate(.9) brightness(.98); }
/* local darkening, as in the Figma ("dempen"): rig + spots above the fists, the ring ropes beside the belt, the haze right */
.page-home .home-bc__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(18% 9% at 30% 4%, rgba(7, 7, 10, .95) 0%, rgba(7, 7, 10, .9) 45%, rgba(7, 7, 10, 0) 100%),
    radial-gradient(20% 16% at 38% 9%, rgba(7, 7, 10, .85) 0%, rgba(7, 7, 10, .7) 45%, rgba(7, 7, 10, 0) 100%),
    radial-gradient(14% 8% at 10% 5%, rgba(7, 7, 10, .95) 0%, rgba(7, 7, 10, .8) 45%, rgba(7, 7, 10, 0) 100%),
    radial-gradient(24% 32% at 92% 46%, var(--nacht) 0%, rgba(7, 7, 10, .96) 55%, rgba(7, 7, 10, 0) 100%),
    linear-gradient(to right, rgba(7, 7, 10, 0) 72%, rgba(7, 7, 10, .85) 77%, var(--nacht) 82%),
    radial-gradient(17% 6% at 14% 56%, var(--nacht) 0%, rgba(7, 7, 10, .95) 50%, rgba(7, 7, 10, 0) 100%),
    radial-gradient(10% 6% at 67% 56%, var(--nacht) 0%, rgba(7, 7, 10, .9) 50%, rgba(7, 7, 10, 0) 100%),
    radial-gradient(14% 11% at 18% 55%, rgba(7, 7, 10, .85) 0%, rgba(7, 7, 10, .6) 45%, rgba(7, 7, 10, 0) 100%),
    radial-gradient(14% 11% at 70% 56%, rgba(7, 7, 10, .85) 0%, rgba(7, 7, 10, .6) 45%, rgba(7, 7, 10, 0) 100%),
    radial-gradient(26% 14% at 6% 62%, rgba(7, 7, 10, .95) 0%, rgba(7, 7, 10, .75) 45%, rgba(7, 7, 10, 0) 100%),
    radial-gradient(22% 14% at 82% 62%, rgba(7, 7, 10, .95) 0%, rgba(7, 7, 10, .75) 45%, rgba(7, 7, 10, 0) 100%);
}
.page-home .home-bc__fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ---- copy -------------------------------------------------------------------- */
.page-home .home-bc__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.page-home .home-bc__h1 {
  align-self: stretch; margin: 0; font: 900 min(72px, 18.5vw)/.88 var(--font-display); text-transform: uppercase; letter-spacing: 0; color: var(--bot);
}
@media (min-width: 1024px) { .page-home .home-bc__h1 { align-self: flex-start; max-width: 6.9em; } }
.page-home .home-bc__line { margin: 16px 0 0; max-width: 34ch; font: 400 16px/1.45 var(--font-body); color: var(--bot-80); text-wrap: balance; }
.page-home .home-bc__ctas { margin-top: 36px; }
.page-home .home-bc__cta { --btn-h: 56px; font-size: 18px; padding-inline: 36px 32px; gap: 14px; }

/* ---- the broadcast bar --------------------------------------------------------- */
.page-home .home-bar {
  position: relative; z-index: 3;
  background: rgba(16, 16, 20, .82);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(241, 238, 232, .14);
}
.page-home .home-bar__tab {
  display: flex; align-items: center; background: var(--rood); color: var(--wit);
  font: 500 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
}
.page-home .home-bar__name { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.page-home .home-bar__name a {
  font: 800 28px/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--bot); text-decoration: none;
}
.page-home .home-bar__name a:hover { color: var(--wit); }
.page-home .home-bar__chip {
  display: inline-flex; align-items: center; min-height: 21px; padding: 3px 7px 3px 8px; border-radius: var(--r-chip);
  box-shadow: inset 0 0 0 1px rgba(241, 238, 232, .5);
  font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bot);
}
.page-home .home-bar__meta { margin: 6px 0 0; font: 400 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rook); }
.page-home .home-bar__date-l { display: none; }
.page-home .home-bar__k { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rook); }
.page-home .home-bar__v { display: block; color: var(--bot); }
.page-home .home-bar__v--zaal { font: 600 18px/1.2 var(--font-body); }
.page-home .home-bar__cell--nog .home-bar__v { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rook); }
.page-home .home-bar__n { font: 400 16px/1 var(--font-mono); letter-spacing: -.02em; color: var(--bot); }
.page-home .home-bar__cell--zaal { display: none; }

/* ---- phones + tablets (< 1024px): the Figma mobile — photo on top, copy, the bar as a card --------------------------- */
@media (max-width: 1023.98px) {
  .page-home .home-hero.home-hero--bc { min-height: max(600px, calc(100svh - var(--header-h))); display: flex; }
  .page-home .home-bc {
    --pw: min(139.5vw, 760px);
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    padding: calc(var(--pw) * .61 - 36px) var(--margin) 20px;
  }
  .page-home .home-bc__photo { top: -36px; left: calc(56.7% - var(--pw) / 2); width: var(--pw); height: calc(var(--pw) * 1.25); }
  .page-home .home-bc__photo::before {   /* the Figma fade into nacht under the fighter (37% → 59% of the photo) */
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, rgba(7, 7, 10, 0) 37%, rgba(7, 7, 10, .3) 40.4%, rgba(7, 7, 10, .7) 43.3%,
      rgba(7, 7, 10, .92) 46.5%, rgba(7, 7, 10, .99) 50.6%, var(--nacht) 59.4%);
  }
  .page-home .home-bc__fx { background: linear-gradient(to bottom, var(--nacht) 0, rgba(7, 7, 10, .6) 48px, rgba(7, 7, 10, 0) 100px); }
  .page-home .home-bc__copy { max-width: 560px; }
  .page-home .home-bc__ctas { display: none; }           /* the mobile Figma: one action, in the card */
  .page-home .home-hero--nobar .home-bc__ctas { display: flex; width: 100%; }
  .page-home .home-hero--nobar .home-bc__cta { width: 100%; }
  .page-home .home-bar {
    margin-top: auto; width: 100%; max-width: 560px;
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tab nog" "event event" "cta cta";
  }
  .page-home .home-bar__body { display: contents; }
  .page-home .home-bar__tab {
    grid-area: tab; height: 34px; padding: 0 30px 0 16px;
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  }
  .page-home .home-bar__cell--nog { grid-area: nog; justify-self: end; align-self: center; padding-right: 16px; display: flex; align-items: baseline; gap: 10px; }
  .page-home .home-bar__cell--nog .home-bar__k { display: inline; }
  .page-home .home-bar__cell--nog .home-bar__v { display: inline; }
  .page-home .home-bar__event { grid-area: event; padding: 16px 16px 0; }
  .page-home .home-bar__cta { grid-area: cta; padding: 16px; }
  .page-home .home-bar__cta .btn { width: 100%; }
}
.page-home .home-bc__copy { margin-bottom: 28px; }

/* ---- desktop (≥ 1024px): the Figma desktop ------------------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .page-home .home-hero.home-hero--bc { --hh: clamp(640px, calc(100svh - var(--header-h)), 1100px); height: var(--hh); }
  .page-home .home-bc { position: absolute; inset: 0; }
  /* 4:5 photo 1.4 × the stage high, its top just under the header, centred at 76.7% (never more than 14% off-frame, as in the Figma) */
  .page-home .home-bc__photo {
    --ph: calc(var(--hh) * 1.401); --pw: calc(var(--ph) * .8);
    top: calc(var(--hh) * var(--hero-top, -.075)); height: var(--ph); width: var(--pw);
    left: min(calc(76.67% - var(--pw) / 2), calc(100% - var(--pw) * .86));
  }
  .page-home .home-bc__fx {
    background:
      linear-gradient(to bottom, var(--nacht) 0, rgba(7, 7, 10, .96) 16px, rgba(7, 7, 10, .6) 41px, rgba(7, 7, 10, .22) 68px, rgba(7, 7, 10, .06) 93px, rgba(7, 7, 10, 0) 124px),
      linear-gradient(to bottom, rgba(7, 7, 10, 0) 68.6%, rgba(7, 7, 10, .6) 78%, rgba(7, 7, 10, .94) 87.5%, var(--nacht) 92.3%),
      linear-gradient(to right, var(--nacht) 0, var(--nacht) 45.4%, rgba(7, 7, 10, .82) 48.4%, rgba(7, 7, 10, .48) 51.4%, rgba(7, 7, 10, .18) 54.3%, rgba(7, 7, 10, .04) 57.3%, rgba(7, 7, 10, 0) 59.7%);
  }
  .page-home .home-bc__copy {
    position: absolute; left: var(--margin); bottom: calc(64px + 96px + 72px); margin: 0; max-width: 46%;
  }
  .page-home .home-hero--nobar .home-bc__copy { bottom: 64px; }
  .page-home .home-bc__h1 { font-size: clamp(64px, 6.95vw, 112px); }
  .page-home .home-bc__line { margin-top: 24px; max-width: none; font-size: 20px; line-height: 1.4; }

  .page-home .home-bar {
    position: absolute; left: var(--margin); right: var(--margin); bottom: 64px; height: 96px;
    display: flex; align-items: stretch;
    background: rgba(16, 16, 20, .78); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  }
  .page-home .home-bar__tab {
    flex: none; width: 164px; padding-left: 28px; font-size: 14px;
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 29px) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 29px) 100%, 0 100%);
  }
  .page-home .home-bar__body { flex: 1; min-width: 0; display: flex; align-items: center; padding-right: 20px; }
  .page-home .home-bar__event { padding-left: 24px; min-width: 0; }
  .page-home .home-bar__name a { font-size: 34px; }
  .page-home .home-bar__chip { min-height: 23px; padding: 4px 7px 4px 8px; }
  .page-home .home-bar__meta { margin-top: 8px; font-size: 12px; letter-spacing: .12em; }
  .page-home .home-bar__date-l { display: inline; }
  .page-home .home-bar__date-s, .page-home .home-bar__meta-venue { display: none; }
  .page-home .home-bar__cell { position: relative; flex: none; margin-left: 32px; padding-left: 32px; }
  .page-home .home-bar__cell::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 48px; margin-top: -24px; background: var(--touw); }
  .page-home .home-bar__cell .home-bar__k { margin-bottom: 8px; }
  .page-home .home-bar__cell--nog .home-bar__k { margin-bottom: 6px; }
  .page-home .home-bar__n { font-size: 26px; margin-right: 6px; }
  .page-home .home-bar__cell--nog .home-bar__v { font-size: 12px; }
  .page-home .home-bar__cta { margin-left: auto; padding-left: 24px; flex: none; }
}
@media (min-width: 1280px) {
  .page-home .home-bar__cell--zaal { display: block; }
  .page-home .home-bar__cell { margin-left: 56px; padding-left: 56px; }
}
@media (prefers-reduced-transparency: reduce) { .page-home .home-bar { background: var(--zaal); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---- phones: client pick ronde 8 · 1A (2026-10-17) — the hero ~15% lower so Tickets is on screen sooner
   (iPhone 390×844: the button at ~645 instead of 759); the photo moves up with the copy, the small meta text is lighter */
@media (max-width: 767.98px) {
  .page-home .home-hero.home-hero--bc { min-height: max(520px, calc((100svh - var(--header-h)) * .85)); }
  .page-home .home-bc { padding-top: calc(var(--pw) * .44 - 36px); }
  .page-home .home-bc__photo { top: calc(-36px - var(--pw) * .12); }
  .page-home .home-bc__h1 { font-size: min(56px, 14.4vw); }   /* two lines, as in the Figma variant */
  .page-home .home-bc__copy { margin-bottom: 20px; }
  .page-home .home-bc__line { color: #C8C5CD; }
  .page-home .home-bar__meta, .page-home .home-bar__k, .page-home .home-bar__cell--nog .home-bar__v { color: #C8C5CD; }
}