/* ============================================================
   FEATURE-PAGINA — de composities van het paginatype (BOUWGIDS §5.11)
   Gepromoveerd uit pages/event-management-software.css zodra er een
   tweede gebruiker was (BOUWGIDS §2, wet 5). Nu gedeeld door
   /event-management-software, /offertes-maken, /agenda-en-zalen,
   /arrangementen, /statistiek-en-inzicht, /meertalig en /multi-property.

   De gedeelde EMS-composities (kruimelpad, split-rijen, card-stack,
   features-grid, demo, FAQ, marge-knop, oplossingen-switcher) staan in
   pages/ems-gedeeld.css en worden dáárvóór geladen. Hier staat wat het
   páginatype maakt: de video-hero, de resultaten-band met quicklinks,
   het gecentreerde tab-element, het premium-blok op inkt,
   "In goed gezelschap" en de uitgelichte feature.

   Prefix: ems- (paginatype-breed, niet paginagebonden).
   Iets dat maar op één pagina hoort → in die pagina's eigen CSS.
   ============================================================ */

/* =========================================================
   1. HERO — full-bleed achtergrondfilm, tekst links op een
   aflopende zwarte scrim (zelfde opzet als de sales-agent-hero,
   maar links uitgelijnd en met bulletpoints i.p.v. sterren).
   ========================================================= */
.ems-hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-on-dark);
  isolation: isolate;
}
.ems-hero-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.ems-hero-media video,
.ems-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}
/* Aflopende scrim: donker links (draagt de tekst), zachter naar rechts,
   plus een verloop van onderaf. Zo haalt witte tekst overal ≥ 4,5:1.
   De film is een schermopname van Constell en dus overwegend wít; de
   scrim is daarom dieper dan bij een sfeerfilm. Op de rechterrand van
   de H1 (55% van het venster) blijft ≈6:1 over. */
.ems-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 9, 14, 0.94) 0%, rgba(9, 9, 14, 0.84) 34%, rgba(9, 9, 14, 0.56) 60%, rgba(9, 9, 14, 0.16) 100%),
    linear-gradient(0deg, rgba(9, 9, 14, 0.72) 0%, rgba(9, 9, 14, 0.12) 40%, rgba(9, 9, 14, 0) 64%);
}
.ems-hero-inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(5rem, 13vh, 8.5rem);
}
.ems-hero-tekst { max-width: 42rem; }
.ems-hero-label {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: var(--fs-eyebrow); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-on-dark);
  margin-bottom: var(--sp-5);
}
.ems-hero-label svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--c-orange); }
.ems-hero h1 {
  font-size: var(--fs-display);
  line-height: 1.04;
  color: #fff;
  text-wrap: balance;
  margin-bottom: var(--sp-6);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
/* Bulletpoints i.p.v. de sterretjes van het origineel: dezelfde
   .em-bullets uit het designsysteem, alleen krijtwit op inkt. */
.ems-hero .em-bullets { gap: var(--sp-4); }
.ems-hero .em-bullets li { font-size: var(--fs-lead); }
.ems-hero .em-bullets li::before { background: var(--c-on-dark); margin-top: 0.62em; }

/* =========================================================
   2. RESULTATEN + QUICKLINKS (steen) — klimt over de hero heen
   Links twee grote tellende stat-ringen, rechts vijf snelkoppelingen
   naar de belangrijkste functies verderop op de pagina.
   Het origineel liet deze band níet netjes ónder de hero beginnen: de
   ringen stonden op xl:-mt-[190px] en de knoppen op xl:-mt-[138px],
   dus de inhoud klom over de onderrand van het herobeeld heen. Dat is
   hier hetzelfde, maar in tokens: --ems-klim-ring / --ems-klim-quick
   zeggen hoevéél van het element boven de bandgrens uitsteekt
   (ongeveer de helft van zijn eigen hoogte).
   ========================================================= */
.ems-resultaten-band {
  /* De opgeklommen inhoud moet over de hero geschilderd worden, niet
     erachter: de hero is door isolation:isolate een eigen laag. */
  position: relative;
  z-index: 2;
}
.ems-resultaten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.ems-stats { max-width: 34rem; margin-inline: auto; gap: clamp(1.5rem, 4vw, 3rem); }
/* Fors groter dan de standaardring van 128px: dit is het eerste bewijs
   van de pagina en het origineel zette hem op 200px. */
.ems-stats .stat-ring { width: clamp(8.5rem, 15vw, 13rem); height: clamp(8.5rem, 15vw, 13rem); font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
/* Stat-ring op een lichte band: donkere baan + inkt-schijf achter het
   cijfer, zoals het origineel. De voortgangsring blijft lavendel. */
.ems-stats .stat-ring:has(svg)::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: var(--c-ink);
}
.ems-stats .stat-ring:has(svg) circle { stroke-width: 8; }
.ems-stats .stat-ring:has(svg) .ring-track { stroke: var(--c-ink); }
.ems-stats .stat-ring:has(svg) .ring-num { position: relative; color: var(--c-on-dark); }
.ems-stats .stat .stat-sub { opacity: 1; color: var(--c-ink-soft); }

.ems-quick { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.ems-quick a {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 68px;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-tile);
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 500;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ems-quick a:hover { transform: translateX(3px); box-shadow: var(--shadow-card); }
.ems-quick img { width: 26px; height: 26px; flex: 0 0 auto; object-fit: contain; }

/* De klim zelf. Alleen op schermen waar de band naast de hero-tekst past;
   daaronder staat de tekst óp de film en zou de band de kop overlopen.
   De negatieve marge is de sectiepadding (waarmee we tot aan de bandgrens
   komen) plús het stuk dat boven die grens uitsteekt. */
@media (min-width: 1024px) {
  .ems-resultaten-band {
    --ems-klim-ring: clamp(3.5rem, 7vw, 6.5rem);   /* ~half de ringhoogte */
    --ems-klim-quick: 2.25rem;                     /* ~half een quicklink */
  }
  .ems-resultaten { align-items: start; }
  .ems-stats { margin-top: calc(-1 * (var(--section-y) + var(--ems-klim-ring))); }
  .ems-quick { margin-top: calc(-1 * (var(--section-y) + var(--ems-klim-quick))); }
}

/* =========================================================
   3. EVENT MANAGEMENT — tabs + browserframe (zachtwit)
   Het element van het origineel: kop gecentreerd met het icoon
   links ervan op dezelfde regel en even hoog als de kop,
   daaronder de subtitel, de vier tabknoppen en het frame.
   ========================================================= */
.ems-tabblok .ems-tab-kop { text-align: center; margin-bottom: var(--sp-7); }
.ems-tab-titel {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  font-size: var(--fs-h2);            /* draagt de icoonhoogte */
  margin-bottom: var(--sp-3);
}
/* "Even groot als de kop": het icoon volgt de kopmaat via 1em. */
.ems-tab-titel img { height: 0.82em; width: auto; flex: 0 0 auto; }
.ems-tab-titel h2 { margin: 0; }
.ems-tabblok .ems-tab-kop .lead { margin: 0 auto; max-width: 40rem; }
/* De band is zachtwit; een inactieve tab in --c-surface-soft zou daarin
   wegvallen. Steen maakt het onderscheid dat het origineel had:
   actief wit, de rest grijs. */
.ems-tabblok .em-tabs .tab { background: var(--c-bg-shade); min-width: 11.25rem; }
.ems-tabblok .em-tabs .tab[aria-selected="true"] { background: var(--c-surface); }
/* Het frame houdt de breedte die het origineel gaf (max-w-957): breder
   getrokken worden de screenshots zichtbaar zacht. De vérhouding
   (--em-frame-ar) hoort bij de bronbeelden en staat dus in de CSS van
   de pagina zelf — anders snijdt object-fit:cover een kolom weg. */
.ems-tabblok .em-frame-wrap { width: min(60rem, 100% - 3rem); }
@media (max-width: 560px) {
  .ems-tabblok .em-tabs .tab { min-width: 0; flex: 1 1 45%; }
}

/* =========================================================
   4. PREMIUM FEATURE — marge op inkt
   Tekst links, de draaiende marge-knop rechts (i.p.v. het
   statische beeld van het origineel).
   ========================================================= */
.ems-premium {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 29rem);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.ems-premium-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-on-dark);
  border: 1px solid rgba(244, 244, 245, 0.28);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.95rem;
  margin-bottom: var(--sp-6);
}
/* Ster wit, niet oranje: op de zwarte band draagt de diamant hier het merk,
   niet het accent. Het enige accent van deze band is de marge-waarde. */
.ems-premium-badge svg { width: 11px; height: 19px; flex: 0 0 auto; color: #fff; }
.ems-premium h2 { margin-bottom: var(--sp-5); }
.ems-premium .lead { max-width: 38rem; }
/* Geen paneel om de marge-visual: de illustratie staat vrij op de zwarte
   band (review Jorn 02-08). De PNG's zijn transparant, dus dat kan. */
.ems-marge-paneel { text-align: center; }
/* Zonder paneel eromheen mag de knop groter: hij draagt nu zelf de
   rechterhelft van de band, zoals het beeld in het origineel. */
.ems-marge-paneel .marge { margin: 0 auto; max-width: 29rem; }
/* Avondzon-diep is voor lichte ondergronden; op inkt is dat te donker.
   Daar hoort de volle Avondzon (DESIGN §3.1). */
.ems-marge-paneel .marge-waarde { color: var(--c-orange); }

/* Variant voor pagina's waar de premium feature geen illustratie maar een
   PRODUCTSCHERM is. Een screenshot is rechthoekig en heeft een lichte
   achtergrond; vrij op zwart zou hij als een uitgeknipte rechthoek zweven.
   Daarom hier wél een kader: dezelfde radius als .media-frame plus een
   krijtwitte haarlijn, zodat de rand van het scherm bedoeld lijkt. */
.ems-premium-scherm {
  border-radius: var(--r-media);
  overflow: hidden;
  border: 1px solid rgba(244, 244, 245, 0.16);
  box-shadow: var(--shadow-pop);
  background: var(--c-surface);
}
.ems-premium-scherm img { display: block; width: 100%; height: auto; }

/* =========================================================
   4. IN GOED GEZELSCHAP (inkt)
   Links kop + venue-raster, rechts het aantal locaties en de logo's.
   ========================================================= */
.ems-gezelschap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
}
/* Het venue-raster is hoger dan de logo-kolom; die staat daarom gecentreerd,
   zoals het origineel de rechterkolom liet zakken. */
.ems-gezelschap > div:last-child { align-self: center; }
.ems-gz-kop { margin-bottom: var(--sp-2); }
/* Transparanter dan de kop — dat is wat deze band premium maakt. Het
   origineel zette hem op white/50; 0,5 op krijtwit haalt nog 7,4:1. */
.ems-gz-sub { color: var(--c-on-dark); opacity: 0.5; margin-bottom: var(--sp-7); }
.ems-venue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.ems-venue-grid img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: var(--r-tile);
  transition: transform 500ms var(--ease), filter 500ms var(--ease);
}
.ems-venue-grid a:hover img,
.ems-venue-grid a:focus-visible img { transform: scale(1.06); filter: brightness(1.12); }
.ems-gz-actie { margin-top: var(--sp-7); }
.ems-gz-stat { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-8); }
/* De ster is zwart; wat je ziet is de witte gloed eromheen die rustig
   ademt (zoals het origineel: glow-pulse, 3s). Reduced motion houdt de
   gloed staan maar zet de beweging uit. */
.ems-gz-stat .em-diamond { color: #000; flex: 0 0 auto; animation: ems-ster-gloed 3s ease-in-out infinite; }
@keyframes ems-ster-gloed {
  0%, 100% { filter: drop-shadow(0 0 29px rgba(255, 255, 255, 0.7)); }
  50%      { filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.25)); }
}
.ems-gz-stat h3 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; margin-bottom: var(--sp-2); color: #fff; }
.ems-gz-stat p { margin: 0; font-size: var(--fs-lead); color: var(--c-on-dark); }
.ems-gz-logos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-7) var(--sp-6); align-items: center;
}
/* Groter dan de eerste opzet (72px): het origineel gaf de logo's 108px
   en dat is wat het bewijs draagt. */
.ems-gz-logos img {
  max-height: 108px; max-width: 100%; width: auto; margin-inline: auto; display: block;
  opacity: 0.85;
  transition: opacity var(--t-fast) var(--ease);
}
.ems-gz-logos img:hover { opacity: 1; }

/* =========================================================
   5. UITGELICHTE FEATURE — volledig mobielvriendelijk (nevel)
   ========================================================= */
.ems-uitgelicht { text-align: center; }
.ems-uitgelicht .badge { background: var(--c-orange-wash); margin-bottom: var(--sp-6); }
.ems-uitgelicht h2 { margin-bottom: var(--sp-4); }
.ems-uitgelicht .lead { max-width: 40rem; margin-inline: auto; }
.ems-uitgelicht-beeld { margin-top: var(--sp-8); display: grid; place-items: center; }
.ems-uitgelicht-beeld img { width: 100%; max-width: 40rem; height: auto; }
/* Is het uitgelichte beeld een PRODUCTSCHERM in plaats van een illustratie,
   dan mag het ruimer: op 40rem is de UI in de schermafdruk niet meer te
   lezen. Met kader, zodat de rand van het scherm bedoeld lijkt. */
.ems-uitgelicht--scherm .ems-uitgelicht-beeld img {
  max-width: 54rem;
  border-radius: var(--r-media);
  box-shadow: var(--shadow-card);
}

/* =========================================================
   6. GOLF-FEATUREGRID — twee beeldmaten voor "Meer features"

   --emicoon  : kaarten met een vrijstaande EM-illustratie op ware grootte
                (/images/em-illustraties/ + de zes originelen in /images/).
                Dit is de standaard voor een feature-pagina.
   --lijnicoon: kaarten met een dun lijn-icoon uit /ds/em-icons/ — dezelfde
                set als de quicklinks in de statband en de tegels van de
                oplossingen-switcher. Alleen nog als noodgreep: de
                EM-illustratie is de bedoelde beeldtaal (BOUWGIDS §5.11).
   ========================================================= */
/* De kop van deze band begint met een gevulde badge-pill; die leest als een
   zwaar blok en plakte met alleen de sectiepadding tegen de visual van de
   band erboven. Deze aanloop hoort bij het paginatype, niet bij één pagina. */
.em-features-head { margin-top: clamp(var(--sp-6), 4vw, var(--sp-8)); }
/* ...en de pill zat mét 0px tegen de kop aan: de <h2> heeft geen eigen
   bovenmarge en .badge geen ondermarge, dus raakten de twee dozen elkaar en
   was de enige witruimte de halve regelafstand (3px). De twee andere
   badge-koppen van dit paginatype (.ems-premium-badge, .ems-uitgelicht .badge)
   dragen allebei al --sp-6; deze was de uitzondering. */
.em-features-head .badge { margin-bottom: var(--sp-6); }
.em-fgrid--emicoon .em-fcard { min-height: 19rem; background: var(--c-surface); }
.em-fgrid--emicoon .em-fc-beeld { flex: 0 0 auto; align-items: flex-start; min-height: 8rem; padding-bottom: var(--sp-2); }
/* Elk icoon houdt zijn eigen verhouding en ware grootte; alleen de
   hoogte is begrensd zodat de zes koppen op één lijn beginnen. */
.em-fgrid--emicoon .em-fc-beeld img { height: auto; width: auto; max-height: 6.75rem; max-width: 100%; object-fit: contain; }
/* Lijn-iconen zijn dun en klein; die krijgen een eigen maat zodat ze
   niet als postzegel in een kaart van 19rem hangen. */
.em-fgrid--lijnicoon .em-fc-beeld { min-height: 5.5rem; }
.em-fgrid--lijnicoon .em-fc-beeld img { height: 3.25rem; max-height: none; }

/* =========================================================
   7. Responsief
   ========================================================= */
/* Het tab-element van de nieuwe feature-pagina's: de schermen komen uit
   dezelfde bron (1420×764) en het icoon naast de kop is een lijn-icoon uit
   /ds/em-icons/, dat dunner is dan de getekende illustratie op
   /event-management-software en daarom iets kleiner mag staan. */
.ems-tabblok .em-frame-scherm { --em-frame-ar: 1420 / 764; }
.ems-tab-titel img[src*="/em-icons/"] { height: 0.72em; }

@media (max-width: 1000px) {
  .ems-resultaten,
  .ems-premium,
  .ems-gezelschap { grid-template-columns: 1fr; }
  .ems-premium-scherm { max-width: 32rem; margin-inline: auto; }
  .ems-stats { max-width: none; }
  /* width:100% is nodig: met alleen margin-inline:auto valt het paneel terug
     op shrink-to-fit en klapt de marge-knop (width:100%) naar 0. */
  .ems-marge-paneel { width: 100%; max-width: 22rem; margin-inline: auto; }
  .ems-gz-logos { gap: var(--sp-6) var(--sp-5); }
}
@media (max-width: 720px) {
  .ems-hero { min-height: 0; }
  /* Op smal scherm staat de tekst óp de film: de scrim moet dan over de
     volle hoogte dekken, niet alleen aan de linkerkant. */
  .ems-hero-scrim {
    background:
      linear-gradient(180deg, rgba(9, 9, 14, 0.72) 0%, rgba(9, 9, 14, 0.86) 45%, rgba(9, 9, 14, 0.94) 100%);
  }
  .ems-hero-inner { padding-block: clamp(3.5rem, 12vh, 5.5rem); }
  /* De twee ringen blijven naast elkaar staan, zoals op het origineel. */
  .ems-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .ems-gz-logos { grid-template-columns: repeat(3, 1fr); }
  .ems-gz-logos img { max-height: 56px; }
  .ems-gz-stat { gap: var(--sp-4); }
}
@media (max-width: 520px) {
  .ems-venue-grid { gap: var(--sp-2); }
  .ems-gz-logos { grid-template-columns: repeat(2, 1fr); }
}

/* Reduced motion: geen zwevende hover-schaal, geen bewegende film.
   De ster houdt zijn witte gloed — die is de zichtbare eindstand —
   maar ademt niet meer. */
@media (prefers-reduced-motion: reduce) {
  .ems-venue-grid img,
  .ems-quick a { transition: none; }
  .ems-gz-stat .em-diamond {
    animation: none;
    filter: drop-shadow(0 0 29px rgba(255, 255, 255, 0.7));
  }
}

/* Knop tussen de lead en het beeld in de uitgelichte band (gebruikt waar die
   sectie naar een andere pagina verwijst, zoals /multi-property → proces). */
.ems-uitgelicht-actie { margin-top: var(--sp-6); }