/* Audirium Academy — landingspagina voor een gratis werkbestand.
   Bouwt op consumer.css (dezelfde variabelen als de rest van de publieke kant), zodat
   licht/donker en een huisstijlwijziging vanzelf meekomen. */

.mg-wrap { max-width: 980px; margin: 0 auto; padding: 0 1rem 4rem; }

.mg-kop { padding: 2.2rem 0 1.6rem; }
.mg-tag {
  display: inline-block; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: .2rem .6rem; border-radius: 999px; margin-bottom: .9rem;
}
.mg-kop h1 {
  font-family: var(--serif); font-size: 2.05rem; line-height: 1.2; font-weight: 600;
  color: var(--ink); margin: 0 0 .4rem;
}
.mg-sub { color: var(--stone); font-size: 1.05rem; margin: 0; }

.mg-cols { display: grid; gap: 2rem; grid-template-columns: 1.25fr 1fr; align-items: start; }
@media (max-width: 800px) { .mg-cols { grid-template-columns: 1fr; } }

.mg-belofte { font-size: 1.02rem; line-height: 1.7; color: var(--ink); margin: 0 0 1.2rem; }
.mg-lijst { margin: 0 0 1.4rem; padding-left: 0; list-style: none; }
.mg-lijst li {
  position: relative; padding-left: 1.5rem; margin: .5rem 0; color: var(--ink); font-size: .96rem;
}
.mg-lijst li::before {
  content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.mg-bron {
  font-size: .86rem; color: var(--stone); line-height: 1.6; border-left: 2px solid var(--mist);
  padding-left: .9rem; margin: 0;
}

/* ── Het formulier ── */
.mg-form {
  background: var(--surface); border: 1px solid var(--mist); border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.2rem; position: sticky; top: 1.2rem;
}
@media (max-width: 800px) { .mg-form { position: static; } }
.mg-form h2 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 .3rem; color: var(--ink); }
.mg-hint { font-size: .88rem; color: var(--stone); margin: 0 0 1.1rem; }
.mg-form label {
  display: block; font-size: .84rem; color: var(--ink); margin: .8rem 0 .28rem; font-weight: 600;
}
.mg-form label span { color: var(--stone); font-weight: 400; }
.mg-form input[type=text], .mg-form input[type=email] {
  width: 100%; padding: .6em .75em; border: 1px solid var(--mist); border-radius: var(--radius);
  font-size: .96rem; font-family: inherit; background: var(--paper); color: var(--ink);
}
.mg-form input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
                        outline-offset: 1px; }
.mg-check {
  display: flex; gap: .55rem; align-items: flex-start; font-weight: 400 !important;
  font-size: .87rem !important; color: var(--stone) !important; margin: 1rem 0 1.1rem !important;
}
.mg-check input { margin-top: .18rem; flex: none; }
.mg-form .btn { width: 100%; }
.mg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mg-msg { font-size: .88rem; margin: .8rem 0 0; min-height: 1.2em; }
.mg-msg.ok { color: var(--good); }
.mg-msg.err { color: var(--accent); }
.mg-avg { font-size: .78rem; color: var(--stone); margin: .9rem 0 0; text-align: center; }

/* ── Andere bestanden ── */
.mg-meer { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--mist); }
.mg-meer h2 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 .9rem; color: var(--ink); }
.mg-andere { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mg-kaart {
  display: block; border: 1px solid var(--mist); border-radius: var(--radius); padding: .9rem 1rem;
  text-decoration: none; background: var(--surface); transition: border-color .15s ease;
}
.mg-kaart:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mg-kaart b { display: block; color: var(--ink); font-size: .96rem; margin-bottom: .2rem; }
.mg-kaart span { color: var(--stone); font-size: .85rem; }
.mg-cursus { margin: 1.4rem 0 0; color: var(--stone); font-size: .93rem; }
.mg-cursus a { color: var(--accent); }