/* AP Magazine, publieke site. Kleuren en letters uit "Automotive Partner - Huisstijl marketing.md".
   Namen volgen hoofdstuk 9 van "Automotive Partner - Magazine taxonomie.md".
   Versie 1.0, 1 oktober 2026. */

:root {
  --mag-kop: #0B2A5B;
  --mag-tekst: #3D4756;
  --mag-bijschrift: #627087;
  --mag-knop: #1B4DE4;
  --mag-accent: #0048C9;
  --mag-donker: #0C1F3F;
  --mag-lichtblauw: #E7EEFA;
  --mag-lichtgrijs: #F5F7FB;
  --mag-lijn: rgba(11, 42, 91, .12);
  --mag-wit: #FFFFFF;
  --mag-max: 1720px;
  --mag-zij: clamp(20px, 4vw, 48px);
}

.mag-pagina { background: var(--mag-wit); color: var(--mag-tekst); font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.mag-pagina a { color: var(--mag-accent); }
.mag-pagina main a, .mag-pagina main a:hover { border-bottom: 0; }  /* de site zet standaard een lijn onder elke link */
.mag-wrap { max-width: var(--mag-max); margin: 0 auto; padding-left: var(--mag-zij); padding-right: var(--mag-zij); }
.mag-binnen { max-width: 1200px; margin: 0 auto; }

/* ---------- Paginakop (overzicht) ---------- */
.mag-paginakop { padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); }
.mag-label { display: inline-block; padding: 8px 14px; border: 1px solid var(--mag-lijn); border-radius: 3px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--mag-kop); background: var(--mag-wit); }
.mag-paginakop h1 { margin: 20px 0 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--mag-kop); }
.mag-paginakop p { margin: 16px 0 0; max-width: 60ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; }

/* ---------- Zoeken en filteren ---------- */
.mag-zoekbalk { display: none; flex-direction: column; gap: 14px; margin: clamp(24px, 3vw, 40px) 0 0; }
.mag-zoekbalk[data-actief] { display: flex; }
.mag-zoek { position: relative; max-width: 520px; }
.mag-zoek svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--mag-bijschrift); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mag-zoek input { width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px 0 46px; border: 1px solid rgba(11, 42, 91, .25); border-radius: 10px; font: inherit; font-size: 16px; color: var(--mag-kop); background: var(--mag-wit); }
.mag-zoek input::placeholder { color: var(--mag-bijschrift); }
.mag-zoek input:focus { outline: none; border-color: var(--mag-kop); box-shadow: 0 0 0 3px rgba(27, 77, 228, .15); }
.mag-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.mag-filter button { height: 42px; padding: 0 16px; border: 1px solid rgba(11, 42, 91, .2); border-radius: 10px; background: var(--mag-wit); color: var(--mag-kop); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mag-filter button[aria-pressed="true"] { background: var(--mag-kop); border-color: var(--mag-kop); color: var(--mag-wit); }
.mag-filter button:focus-visible { outline: 3px solid rgba(27, 77, 228, .35); outline-offset: 2px; }
.mag-leeg { display: none; margin: 32px 0 0; font-size: 16px; color: var(--mag-tekst); }
.mag-leeg[data-actief] { display: block; }
.mag-leeg a { font-weight: 600; }

/* ---------- Tegels ---------- */
.mag-rooster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) 32px; margin: clamp(32px, 4vw, 56px) 0 0; }
.mag-tegel { display: grid; grid-template-rows: auto 1fr; gap: 16px; text-decoration: none; color: inherit; }
.mag-tegel[hidden] { display: none; }
.mag-tegel__beeld { aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--mag-lichtgrijs); }
.mag-tegel__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mag-tegel:hover .mag-tegel__beeld img { transform: scale(1.03); }
.mag-tegel__tekst { display: flex; flex-direction: column; gap: 8px; }
.mag-rubriek { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mag-accent); }
.mag-tegel h2, .mag-tegel h3 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--mag-kop); }
.mag-tegel:hover h2, .mag-tegel:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mag-tegel p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--mag-tekst); }
.mag-gast { font-size: 15px; font-weight: 600; color: var(--mag-kop); }
.mag-meta { font-size: 14px; color: var(--mag-bijschrift); }
.mag-tegel--uitgelicht { grid-column: span 2; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.mag-tegel--uitgelicht h2 { font-size: clamp(26px, 2.6vw, 36px); }
.mag-tegel--uitgelicht p { font-size: 17px; }
.mag-tegel--uitgelicht .mag-rubriek { margin-top: 4px; }
.mag-tegel--uitgelicht:only-child { grid-column: 1 / -1; grid-template-columns: 7fr 5fr; gap: 48px; }  /* staat de tegel alleen, dan de volle breedte */

/* ---------- Uitnodiging ---------- */
.mag-uitnodiging { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; margin: clamp(48px, 6vw, 80px) 0 clamp(48px, 6vw, 80px); padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3.5vw, 56px); border-radius: 14px; background: var(--mag-lichtblauw); }
.mag-uitnodiging h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--mag-kop); max-width: 22ch; }
.mag-uitnodiging__actie { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mag-knop { display: inline-block; padding: 15px 28px; border-radius: 10px; background: var(--mag-knop); color: var(--mag-wit) !important; font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.mag-knop:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(27, 77, 228, .25); }
.mag-voorwaarde { font-size: 13px; color: var(--mag-bijschrift); }
.mag-uitnodiging--smal { display: block; margin: 40px 0; padding: 16px 20px; border-radius: 10px; background: var(--mag-lichtgrijs); font-size: 15px; line-height: 1.5; color: var(--mag-tekst); }
.mag-uitnodiging--smal a { font-weight: 700; }

/* ---------- Artikelpagina ---------- */
.mag-kruimel { padding: 24px 0 0; font-size: 14px; color: var(--mag-bijschrift); }
.mag-kruimel a { color: var(--mag-accent); }
.mag-kruimel span { margin: 0 8px; }
.mag-kop { max-width: 820px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) 0 0; }
.mag-kop h1 { margin: 10px 0 0; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; color: var(--mag-kop); }
.mag-ondertitel { margin: 18px 0 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--mag-tekst); }
.mag-kop__meta { margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--mag-lijn); display: flex; flex-direction: column; gap: 4px; }
.mag-hoofdbeeld { margin: clamp(28px, 4vw, 48px) 0 0; border-radius: 14px; overflow: hidden; background: var(--mag-lichtgrijs); aspect-ratio: 8 / 5; }
.mag-hoofdbeeld img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mag-tekst { max-width: 740px; margin: 0 auto; padding: clamp(32px, 4vw, 56px) 0 0; font-size: 18px; line-height: 1.65; }
.mag-tekst > p { margin: 0 0 1.25em; }
.mag-tekst h2 { margin: 2em 0 .6em; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--mag-kop); }
.mag-lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--mag-kop); }
.mag-kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mag-accent); margin-bottom: 10px; }
.mag-bron { display: block; font-size: 14px; color: var(--mag-bijschrift); margin-top: 10px; }

.mag-tekst figure { margin: 2em 0; }
.mag-tekst figure img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--mag-lichtgrijs); }
.mag-tekst figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--mag-bijschrift); }
.mag-tekst .mag-breed { margin-left: calc(50% - 50vw + var(--mag-zij)); margin-right: calc(50% - 50vw + var(--mag-zij)); }
@media (min-width: 1300px) { .mag-tekst .mag-breed { margin-left: -230px; margin-right: -230px; } }
.mag-foto-quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.mag-foto-quote blockquote { margin: 0; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; font-weight: 600; color: var(--mag-kop); }

.mag-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 2em 0; padding: 24px; border-radius: 12px; background: var(--mag-lichtgrijs); }
.mag-cijfer { display: flex; flex-direction: column; gap: 6px; }
.mag-cijfer__getal { font-size: clamp(28px, 2.6vw, 40px); line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--mag-kop); }
.mag-cijfer__label { font-size: 14px; line-height: 1.4; color: var(--mag-tekst); }

.mag-kader { margin: 2em 0; padding: 20px 24px; border-left: 3px solid var(--mag-accent); background: var(--mag-lichtgrijs); border-radius: 0 10px 10px 0; }
.mag-kader p { margin: 0; font-size: 17px; }

.mag-quote { margin: 2.5em 0; padding: 28px 0; border-top: 1px solid var(--mag-lijn); border-bottom: 1px solid var(--mag-lijn); }
.mag-quote p { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: var(--mag-kop); }
.mag-quote footer { margin-top: 12px; font-size: 14px; color: var(--mag-bijschrift); }
.mag-quote--klein p { font-size: clamp(19px, 1.6vw, 22px); }
.mag-quote--groot p { font-size: clamp(24px, 2.4vw, 32px); }

.mag-keuzes { margin: 1.5em 0 2em; display: grid; gap: 0; border-top: 1px solid var(--mag-lijn); }
.mag-keuzes > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--mag-lijn); font-size: 16px; }
.mag-keuzes dt { color: var(--mag-bijschrift); }
.mag-keuzes dd { margin: 0; font-weight: 600; color: var(--mag-kop); }

.mag-kort { margin: 2.5em 0; padding: 24px 28px; border-radius: 12px; background: var(--mag-lichtblauw); }
.mag-kort ul { margin: 0; padding: 0 0 0 1.2em; font-size: 16px; line-height: 1.55; }
.mag-kort li { margin: 6px 0; }

.mag-galerij { margin: 2.5em 0; }
.mag-galerij__rooster { display: grid; grid-template-columns: 3fr 2fr 2fr 3fr; gap: 12px; }
.mag-galerij__rooster img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--mag-lichtgrijs); }

.mag-rubriekuitleg { margin: 2.5em 0 0; padding-top: 24px; border-top: 1px solid var(--mag-lijn); font-size: 15px; line-height: 1.55; color: var(--mag-bijschrift); }

.mag-trefwoorden { max-width: 740px; margin: 0 auto; padding: 24px 0 clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.mag-trefwoorden strong { color: var(--mag-tekst); font-weight: 600; }
.mag-trefwoorden a { color: var(--mag-bijschrift); text-decoration: underline; text-underline-offset: 3px; }

.mag-ook-lezen { max-width: 1200px; margin: 0 auto; padding: 0 0 clamp(40px, 5vw, 72px); }
.mag-ook-lezen h2 { margin: 0 0 24px; font-size: 24px; font-weight: 700; color: var(--mag-kop); }
.mag-ook-lezen .mag-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.mag-ook-lezen[hidden] { display: none; }

/* ---------- Schermbreedtes ---------- */
@media (max-width: 1023px) {
  .mag-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-tegel--uitgelicht { grid-column: span 2; }
  .mag-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-galerij__rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-tekst .mag-breed { margin-left: 0; margin-right: 0; }
}
@media (max-width: 767px) {
  .mag-rooster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mag-tegel--uitgelicht, .mag-tegel--uitgelicht:only-child { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mag-tegel--uitgelicht h2 { font-size: 26px; }
  .mag-uitnodiging { grid-template-columns: minmax(0, 1fr); }
  .mag-foto-quote { grid-template-columns: minmax(0, 1fr); }
  .mag-tekst { font-size: 17px; }
  .mag-keuzes > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mag-ook-lezen .mag-rooster { grid-template-columns: minmax(0, 1fr); }
  .mag-hoofdbeeld { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mag-tegel__beeld img, .mag-knop { transition: none; }
}