/* ============================================================
   LIFTMEDIA — pilot.css
   ------------------------------------------------------------
   Extra styles for the Werfstraat pilot pages (werfstraat.html,
   nl/werfstraat.html) and the updated home band.
   Loaded AFTER style.css and only uses its tokens, so it never
   touches the rest of the site. Delete this file + its <link>
   after the pilot and nothing else changes.

   1. Pilot tokens
   2. Fact row
   3. Spots counter
   4. Hive wall mockup
   5. Pilot card (home band)
   6. Responsive
   ============================================================ */


/* ============================================================
   1. PILOT TOKENS
   ============================================================ */
:root {
  --amber:      #e8b33a;   /* the printed ZEG LIFT band        */
  --steel-dark: #4a5157;   /* lift wall                        */
  --steel-mid:  #6d757c;
  --steel-lite: #878f96;

  /* Hive size: one knob. Every tile measure derives from it. */
  --hex-w:   clamp(66px, 19vw, 128px);
  --hex-h:   calc(var(--hex-w) * 1.1547);
  --hex-gap: 6px;
}


/* ============================================================
   2. FACT ROW (360 woningen / 3 liften / 10 plekken)
   ============================================================ */
.fact-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
  max-width: 820px;
}

.fact {
  border-top: 2px solid var(--orange);
  padding-top: var(--space-2);
}

.fact-number {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--on-dark);
  line-height: 1.1;
}

.fact p {
  color: var(--on-dark-soft);
  font-size: 0.95rem;
  margin-top: 0.3rem;
}


/* ============================================================
   3. SPOTS COUNTER
   Update the number in the HTML by hand — it's quoted in the
   follow-up emails, so it must always be the true count.
   ============================================================ */
.spots {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  margin-bottom: var(--space-3);
  font-size: 0.95rem;
  color: var(--on-dark);
}

.spots strong {
  font-family: var(--font-display);
  color: var(--orange);
  font-size: 1.1rem;
}


/* ============================================================
   4. HIVE WALL MOCKUP
   4–3–4 honeycomb = 10 partner tiles + the LiftMedia tile in the
   middle. Pointy-top hexes, same clip-path as .hex in style.css.
   ============================================================ */
.wall {
  background:
    linear-gradient(100deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(180deg, var(--steel-lite), var(--steel-dark));
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.hive-row {
  display: flex;
  gap: var(--hex-gap);
}

/* rows interlock: pull each row up by a quarter hex height */
.hive-row + .hive-row {
  margin-top: calc(var(--hex-h) * -0.25 + var(--hex-gap) * 0.866);
}

.tile {
  position: relative;
  width: var(--hex-w);
  height: var(--hex-h);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* padding in hex units (a % here would be relative to the row, not the tile) */
  padding: 0 calc(var(--hex-w) * 0.1) calc(var(--hex-h) * 0.3);
  color: #fff;
  background: var(--tile-bg, var(--navy-soft));
}

.tile-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--hex-w) * 0.13);
  line-height: 1.1;
}

.tile-offer {
  font-size: calc(var(--hex-w) * 0.085);
  line-height: 1.25;
  margin-top: 0.25em;
  opacity: 0.92;
}

/* the fixed amber band printed at the bottom of every tile */
.tile-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--hex-w) * 0.075);
  line-height: 1;
  padding: 0.45em 0;
}

.tile-band small {
  font-weight: 500;
}

/* example palette — deliberately muted so no tile reads as a real brand */
.tile--a { --tile-bg: #2f6f62; }
.tile--b { --tile-bg: #8a4b3c; }
.tile--c { --tile-bg: #3c5a8a; }
.tile--d { --tile-bg: #6b5a2e; }
.tile--e { --tile-bg: #5b3f6e; }
.tile--f { --tile-bg: #2e5e76; }
.tile--g { --tile-bg: #7a3a52; }
.tile--h { --tile-bg: #4d6b35; }
.tile--i { --tile-bg: #3d4a5c; }
.tile--j { --tile-bg: #8a6230; }

/* the LiftMedia tile in the centre: survey QR + rule explainer */
.tile--lm {
  --tile-bg: var(--navy);
  padding-bottom: calc(var(--hex-h) * 0.08);   /* no band on this tile */
}

.tile--lm .tile-name {
  color: var(--orange);
}

.tile-qr {
  width: calc(var(--hex-w) * 0.3);
  aspect-ratio: 1;
  background:
    repeating-linear-gradient(90deg, #fff 0 12%, transparent 12% 24%),
    repeating-linear-gradient(0deg, #fff 0 12%, transparent 12% 24%);
  opacity: 0.85;
  border: 2px solid #fff;
  margin-bottom: 0.3em;
}

.wall-caption {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
}


/* ============================================================
   5. PILOT CARD (replaces the pioneer card in the home band)
   ============================================================ */
.pilot-card {
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-4);
}

.pilot-card h3 {
  font-size: 1.4rem;
  margin-bottom: var(--space-1);
}

.pilot-card p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}

.pilot-card .btn--ghost {
  border-color: rgba(255, 255, 255, 0.7);
}


/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .fact-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* four-step variant of .steps-grid (style.css has 3 columns) */
.steps-grid--four {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 860px) {
  .steps-grid--four {
    grid-template-columns: 1fr;
  }
}