/* =========================================================
   GLOB IT — Masterclass "Internet zonder risico's"
   Enkel geladen op de 3 masterclasspagina's (NL/FR/EN), NA style.css.
   Bevat uitsluitend wat style.css nog niet heeft (selecteerbare optiekaarten,
   ticketkeuze, telefoonvoorbeeld). Alle kleuren, fonts, radii en schaduwen
   komen uit de bestaande variabelen in style.css — geen nieuwe waarden.
   ========================================================= */

/* ---------- Hero: kerngegevens + telefoonvoorbeeld ---------- */
.mc-facts{ display:flex; flex-wrap:wrap; gap:14px 28px; margin:0 0 30px; }
.mc-facts .contact-row{ margin:0; align-items:center; }
.mc-facts .contact-row span:not(.ico){ font-size:.92rem; color:var(--color-heading); }
.mc-facts .contact-row strong{ font-size:.8rem; color:var(--color-muted); font-weight:600; }
.mc-facts.mc-reg-info{ margin:0 0 22px; padding-bottom:22px; border-bottom:1px solid var(--color-line); }

.mc-stage{
  background:var(--color-tint); border-radius:var(--radius-lg);
  aspect-ratio:6/5; display:grid; place-items:center; padding:32px;
}
.mc-phone{
  width:min(300px,100%); background:var(--color-surface);
  border:8px solid var(--color-heading); border-radius:34px;
  padding:24px 16px 20px; display:grid; gap:12px; box-shadow:var(--shadow-lg);
}
.mc-phone p{ margin:0; }
.mc-phone-who{ font-size:.78rem; font-weight:600; color:var(--color-muted); text-align:center; }
.mc-bubble{
  background:var(--color-surface-alt); border:1px solid var(--color-line);
  border-radius:16px 16px 16px 4px; padding:12px; font-size:.88rem; line-height:1.45; color:var(--color-heading);
}
.mc-flag{
  justify-self:center; display:inline-flex; align-items:center; gap:8px;
  background:var(--color-heading); color:#fff; font-weight:800; font-size:.82rem; letter-spacing:.08em;
  padding:8px 14px; border-radius:999px; transform:rotate(-4deg);
}
.mc-flag svg{ width:14px; height:14px; }

/* ---------- Wat je leert: 4 kolommen (value-grid heeft er standaard 5) ---------- */
.value-grid.mc-learn-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:28px; }

/* ---------- Tickets ---------- */
.mc-prices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; max-width:760px; margin:0 auto; }
/* Optiekaarten zijn <button>s (gekoppeld aan de keuze in het formulier) */
.mc-price{ font:inherit; color:inherit; width:100%; text-align:center; align-items:center; cursor:pointer; }
.mc-price .mc-amount, .mc-price .card-sub{ display:block; }
.mc-price.is-selected{ border:2px solid var(--color-primary); box-shadow:var(--shadow-md); }
.mc-price:focus-visible{ outline:3px solid var(--color-accent); outline-offset:3px; }
.mc-price .eyebrow-tag{ text-transform:uppercase; letter-spacing:.1em; }
.mc-price .mc-amount{ font-family:var(--font-heading); font-weight:800; font-size:2.4rem; line-height:1; color:var(--color-heading); margin:4px 0 12px; font-variant-numeric:tabular-nums; }
.mc-price .card-sub{ margin:0; }
.mc-note{ text-align:center; color:var(--color-muted); max-width:640px; margin:30px auto 0; }

/* ---------- Inschrijfformulier ---------- */
.mc-form-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.mc-optional{ font-weight:400; color:var(--color-muted); }
.mc-fieldset{ border:0; padding:0; margin:0 0 16px; min-width:0; }
.mc-fieldset legend{ font-size:.84rem; font-weight:700; color:var(--color-heading); padding:0; margin-bottom:7px; }
.mc-choices{ display:flex; flex-wrap:wrap; gap:10px; }
.mc-choice{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--color-line);
  border-radius:9px; padding:10px 14px; font-size:.92rem; font-weight:600; color:var(--color-heading); cursor:pointer;
  transition:border-color .2s var(--ease);
}
.mc-choice:hover, .mc-choice.is-selected, .mc-choice:has(input:checked){ border-color:var(--color-primary); }
.mc-choice.is-selected{ background:var(--color-tint); }
.mc-choice input, .mc-consent input{ accent-color:var(--color-primary); margin:0; }
.form-group.mc-duo[hidden]{ display:none; }
.mc-consent{ display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color:var(--color-body); margin:4px 0 18px; cursor:pointer; }
.mc-consent input{ margin-top:4px; flex:none; }
.mc-choice input:focus-visible, .mc-consent input:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .value-grid.mc-learn-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-media .mc-stage{ aspect-ratio:auto; }
}
@media (max-width:760px){
  .mc-prices{ grid-template-columns:1fr; }
  .mc-facts{ flex-direction:column; gap:12px; }
}
@media (max-width:520px){
  .value-grid.mc-learn-grid, .mc-form-row{ grid-template-columns:1fr; }
}