/* ==========================================================================
   WFL — Ringside: VIP & partners (partners.html, §5.11). Scoped under .page-partners
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------------- */
.page-partners .pt-hero .screen--hero .screen__fx {
  background: linear-gradient(to top, rgba(7, 7, 10, .92) 0%, rgba(7, 7, 10, .62) 40%, rgba(7, 7, 10, 0) 75%), var(--vignet);
}
.page-partners .pt-hero__title { font-size: min(24vw, calc((100vw - 56px) / 4.4)); line-height: .82; }
@media (max-width: 767.98px) {
  .page-partners .pt-hero .screen--hero { height: calc(100svh - var(--header-h) - 2 * var(--screen-inset)); min-height: 560px; }
  .page-partners .pt-hero .label { text-shadow: 0 1px 12px rgba(7, 7, 10, .8); }
  .page-partners .pt-hero__ctas { width: 100%; }
  .page-partners .pt-hero__ctas .btn--primary { width: 100%; }
}
@media (min-width: 768px) {
  .page-partners .pt-hero .screen--hero .screen__fx {
    background: var(--tekstveilig-onder), linear-gradient(to right, rgba(7, 7, 10, .85) 0%, rgba(7, 7, 10, .4) 32%, rgba(7, 7, 10, 0) 54%), var(--vignet);
  }
  .page-partners .pt-hero__title { font-size: min(var(--fs-mega), 18svh); }
}

/* ---- #vip: visual + packs ------------------------------------------------------ */
.page-partners .pt-vip__top { display: grid; gap: var(--s-7); align-items: center; margin-bottom: clamp(56px, 8vw, 120px); }
@media (min-width: 1024px) { .page-partners .pt-vip__top { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-9); } }
.page-partners .pt-vip__info { display: grid; gap: var(--s-6); }
.page-partners .pt-vip__info .section__head { margin-bottom: 0; }
.page-partners .pt-vip__info .d2 { max-width: 13ch; }
.page-partners .pt-vip__screen { width: 100%; }
@media (max-width: 1023.98px) {
  .page-partners .pt-vip__media { order: -1; }
  .page-partners .pt-vip__screen.screen { aspect-ratio: 16 / 10; }
}
.page-partners .pt-packs { display: grid; gap: var(--s-4); }
@media (min-width: 600px) { .page-partners .pt-packs { grid-template-columns: 1fr 1fr; } }
.page-partners .pt-pack {
  position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 4px);
  background: var(--doek); border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px var(--touw);
}
.page-partners .pt-pack::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rood); }
.page-partners .pt-pack--b::before { left: auto; right: 0; background: var(--blauw); }
.page-partners .pt-pack::after { content: ""; position: absolute; inset: 0; background: var(--licht-rood); opacity: .1; pointer-events: none; }
.page-partners .pt-pack--b::after { background: var(--licht-blauw); }
.page-partners .pt-pack__note { color: var(--bot-80); max-width: 26ch; }
.page-partners .pt-vip__honest { color: var(--bot-80); }

/* ---- #vip: calendar + form ------------------------------------------------------ */
.page-partners .pt-vip__grid { display: grid; gap: var(--s-8); align-items: start; }
/* calendar and form side by side only where a calendar row keeps its title on one or two lines */
@media (min-width: 1200px) { .page-partners .pt-vip__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-9); } }
.page-partners .pt-cal-wrap { display: grid; gap: var(--s-6); }
/* "Kalender." starts on the same line as "Reserveer je tafel." inside the panel beside it */
@media (min-width: 1200px) { .page-partners .pt-cal-wrap { padding-top: clamp(20px, 3.4vw, 48px); } }
.page-partners .pt-cal { border-top: 1px solid var(--touw); }
.page-partners .pt-cal__row {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 4px var(--s-5); align-items: center;
  padding: var(--s-5) 0; border-bottom: 1px solid var(--touw);
}
.page-partners .pt-cal__row::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--s-4)); background: var(--licht-rood); opacity: 0; transition: opacity 400ms var(--ease-out); pointer-events: none; border-radius: var(--r-panel); }
.page-partners .pt-cal__row:hover::before, .page-partners .pt-cal__row:focus-within::before, .page-partners .pt-cal__row.is-picked::before { opacity: .16; }
.page-partners .pt-cal__row.is-picked .pt-cal__dm { color: var(--rood-signaal); }
.page-partners .pt-cal__date { display: grid; gap: 4px; }
.page-partners .pt-cal__dm { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1; color: var(--bot); transition: color var(--t-micro); }
.page-partners .pt-cal__wy { color: var(--rook); white-space: nowrap; }
.page-partners .pt-cal__what { display: grid; gap: 4px; min-width: 0; }
.page-partners .pt-cal__title { font: 800 clamp(1.25rem, 1.8vw, 1.625rem) / 1.05 var(--font-display); text-transform: uppercase; }
.page-partners .pt-cal__title a { color: var(--bot); text-decoration: none; }
.page-partners .pt-cal__title a:hover { color: var(--rood-signaal); }
.page-partners .is-flagship .pt-cal__title { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.page-partners .pt-cal__where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--bot-80); }
.page-partners .pt-cal__ask {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--bot); color: var(--bot); font: 600 14px/1 var(--font-body); text-decoration: none;
  transition: background-color var(--t-micro), color var(--t-micro), box-shadow var(--t-micro);
}
.page-partners .pt-cal__ask:hover, .page-partners .pt-cal__ask:focus-visible { background: var(--rood); box-shadow: inset 0 0 0 1px var(--rood); color: var(--bot); }
@media (max-width: 599.98px) {
  .page-partners .pt-cal__row { grid-template-columns: 88px minmax(0, 1fr); gap: 4px var(--s-4); }
  .page-partners .pt-cal__ask { grid-column: 2; justify-self: start; margin-top: 8px; min-height: 40px; }
}
.page-partners .pt-vip__panel {
  position: relative; display: grid; gap: var(--s-6); padding: clamp(20px, 3.4vw, 48px); border-radius: var(--r-screen);
  background: var(--zaal); box-shadow: inset 0 0 0 1px var(--touw); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 24px);
}
@media (min-width: 1200px) { .page-partners .pt-vip__panel { position: sticky; top: calc(var(--header-h) + var(--s-6)); } }
.page-partners .pt-vip__panel::before { content: ""; position: absolute; inset: 0; background: var(--licht-blauw); opacity: .08; pointer-events: none; }
.page-partners .pt-vip__panel-head { position: relative; display: grid; gap: var(--s-3); }
.page-partners .pt-form { position: relative; }
.page-partners .pt-form .field { align-content: start; }
.page-partners .pt-req { color: var(--rood-signaal); }
.page-partners .pt-form__submit { margin-top: var(--s-2); gap: var(--s-4); }
@media (max-width: 767.98px) { .page-partners .pt-form__submit .btn--l { width: 100%; } }
.page-partners .pt-success { position: relative; }

/* ---- Partners as weight classes ---------------------------------------------- */
.page-partners .pt-tiers { display: grid; border-top: 1px solid var(--touw); }
.page-partners .pt-tier {
  position: relative; display: grid; gap: var(--s-4); padding: clamp(24px, 3.4vw, 48px) 0;
  border-bottom: 1px solid var(--touw);
}
@media (min-width: 768px) { .page-partners .pt-tier { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--s-7); } }
.page-partners .pt-tier::before { content: ""; position: absolute; inset: 0; background: var(--licht-rood); opacity: 0; transition: opacity 600ms var(--ease-out); pointer-events: none; }
.page-partners .pt-tier:hover::before, .page-partners .pt-tier:focus-within::before { opacity: .14; }
.page-partners .pt-tier__class { display: grid; }
.page-partners .pt-tier__name { font: 900 var(--fs-d3) / .9 var(--font-display); text-transform: uppercase; color: var(--bot); }
.page-partners .pt-tier--heavyweight .pt-tier__name { font-size: clamp(2.5rem, 5vw, 5rem); }
.page-partners .pt-tier__items { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); align-items: center; }
.page-partners .pt-tier__item { display: grid; gap: 8px; justify-items: start; }
.page-partners .pt-tier__item--wide { gap: 10px; }
.page-partners .pt-plate {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: 96px; padding: 20px 28px; border-radius: var(--r-panel);
  background: var(--zaal); box-shadow: inset 0 0 0 1px var(--touw);
  transition: box-shadow var(--t-micro), background-color var(--t-micro);
}
.page-partners a.pt-plate:hover, .page-partners a.pt-plate:focus-visible { box-shadow: inset 0 0 0 1px var(--rook); background: var(--doek); }
.page-partners .pt-plate__logo img { height: var(--plate-h, 40px); width: auto; max-width: 240px; filter: grayscale(1); opacity: .7; transition: filter 300ms var(--ease-out), opacity 300ms var(--ease-out); }
.page-partners .pt-tier--heavyweight .pt-plate__logo img { --plate-h: 56px; }
.page-partners .pt-tier--middleweight .pt-plate__logo img { --plate-h: 40px; }
.page-partners .pt-tier__item:hover .pt-plate__logo img, .page-partners .pt-plate:focus-visible .pt-plate__logo img { filter: none; opacity: 1; }
.page-partners .pt-plate__ext { width: 16px; height: 16px; color: var(--rook); }
.page-partners .pt-tier__word { font: 900 clamp(1.75rem, 3vw, 2.5rem) / 1 var(--font-display); text-transform: uppercase; color: var(--bot-80); letter-spacing: .01em; }
.page-partners .pt-tier__item:hover .pt-tier__word { color: var(--bot); }
.page-partners .pt-tier__role { color: var(--rook); }
.page-partners .pt-sanc { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.page-partners .pt-sanc li { font: 800 clamp(1.5rem, 2.6vw, 2.25rem) / 1 var(--font-display); color: var(--bot-80); }
@media (max-width: 767.98px) {
  .page-partners .pt-plate { min-height: 80px; padding: 16px 20px; }
  .page-partners .pt-tier--heavyweight .pt-plate__logo img { --plate-h: 44px; }
  .page-partners .pt-plate__logo img { max-width: calc(100vw - 120px); }
}

/* ---- Bereik: one number block (2 × 2 on phones and tablets, one row of four on desktop) -------------------- */
.page-partners .pt-stats { margin-top: 0; margin-bottom: clamp(48px, 6vw, 88px); }
/* phones: the code line would wrap in a half-width column; the homepage drops it there too */
@media (max-width: 767.98px) { .page-partners .pt-stats .stat__codes { display: none; } }
.page-partners .pt-reach__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1024px) { .page-partners .pt-reach__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); } }
.page-partners .pt-proof { display: grid; border-top: 1px solid var(--touw); }
.page-partners .pt-proof__item { display: grid; gap: 6px; padding: var(--s-5) 0; border-bottom: 1px solid var(--touw); }
.page-partners .pt-proof__t { font: 900 clamp(1.5rem, 2.4vw, 2.25rem) / .95 var(--font-display); color: var(--bot); }
.page-partners .pt-proof__p { color: var(--bot-80); max-width: 44ch; }

/* ---- Word partner CTA ------------------------------------------------------------ */
.page-partners .pt-cta { padding-top: calc(var(--section-y) * .5); }
.page-partners .pt-cta__screen .screen__fx { background: var(--tekstveilig-onder), var(--tekstveilig-links), var(--vignet); }
@media (max-width: 767.98px) {
  .page-partners .pt-cta__screen.screen { aspect-ratio: auto; min-height: 600px; }
  /* the arena sits in the top 58%, the copy on near-black below it (no text over the bright rig) */
  .page-partners .pt-cta__screen { background: var(--nacht); }
  .page-partners .pt-cta__screen .screen__media { bottom: 42%; }
  .page-partners .pt-cta__screen .screen__fx {
    background: linear-gradient(to top, var(--nacht) 0%, var(--nacht) 43%, rgba(7, 7, 10, .35) 62%, rgba(7, 7, 10, 0) 80%), var(--vignet);
  }
}

/* ---- Phones: client pick ronde 8 · 4C (2026-10-17) — the photo as a band, the title under it, then the two
   choices as cards (VIP-tafel with the red action, Partner worden with the outline action) ---- */
.page-partners .pt-choices { display: none; }
@media (max-width: 767.98px) {
  .page-partners .pt-hero .screen--hero { height: auto; min-height: 0; aspect-ratio: auto; overflow: hidden; }
  .page-partners .pt-hero .screen--hero .screen__media,
  .page-partners .pt-hero .screen--hero .screen__fx { inset: 0 0 auto 0; height: 220px; }
  .page-partners .pt-hero .screen--hero .screen__fx { background: linear-gradient(to bottom, rgba(7, 7, 10, 0) 30%, var(--nacht) 100%); }
  .page-partners .pt-hero .screen--hero { background: var(--nacht); }
  .page-partners .pt-hero .screen__overlay { position: relative; inset: auto; padding: 150px 16px 20px; }
  .page-partners .pt-hero .label { display: none; }
  .page-partners .pt-hero__title { font-size: 52px; }
  .page-partners .pt-hero__ctas { display: none; }
  .page-partners .pt-choices { display: grid; gap: 12px; margin-top: 18px; width: 100%; }
  .page-partners .pt-choice { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: var(--zaal); box-shadow: inset 0 0 0 1px rgba(241, 238, 232, .15); }
  .page-partners .pt-choice--vip { box-shadow: inset 0 0 0 1px rgba(234, 0, 23, .6); }
  .page-partners .pt-choice__t { margin: 0; font: 800 26px / 1 var(--font-display); text-transform: uppercase; color: var(--bot); }
  .page-partners .pt-choice__d { margin: 0; font-size: 14px; line-height: 1.4; color: #C8C5CD; }
  .page-partners .pt-choice .btn { width: 100%; justify-content: center; margin-top: 4px; }
  .page-partners .pt-hero .screen__pause { top: 168px; bottom: auto; }
}
