/* ============================================================
   AP Magazine — artikel (?ap_page=magazine-<slug>) + overzicht (?ap_page=magazine)
   Artikel 1-op-1 volgens OPDRACHT — Webpagina Magazine-artikel. Alle maten px.
   Tokens: Inter, accent #1B4DE4, navy #0C1F3F, tekst #3A4A63 / #26364F / #8B99AE.
   Wrapper .ap-mag = <div> (geen <section>) → geen white-space:pre-wrap-valkuil.
   ============================================================ */

.ap-mag{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; white-space:normal; color:#0C1F3F; line-height:1.6; max-width:none !important; }
.ap-mag, .ap-mag *{ box-sizing:border-box; }
.ap-mag *{ white-space:normal; }
.ap-mag img{ max-width:100% !important; height:auto; display:block; }
.ap-mag a{ color:#1B4DE4; }

/* Contentgebied full-bleed maken (hero + donkere blokken edge-to-edge), bg #F5F7FB.
   GEEN margin zetten → sidebar-offset (margin-left) blijft intact. */
.ap-content:has(.ap-mag){ background:#F5F7FB !important; max-width:none !important; padding:0 !important; }

/* ============================ HERO ============================ */
.ap-mag-hero{ position:relative; width:100%; aspect-ratio:21/9; overflow:hidden; background:#0A1524; }
.ap-mag-hero__img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; }
.ap-mag-hero__scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,17,33,.88) 0%, rgba(8,17,33,.35) 55%, rgba(8,17,33,.05) 100%); }
.ap-mag-hero__tekst{ position:absolute; left:0; right:0; bottom:0; padding:0 5% 38px; text-shadow:0 2px 20px rgba(6,14,30,.6); }
.ap-mag-hero__kicker{ display:block; font-size:12px !important; font-weight:600 !important; letter-spacing:.16em; text-transform:uppercase; color:#9CC0FF !important; margin:0 0 12px; }
.ap-mag-hero__titel{ font-size:44px !important; font-weight:600 !important; letter-spacing:-.03em; line-height:1.02 !important; color:#fff !important; margin:0 0 16px; }
.ap-mag-hero__intro{ max-width:56ch; font-size:15px !important; font-weight:400 !important; line-height:1.55 !important; color:#C3D3EC !important; margin:0; }

/* ============================ CONTENTKOLOM ============================ */
.ap-mag-content{ display:flex; flex-direction:column; gap:26px; padding:36px 0 70px; width:100%; }
/* Directe kinderen staan binnen 980px met zijpadding; brede foto's + donkere blokken breken eruit. */
.ap-mag-content > *{ max-width:980px; width:100%; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; }
.ap-mag-content > .ap-mag-breed, .ap-mag-content > .ap-mag-donker, .ap-mag-content > .ap-mag-tip{ max-width:none; padding-left:0; padding-right:0; }

/* Metadatarij */
.ap-mag-metarij{ display:flex; gap:32px; flex-wrap:wrap; border-bottom:1px solid #E7EBF2; padding-bottom:24px; }
.ap-mag-metaitem{ display:flex; flex-direction:column; gap:5px; }
.ap-mag-metaitem__label{ font-size:10px !important; font-weight:600 !important; letter-spacing:.1em; text-transform:uppercase; color:#8B99AE !important; }
.ap-mag-metaitem__waarde{ font-size:13.5px !important; font-weight:550 !important; color:#0C1F3F !important; }

/* Tekst */
.ap-mag-blok{ display:block; }
.ap-mag p{ font-size:14px !important; font-weight:400 !important; line-height:1.75 !important; color:#3A4A63 !important; margin:0 0 16px; }
.ap-mag p:last-child{ margin-bottom:0; }
.ap-mag p strong{ font-weight:600 !important; color:#0C1F3F !important; }
.ap-mag-intro{ font-size:17px !important; font-weight:450 !important; line-height:1.6 !important; color:#26364F !important; }

/* Sectiekoppen */
.ap-mag-kop{ font-size:23px !important; font-weight:600 !important; letter-spacing:-.024em; line-height:1.2 !important; color:#0C1F3F !important; margin:0 0 16px; }
.ap-mag-nr{ color:#1B4DE4 !important; font-weight:600 !important; }

/* Tweekoloms tekstblok */
.ap-mag-textcols{ column-count:2; column-gap:36px; column-fill:balance; }
.ap-mag-textcols p:first-child{ margin-top:0; }

/* Blok "De eerste verkoop" */
.ap-mag-cols{ display:grid; grid-template-columns:1fr 1fr; border:1px solid #E7EBF2; border-radius:14px; overflow:hidden; background:#fff; }
.ap-mag-cols__foto{ position:relative; min-height:360px; }
.ap-mag-cols__foto img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; object-position:center 20%; }
.ap-mag-cols__quote{ padding:26px 24px; display:flex; flex-direction:column; justify-content:center; }
.ap-mag-cols__kicker{ font-size:9.5px !important; font-weight:600 !important; letter-spacing:.14em; text-transform:uppercase; color:#1B4DE4 !important; margin:0 0 12px; }
.ap-mag-cols__quote blockquote{ margin:0; font-size:18px !important; font-weight:500 !important; line-height:1.4 !important; color:#0C1F3F !important; }
.ap-mag-cols__bron{ font-size:11px !important; font-weight:400 !important; color:#6B7A93 !important; margin:12px 0 0; line-height:1.5; }

/* Statistiekenrij */
.ap-mag-stats{ display:grid; grid-template-columns:repeat(4,1fr); }
.ap-mag-stat{ padding:18px 18px; box-shadow:0 0 0 1px #EEF1F7; display:flex; flex-direction:column; gap:7px; }
.ap-mag-stat__num{ font-size:24px !important; font-weight:600 !important; line-height:1 !important; letter-spacing:-.02em; color:#0C1F3F !important; }
.ap-mag-stat__label{ font-size:10.5px !important; font-weight:400 !important; line-height:1.4 !important; color:#6B7A93 !important; }

/* Brede foto's tussen secties */
.ap-mag-breed img{ width:100% !important; aspect-ratio:16/7; object-fit:cover; }
.ap-mag-breed--2 img{ aspect-ratio:16/6.5; }
.ap-mag-breed figcaption{ max-width:980px; margin:12px auto 0; padding:0 32px; font-size:11px !important; color:#8B99AE !important; line-height:1.5; }

/* Sectie 02/03 — spread */
.ap-mag-quotecols{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.ap-mag-quotecols__kol > *:first-child{ margin-top:0; }
.ap-mag-quoteklein{ margin:6px 0 0; padding:0 0 0 18px; border-left:3px solid #1B4DE4; font-size:14px !important; font-weight:500 !important; line-height:1.55 !important; color:#26364F !important; }
.ap-mag-quoteklein__kicker{ display:block; font-size:9.5px !important; font-weight:600 !important; letter-spacing:.14em; text-transform:uppercase; color:#1B4DE4 !important; margin:0 0 8px; }
.ap-mag-mini{ margin:20px 0 0; }
.ap-mag-mini img{ width:100% !important; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.ap-mag-mini figcaption{ font-size:11px !important; color:#8B99AE !important; margin:10px 0 0; line-height:1.5; }
.ap-mag-quoteuit{ margin:0 0 18px; font-size:19px !important; font-weight:500 !important; line-height:1.4 !important; letter-spacing:-.01em; color:#0C1F3F !important; }
.ap-mag-quoteuit--vol{ margin:8px 0 22px; padding:0 0 0 20px; border-left:3px solid #1B4DE4; }
.ap-mag-vierkant{ margin:0 0 18px; }
.ap-mag-vierkant img{ width:100% !important; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }

/* Donkerblauwe quoteblokken (full-bleed) */
.ap-mag-donker{ position:relative; overflow:hidden; width:100%; padding:44px 5%; background:linear-gradient(115deg,#0B2447 0%,#102F5E 58%,#0D2750 100%); }
.ap-mag-donker--klein{ padding:40px 5%; }
.ap-mag-donker::before{ content:""; position:absolute; top:-40%; right:-5%; width:520px; height:520px; background:radial-gradient(circle, rgba(60,110,220,.28) 0%, rgba(60,110,220,0) 62%); pointer-events:none; }
.ap-mag-donker__icon{ position:absolute; top:50%; right:4%; transform:translateY(-50%); width:190px !important; height:190px !important; object-fit:contain; opacity:.14; pointer-events:none; }
.ap-mag-donker__inner{ position:relative; z-index:1; max-width:980px; margin:0 auto; }
.ap-mag-donker blockquote{ margin:0; max-width:27ch; font-size:25px !important; font-weight:500 !important; line-height:1.35 !important; letter-spacing:-.01em; color:#fff !important; }
.ap-mag-donker--klein blockquote{ font-size:23px !important; }
.ap-mag-donker__bron{ display:block; font-size:11px !important; font-weight:400 !important; color:#A9BDDD !important; margin:14px 0 0; line-height:1.5; }

/* Donkere tipkaart */
.ap-mag-tip{ position:relative; overflow:hidden; width:100%; padding:44px 5%; background:linear-gradient(115deg,#0B2447 0%,#102F5E 58%,#0D2750 100%); }
.ap-mag-tip::before{ content:""; position:absolute; top:-40%; right:-5%; width:520px; height:520px; background:radial-gradient(circle, rgba(60,110,220,.28) 0%, rgba(60,110,220,0) 62%); pointer-events:none; }
.ap-mag-tip__icon{ position:absolute; top:50%; right:4%; transform:translateY(-50%); width:190px !important; height:190px !important; object-fit:contain; opacity:.14; pointer-events:none; }
.ap-mag-tip__inner{ position:relative; z-index:1; max-width:980px; margin:0 auto; }
.ap-mag-tip__label{ display:block; font-size:9.5px !important; font-weight:600 !important; letter-spacing:.14em; text-transform:uppercase; color:#7FA0DA !important; margin:0 0 14px; }
.ap-mag-tip blockquote{ margin:0; max-width:24ch; font-size:23px !important; font-weight:500 !important; line-height:1.35 !important; color:#fff !important; }

/* "In het kort" */
.ap-mag-kort{ display:grid; grid-template-columns:120px 1fr; gap:6px 18px; padding:20px 22px; border-radius:14px; border:1px solid #E7EBF2; background:#FBFCFE; }
.ap-mag-kort__label{ font-size:9.5px !important; font-weight:600 !important; letter-spacing:.12em; text-transform:uppercase; color:#8B99AE !important; padding-top:3px; }
.ap-mag-kort ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ap-mag-kort li{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px !important; font-weight:400 !important; line-height:1.5 !important; color:#26364F !important; }
.ap-mag-kort li i{ flex:0 0 auto; font-size:14px; color:#2FA96B; transform:translateY(2px); }

/* Fotogrid */
.ap-mag-gallerykop{ display:block; font-size:9.5px !important; font-weight:600 !important; letter-spacing:.14em; text-transform:uppercase; color:#8B99AE !important; }
.ap-mag-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ap-mag-gallery img{ width:100% !important; aspect-ratio:1; object-fit:cover; border-radius:12px; }

/* Snelle keuzes */
.ap-mag-keuzes{ display:flex; flex-direction:column; }
.ap-mag-keuze{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:13px 0; border-top:1px solid #EEF1F7; }
.ap-mag-keuze:last-child{ border-bottom:1px solid #EEF1F7; }
.ap-mag-keuze__v{ font-size:12px !important; font-weight:400 !important; color:#93A2B8 !important; }
.ap-mag-keuze__a{ font-size:13px !important; font-weight:600 !important; color:#0C1F3F !important; text-align:right; }

/* Voetregel */
.ap-mag-voet{ display:flex; align-items:flex-start; gap:12px; border-top:1px solid #E7EBF2; padding-top:20px; }
.ap-mag-voet__icon{ width:24px !important; height:24px !important; object-fit:contain; flex:0 0 auto; filter:brightness(0); opacity:.5; }
.ap-mag-voet p{ font-size:11px !important; font-weight:400 !important; line-height:1.6 !important; color:#8B99AE !important; margin:0; }
.ap-mag-voet em{ font-style:italic; color:#6B7A93 !important; }
.ap-mag-voet a{ color:#1B4DE4; font-weight:500 !important; }

/* ============================ DOWNLOAD-PDF-KNOP (header) ============================ */
a.ap-mag-pdf{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:9px; border:1px solid #DDE3ED; background:#fff !important; font-size:12.5px !important; font-weight:550 !important; color:#0C1F3F !important; text-decoration:none; white-space:nowrap; transition:border-color .15s, background .15s; }
a.ap-mag-pdf:hover{ border-color:#1B4DE4; background:#F5F8FF !important; }
a.ap-mag-pdf i{ font-size:14px; color:#1B4DE4; }

/* ============================ OVERZICHTSPAGINA ============================ */
.ap-mag-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin:22px 0 0; }
.ap-mag-card{ display:flex; flex-direction:column; overflow:hidden; border-radius:16px; border:1px solid #E7EBF2; background:#fff; text-decoration:none; box-shadow:0 1px 1px rgba(16,35,64,.03), 0 10px 26px -22px rgba(16,35,64,.5); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.ap-mag-card:hover{ transform:translateY(-3px); border-color:#C9D8FB; }
.ap-mag-card__cover{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0C1F3F; }
.ap-mag-card__cover img{ width:100% !important; height:100% !important; object-fit:cover; }
.ap-mag-card__editie{ position:absolute; top:12px; left:12px; z-index:1; padding:4px 10px; border-radius:999px; background:rgba(12,31,63,.82); font-size:11px !important; font-weight:600 !important; color:#fff !important; }
.ap-mag-card__body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; }
.ap-mag-card__kicker{ font-size:11px !important; font-weight:600 !important; letter-spacing:.14em; text-transform:uppercase; color:#1B4DE4 !important; margin:0; }
.ap-mag-card__naam{ font-size:20px !important; font-weight:600 !important; line-height:1.15 !important; letter-spacing:-.02em; color:#0C1F3F !important; margin:0; }
.ap-mag-card__sub{ font-size:13px !important; font-weight:400 !important; line-height:1.55 !important; color:#6B7A93 !important; margin:2px 0 0; }
.ap-mag-card__voet{ display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:12px !important; font-weight:500 !important; color:#8B99AE !important; }
.ap-mag-card__lees{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#1B4DE4 !important; font-weight:600 !important; }
.ap-mag-leeg{ font-size:14px !important; color:#6B7A93 !important; margin:22px 0 0; }

/* ============================ MOBIEL ============================ */
@media (max-width:720px){
	.ap-mag-hero{ aspect-ratio:4/5; }
	.ap-mag-hero__titel{ font-size:32px !important; }
	.ap-mag-content{ padding:26px 0 54px; gap:22px; }
	.ap-mag-content > *{ padding-left:20px; padding-right:20px; }
	main .ap-mag-cols{ grid-template-columns:1fr !important; }
	.ap-mag-cols__foto{ min-height:240px; }
	main .ap-mag-quotecols{ grid-template-columns:1fr !important; }
	main .ap-mag-stats{ grid-template-columns:repeat(2,1fr) !important; }
	main .ap-mag-gallery{ grid-template-columns:repeat(2,1fr) !important; }
	main .ap-mag-textcols{ column-count:1 !important; }
	.ap-mag-donker blockquote{ font-size:21px !important; }
	.ap-mag-tip blockquote{ font-size:20px !important; }
}