/* Emma: haar paneel, haar beelden en haar zin. Hoort bij /assets/js/emma.js.
   Stond tot 21 september 2026 in het stijlblok van de homepage; zij staat nu op meer dan één pagina. */

/* Het paneel staat op leespagina's binnen .doc, en daar zet juridisch.css de tekstkleur op donkere inkt. Die selector
   (.doc p) is specifieker dan een losse klasse, dus alles in het paneel zou donker op donkergroen komen te staan.
   Daarom staan de kleuren hier onder .hero-emma. Gemeten op 21 september 2026: contrast 1,34:1. */
.hero-emma { color: #F2EFE6; }
.hero-emma p, .hero-emma span, .hero-emma li { color: inherit; }
.hero-emma .ai-quote { color: #F2EFE6; }
.hero-emma .emma-nb { color: #93A79B; }
.hero-emma .emma-luister { color: #F2EFE6; }

/* De zin die Emma uitspreekt. */
.ai-quote {
  font-family: var(--font-editorial); font-style: italic; font-weight: 450;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.4; color: #F2EFE6;
  border-left: 2px solid #C9A96A; padding-left: 22px; margin: 32px 0;
}

/* EMMA: drie beelden die elkaar afwisselen (rust, knipperen, praten). De achtergrond van de beelden is
   precies #0E3B2E, dezelfde kleur als het paneel, dus ze staat vrij in het vlak zonder zichtbare rand. */
.emma-blok {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 34px; align-items: center;
  margin-top: 46px; padding-top: 34px; border-top: 1px solid rgba(201, 169, 106, 0.35);
}
/* Op een telefoon staat ze boven haar zin: naast elkaar wordt de tekstkolom te smal om te lezen. */
@media (max-width: 700px) {
  .emma-blok { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; padding-top: 26px; justify-items: center; }
  .emma-blok .emma { width: 150px; }
  .emma-woord { width: 100%; }
}
.emma {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%;
  background: #0E3B2E; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; border: 0; padding: 0; display: block;
}
.emma::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 106, 0.4);
}
.emma:focus-visible { outline: 3px solid #C9A96A; outline-offset: 4px; }
.emma-beeld { position: absolute; inset: 0; will-change: transform; }
.emma img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; opacity: 0;
}
.emma img.aan { opacity: 1; }
.emma-woord .ai-quote { margin-top: 0; }
.emma-schuif { position: relative; display: block; }
.emma-schim { visibility: hidden; }
.emma-tekst { position: absolute; inset: 0; }
.emma-cursor {
  display: inline-block; width: 2px; height: 1em; translate: 0 0.14em;
  background: #C9A96A; animation: emmaKnip 1s steps(1) infinite;
}
@keyframes emmaKnip { 50% { opacity: 0; } }
.emma-cursor[hidden] { display: none; }
.emma-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: -14px; }
.emma-luister {
  display: inline-flex; align-items: center; gap: 9px; font: inherit; font-size: 0.9rem; font-weight: 500;
  color: #F2EFE6; background: rgba(201, 169, 106, 0.14); border: 1px solid rgba(201, 169, 106, 0.5);
  border-radius: 999px; padding: 9px 18px 9px 14px; cursor: pointer;
  transition: transform 110ms ease-out, background 140ms ease-out;
}
.emma-luister:hover { background: rgba(201, 169, 106, 0.24); }
.emma-luister:active { transform: scale(0.97); }
.emma-luister:focus-visible { outline: 3px solid #C9A96A; outline-offset: 2px; }
.emma-luister svg { width: 15px; height: 15px; display: block; fill: #C9A96A; }
.emma-nb { font-size: 0.82rem; color: #93A79B; margin: 10px 0 0; }

/* EMMA IN DE HERO. Zij was het sluitstuk van fase 2, halverwege de pagina; daar zag bijna niemand haar. Nu is zij
   het eerste wat naast de belofte staat: haar gezicht, haar zin, en de knop om haar te laten bellen. */
.hero-emma { background: #0E3B2E; border-radius: var(--r-xl); padding: 30px 32px 32px; color: #F2EFE6; box-shadow: var(--shadow-float); }
.hero-emma .emma-blok { margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: 148px minmax(0, 1fr); gap: 26px; align-items: start; }
.hero-emma .ai-quote { font-size: clamp(1.02rem, 1.5vw, 1.2rem); margin: 2px 0 16px; padding-left: 16px; }
.hero-emma .emma-regel { margin-top: 0; }
.hero-emma .hero-emma-knop { background: #C9A96A; color: #17201B !important; margin-top: 18px; }
.hero-emma .hero-emma-knop:hover { background: #D6B87C; }
.hero-emma .hero-emma-knop:focus-visible { outline: 3px solid #C9A96A; outline-offset: 2px; }
.hero-emma .emma-nb { margin-top: 12px; }
@media (max-width: 920px) { .hero-emma .emma-blok { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; } }
@media (max-width: 560px) {
  .hero-emma { padding: 24px 22px 26px; }
  .hero-emma .emma-blok { grid-template-columns: 1fr; justify-items: start; }
  .hero-emma .emma-blok .emma { width: 110px; }
  .hero-emma .hero-emma-knop { width: 100%; }
}