/* ============================================================
   CROTONA — Event route
   Transport options + adres-blok (LOC-01, v2.9 phase 13).
   2-col grid desktop, 1-col mobile. Mobile-first.
   ============================================================ */

.cr-ev-route {
  background: var(--crotona-cream);
  color: var(--crotona-ink);
  padding: 80px 24px;
}

/* 1-col mobile, 2-col desktop */
.cr-ev-route__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cr-ev-route__left {
  flex: 1;
}

/* ------------------------------------------------------------------
   Route items list
   ------------------------------------------------------------------ */

.cr-ev-route__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Single transport row */
.cr-ev-route__item {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr;
  gap: 16px;
  align-items: center;
  background: rgb(251, 246, 232); /* cream-deep / #fbf6e8 */
  border: 2.5px solid var(--crotona-ink);
  box-shadow: 5px 5px 0 var(--crotona-ink);
  padding: 16px 20px;
}

/* Mode-label - paste-up eyebrow met dot-prefix in accent-kleur (POLISH-06, v2.10) */
.cr-ev-route__mode-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--crotona-ink);
  line-height: 1.2;
  white-space: nowrap;
}

/* Visuele dot-prefix - middle-dot glyph, accent-kleur per item via item-modifier */
.cr-ev-route__mode-label::before {
  content: "\B7"; /* middle-dot, consistent met section-tape eyebrows */
  font-size: 1.4em;
  line-height: 1;
  color: var(--crotona-ink); /* fallback - per-item override hieronder */
}

/* Per-item accent-kleur op de dot - cycle bolt/sky/blush/lilac */
.cr-ev-route__item--bolt  .cr-ev-route__mode-label::before { color: var(--crotona-bolt); }
.cr-ev-route__item--sky   .cr-ev-route__mode-label::before { color: var(--crotona-sky); }
.cr-ev-route__item--blush .cr-ev-route__mode-label::before { color: var(--crotona-blush); }
.cr-ev-route__item--lilac .cr-ev-route__mode-label::before { color: var(--crotona-lilac); }

/* Description text */
.cr-ev-route__description {
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  margin: 0;
}

/* ------------------------------------------------------------------
   Adres-blok - vervangt het oude SVG-kaartje (LOC-01, v2.9 phase 13).
   Paste-up consistent: harde border, solid offset shadow, geen rounded corners.
   ------------------------------------------------------------------ */

.cr-ev-route__address-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5);
  background: var(--crotona-cream);
  border: 3px solid var(--crotona-ink);
  box-shadow: 6px 6px 0 var(--crotona-ink);
  border-radius: 0;
  align-self: flex-start;
}

.cr-ev-route__venue {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--crotona-ink);
  margin: 0;
}

.cr-ev-route__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--crotona-ink);
}

.cr-ev-route__address-line {
  display: block;
}

.cr-ev-route__maps-link {
  align-self: flex-start;
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 8px 14px;
  background: var(--crotona-bolt);
  color: var(--crotona-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2.5px solid var(--crotona-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--crotona-ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.cr-ev-route__maps-link:hover,
.cr-ev-route__maps-link:focus-visible {
  color: var(--crotona-ink);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--crotona-ink);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .cr-ev-route__maps-link { transition: none; }
}

/* ------------------------------------------------------------------
   Responsive: mobile only (max-width: 767px)
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
  /* Reduce section padding on mobile */
  .cr-ev-route {
    padding: 60px 20px;
  }

  /* Smaller inner gap on mobile */
  .cr-ev-route__inner {
    gap: 32px;
  }

  /* Route items: tighter layout */
  .cr-ev-route__items {
    gap: 12px;
  }

  /* Mode label + description in tighter row */
  .cr-ev-route__item {
    grid-template-columns: minmax(64px, auto) 1fr;
    padding: 12px 14px;
  }

  .cr-ev-route__mode-label {
    font-size: 11px;
  }
}

/* ------------------------------------------------------------------
   Responsive: desktop (min-width: 1024px)
   ------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .cr-ev-route {
    padding: 120px 56px;
  }

  .cr-ev-route__inner {
    flex-direction: row;
    gap: 64px;
    align-items: flex-start;
  }

  .cr-ev-route__left {
    flex: 1;
  }

  .cr-ev-route__address-card {
    flex: 0 1 360px;
  }
}