/* overtake.nl/cupra/ — CUPRA VZ Performance campaign.

   Loads after koeriers.css and reuses all of its lp-* components: header,
   hero grid, USP strip, cards, steps, FAQ, form, footer, sticky bar. Only
   what that page never needed lives here: the running/ended switch, the
   slashed price, the date track, the rules and the call bar. */

/* ==========================================================================
   Running or ended — data-actie is set on <html> by acties.js before first
   paint. Only hiding rules, never showing ones: a "show" rule would have to
   guess each element's display value and would get some of them wrong.
   ========================================================================== */

[data-actie="afgelopen"] [data-only="lopend"],
html:not([data-actie="afgelopen"]) [data-only="afgelopen"] { display: none !important; }


/* ==========================================================================
   Prices. The slashed old price is .ot-was in site.css, shared with the
   homepage card; only the sizes are set here.
   ========================================================================== */

/* Hero price row */
.cu-heroprice {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  border-top: 1px solid var(--ot-grey-900); padding-top: 18px;
}
.cu-heroprice__from,
.cu-heroprice__unit {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ot-grey-400);
}
.cu-heroprice .ot-was { font-size: 16px; margin-left: 4px; }
.cu-heroprice__now {
  font-family: var(--font-mono); font-weight: 600; line-height: 1;
  font-size: clamp(40px, 4.4vw, 56px); letter-spacing: -0.02em;
  color: var(--ot-chalk);
}

/* Card price: "Van € 828 voor" above the big figure */
.cu-price__was { font-family: var(--font-mono); font-size: 12px; color: #5C645C; }
.cu-price__was .ot-was { font-size: 17px; margin-inline: 2px; }
.cu-card__terms {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #5C645C;
}


/* ==========================================================================
   Photos and their stand-ins. Until cupra-config.js names a WebP, cupra.js
   puts a marked placeholder here on localhost or with ?voorbeeld — and on
   the live site removes the box altogether, so an unfinished page never
   shows "foto volgt" to a customer.
   ========================================================================== */

.cu-hero__media {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 2 / 1; min-height: 220px;
  background: var(--ot-asphalt-raised);
}
.cu-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The photo was chosen for its dark dusk sky; this lets the top edge dissolve
   into the page instead of cutting across it. */
.cu-hero__media:has(img)::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 22%;
  background: linear-gradient(var(--ot-asphalt), transparent);
  pointer-events: none;
}

.cu-card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ot-grey-150);
}
.cu-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cu-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; text-align: center;
  border: 1px dashed var(--ot-grey-700);
}
.cu-ph__tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ot-lime);
}
.cu-ph__text { font-family: var(--font-mono); font-size: 12px; color: var(--ot-grey-400); max-width: 46ch; }
[data-surface="light"] .cu-ph { border-color: #B9BCB0; }
[data-surface="light"] .cu-ph__tag { color: var(--ot-lime-ink); }
[data-surface="light"] .cu-ph__text { color: #5C645C; }


/* ==========================================================================
   The date track — the one memorable thing on this page.

   The offer is defined by a chain of dates: order by the 15th, delivered by
   the 31st, new rules on the 1st. Narrow screens read the chain as a list.
   Wide screens draw it to scale, with today on it, so the shrinking order
   window is something you see rather than a number you are told.
   ========================================================================== */

.cu-track { --rail: var(--ot-grey-900); }

/* --- Narrow: a vertical list on a rail ------------------------------------ */
.cu-track__stops {
  position: relative;
  display: flex; flex-direction: column;
  margin-left: 7px; padding-left: 0;
  border-left: 2px solid var(--rail);
}
.cu-track__stop {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 0 30px 30px;
}
.cu-track__stop:last-child { padding-bottom: 0; }
/* Each stop is marked with a dash, sitting across the rail. */
.cu-track__stop::before {
  content: "";
  position: absolute; left: -9px; top: 10px;
  width: 16px; height: 6px;
  background: var(--ot-grey-600);
  transform: skewX(var(--dash-skew));
}
.cu-track__stop--key::before,
.cu-track__stop--now::before { background: var(--ot-lime); }
.cu-track__stop--end::before { background: var(--ot-chalk); }

.cu-track__date {
  font-family: var(--font-display); font-variation-settings: var(--display-width);
  font-weight: 800; font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.03em; line-height: 1; color: var(--ot-chalk);
}
.cu-track__stop--key .cu-track__date { color: var(--ot-lime); }
.cu-track__what {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ot-grey-400);
}
.cu-track__stop--now .cu-track__date { color: var(--ot-lime); }
.cu-track__stop--now .cu-track__what { color: var(--ot-chalk); }

.cu-track__bar { display: none; }

/* --- Wide: to scale ------------------------------------------------------- */
@media (min-width: 900px) {
  .cu-track {
    position: relative;
    /* Labels hang above and below the rail; the rail sits at --rail-y. */
    --rail-y: 92px;
    height: 200px;
  }
  .cu-track__stops { position: static; margin: 0; border: 0; }

  .cu-track__stop {
    position: absolute;
    left: calc(var(--at, 0) * 100%);
    top: calc(var(--rail-y) + 24px);
    padding: 0; gap: 8px;
    width: max-content; white-space: nowrap;
  }
  /* The marker moves onto the rail; the label hangs below it. */
  .cu-track__stop::before { left: -8px; top: -27px; }

  /* Labels that would run off the right edge, or into a neighbour, hang to
     the left of their point instead. cupra.js sets the flag. */
  .cu-track__stop[data-side="left"] { transform: translateX(-100%); text-align: right; align-items: flex-end; }
  .cu-track__stop[data-side="left"]::before { left: auto; right: -8px; }

  /* Above the rail: today, and the delivery date, which sits a single day
     from the end of the scale and would otherwise collide with it. */
  .cu-track__stop[data-row="above"] { top: auto; bottom: calc(100% - var(--rail-y) + 24px); }
  .cu-track__stop[data-row="above"]::before { top: auto; bottom: -27px; }

  .cu-track__bar {
    display: block;
    position: absolute; left: 0; right: 0; top: calc(var(--rail-y) - 1px);
    height: 2px; background: var(--rail);
  }
  /* The order window: from the start to the last order day. */
  .cu-track__window,
  .cu-track__fill {
    position: absolute; left: 0; top: -3px; height: 8px;
  }
  .cu-track__window { width: calc(var(--einde, 0.7) * 100%); background: var(--ot-grey-700); }
  .cu-track__fill   { width: calc(var(--now, 0) * 100%); background: var(--ot-lime); }
  /* Today: a hairline through the rail. */
  .cu-track__now {
    position: absolute; top: -14px; width: 2px; height: 30px;
    left: calc(var(--now, 0) * 100%); margin-left: -1px;
    background: var(--ot-lime);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 900px) {
    .cu-track[data-ready] .cu-track__fill { animation: cu-fill 900ms cubic-bezier(.2, .7, .2, 1) both; }
    @keyframes cu-fill { from { width: 0; } }
  }
}


/* ==========================================================================
   Spelregels — four named rules. Not numbered: the order carries no
   meaning, the name of each rule does.
   ========================================================================== */

.cu-rules { margin: 0; border-top: 1px solid var(--ot-grey-900); }
.cu-rule {
  display: grid;
  grid-template-columns: minmax(96px, 0.5fr) minmax(0, 3fr);
  gap: 10px clamp(20px, 3vw, 40px);
  align-items: baseline;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--ot-grey-900);
}
.cu-rule__key {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ot-grey-400);
}
.cu-rule__val {
  margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 10px clamp(20px, 3vw, 40px); align-items: baseline;
}
.cu-rule__big {
  font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.035em; line-height: 1;
  color: var(--ot-chalk);
}
.cu-rule:first-child .cu-rule__big { color: var(--ot-lime); }
.cu-rule__text { font-size: 16px; line-height: 1.55; color: var(--ot-grey-300); max-width: 44ch; }

@media (max-width: 760px) {
  .cu-rule, .cu-rule__val { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   Form additions
   ========================================================================== */

.cu-hint { font-size: 13px; line-height: 1.45; color: var(--ot-grey-400); }


/* ==========================================================================
   Call bar — the koeriers sticky bar, with a phone number in front.
   Layout and visibility come from .lp-stickybar in koeriers.css.
   ========================================================================== */

.cu-callbar__tel {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; color: var(--ot-chalk);
}
.cu-callbar__tel svg { color: var(--ot-lime); flex: none; }
.cu-callbar__tel:hover { color: var(--ot-lime); }
.cu-callbar__text { display: flex; flex-direction: column; gap: 2px; }
.cu-callbar__small {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ot-grey-400);
}
.cu-callbar__nr { font-family: var(--font-mono); font-weight: 600; font-size: 15px; white-space: nowrap; }

/* "in plaats van € 815" — the words, not the strike, say it is the old price. */
.cu-heroprice__instead {
  flex-basis: 100%;
  font-family: var(--font-mono); font-size: 13px; color: var(--ot-grey-400);
}

/* The headline is longer than the koeriers one, so a size down — and the
   trim name stays on one line: "CUPRA / VZ Performance.", never
   "CUPRA VZ / Performance.". */
.cu-h1 { font-size: clamp(40px, 5.4vw, 80px); }
.cu-nowrap { white-space: nowrap; }

/* USP strip: "pseudo-eindheffing" must not split at its own hyphen, so it
   is kept whole — which needs about 200px. The koeriers strip lets cells
   find their own width; here the steps are fixed so that word always has
   room: one per row on a phone, two on a tablet, four from 1100px. */
.lp-usp__cell { flex: 1 1 100%; }
@media (min-width: 560px)  { .lp-usp__cell { flex-basis: calc(50% - 1px); } }
@media (min-width: 1100px) { .lp-usp__cell { flex-basis: calc(25% - 1px); } }


/* ==========================================================================
   Waarom nu — two audiences, side by side. Same raised-card language as
   the rest of the page; the tag says who the card is for.
   ========================================================================== */

.cu-who {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.cu-who__card {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--ot-asphalt);
  border: 1px solid var(--ot-grey-900);
}
.cu-who__tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ot-lime);
}
.cu-who__title {
  font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.025em; line-height: 1.1;
  color: var(--ot-chalk); text-wrap: balance;
}
.cu-who__text { font-size: 16px; line-height: 1.6; color: var(--ot-grey-300); max-width: 52ch; }


/* ==========================================================================
   Specificaties in the card, and the FAQ contact links
   ========================================================================== */

/* Cards keep their own height: opening one must not stretch the other. */
.cu-cards { align-items: flex-start; }

.cu-specs { border-top: 1px solid var(--ot-grey-200); margin-top: -4px; }

/* The whole row is the target. A lime tile with + or – and an underlined
   label, so it reads as something to open rather than a caption. */
.cu-specs__toggle {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 16px 0 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: var(--ot-asphalt);
}
.cu-specs__toggle [data-specs-label] {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; text-decoration-color: var(--ot-lime-ink);
}
.cu-specs__toggle:hover [data-specs-label] { text-decoration-thickness: 2px; }
.cu-specs__sign {
  flex: none; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ot-lime); color: var(--ot-asphalt);
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 18px; font-weight: 600; line-height: 1;
}

.cu-specs__panel { display: flex; flex-direction: column; gap: 22px; padding-top: 22px; }
.cu-specs__panel[hidden] { display: none; }
.cu-specs__group { display: flex; flex-direction: column; gap: 8px; }
.cu-specs__label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ot-lime-ink);
}
.cu-specs__rows { margin: 0; border-top: 1px solid var(--ot-grey-200); }
.cu-specs__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--ot-grey-200);
}
.cu-specs__row dt { font-size: 15px; color: var(--ot-grey-600); }
.cu-specs__row dd {
  margin: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--ot-asphalt); text-align: right;
}
.cu-specs__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cu-specs__list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ot-asphalt); }
.cu-specs__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 14px; height: 4px; background: var(--ot-lime-ink); transform: skewX(var(--dash-skew));
}
.cu-specs__note { font-size: 13px; line-height: 1.5; color: #5C645C; }

.cu-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cu-contact .ot-arrowlink { min-height: 44px; }