/* Replikate Coworking — pagina-specifieke stijlen (variant A: editorial light hero)
 * Laadt na colors_and_type.css + shared.css. Bevat alleen wat uniek is voor
 * deze landingspagina; de gedeelde surface-stijlen leven in shared.css.
 */

/* ---- editorial light hero ---- */
.a-hero { padding: 56px 0 96px; }
.a-hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center;
}
.a-hero-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 5.4vw, 76px); line-height: 1.16;
  letter-spacing: -0.02em; margin: 22px 0 0; color: var(--fg-1);
}
.a-hero-title em { font-style: italic; }
.a-hero-lead { font-size: 20px; line-height: 1.6; color: var(--fg-2); margin: 22px 0 0; max-width: 46ch; }
.a-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.a-hero-meta {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border-1);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--fg-2);
  display: flex; gap: 22px; flex-wrap: wrap;
}
.a-hero-meta span { color: var(--accent); }
.a-hero-media { position: relative; }
.a-hero-tag {
  position: absolute; left: -18px; bottom: 26px; z-index: 2;
  background: var(--accent); color: #fff; padding: 12px 18px; border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; box-shadow: var(--shadow-lg);
}
.a-facts { border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); }

/* ---- media-frames ----
 * .cw-media (uit shared.css) levert de rand, ronding en 4/3-ratio. Hier alleen
 * de afwijkende ratio's/kleuren per plek. De hero staat portret, de buren-foto
 * zit op een donkere band.
 */
.cw-media--hero { aspect-ratio: 3/4; }
.cw-media--dark { border-color: var(--rk-ink-700); background: var(--rk-ink-800); }
.cw-media--dark .cw-ph {
  color: rgba(255,255,255,0.55);
  background: repeating-linear-gradient(45deg,
    var(--rk-ink-800), var(--rk-ink-800) 14px,
    var(--rk-ink-700), var(--rk-ink-700) 28px);
}
.cw-media--dark .cw-ph svg { stroke: rgba(255,255,255,0.5); }

@media (max-width: 920px) {
  .a-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .cw-media--hero { aspect-ratio: 16/10; }
  .a-hero-tag { left: 18px; }
}