/* Media Kit-pagina — pixel-getrouwe implementatie van het Claude Design
   "Boekje Open Mediakit". Default-variant: Tijdschrift, speels kleurgebruik,
   gecentreerde hero, handtekening. Alle kleuren uit de huisstijl-tokens;
   lokale aliassen voor de Nederlandse design-namen + de paginabreedtes.
   Alles gescopet onder .mediakit zodat het de site-header/footer niet raakt. */

.mediakit {
    --geel:      var(--yellow);
    --lavendel:  var(--lavender);
    --plum:      var(--plum-soft);   /* design's --plum = theme --plum-soft */
    --ink-soft:  #54504b;            /* design-specifieke warme grijstint */
    --line:      rgba(26, 26, 26, 0.14);
    --maxw:      760px;
    --wide:      980px;
    --accent:    var(--wine);

    background: var(--paper);
    color: var(--ink);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 17.5px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
.mediakit *,
.mediakit *::before,
.mediakit *::after { box-sizing: border-box; }

/* ---------- Type ---------- */
.mediakit .serif { font-family: 'Libre Baskerville', Georgia, serif; }
.mediakit .kicker {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
}

/* ---------- Hero ---------- */
.mediakit .hero {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 96px 28px 18px;
    text-align: center;
}
.mediakit .hero .kicker { color: var(--terracotta); display: block; margin-bottom: 30px; }
.mediakit .wordmark {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(54px, 10.5vw, 120px);
    line-height: 0.98;
    letter-spacing: -0.005em;
    margin-bottom: 30px;
}
.mediakit .wordmark em { font-style: italic; font-weight: 400; color: var(--terracotta); }
.mediakit .lede {
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.62;
    max-width: 600px;
    margin: 0 auto;
    color: var(--ink-soft);
}
.mediakit .rule { height: 1.5px; background: var(--ink); max-width: var(--wide); margin: 54px auto 0; }

/* ---------- Content-breedte ---------- */
.mediakit .content { max-width: var(--maxw); margin: 0 auto; padding: 8px 28px 0; }

/* ---------- Sections (affiche-variant: getinte blokken per accentkleur) ---------- */
.mediakit .sec {
    background: color-mix(in srgb, var(--accent) 12%, var(--paper));
    border-radius: 10px;
    padding: 46px 40px 30px;
    margin-bottom: 22px;
}
.mediakit .idx { display: block; margin-bottom: 16px; }
.mediakit h2 {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(28px, 4.2vw, 42px);
    line-height: 1.14;
    letter-spacing: -0.01em;
    margin-bottom: 26px;
    max-width: 18ch;
}
.mediakit .sec h2 { color: var(--accent); }
.mediakit h2 em { font-style: italic; font-weight: 400; color: var(--accent); }
@media (max-width: 640px) { .mediakit .sec { padding: 36px 24px 22px; } }
.mediakit p { margin-bottom: 20px; max-width: 62ch; }
.mediakit .soft { color: var(--ink-soft); }

/* Accent per sectie */
.mediakit .sec--terracotta { --accent: var(--terracotta); }
.mediakit .sec--lavender   { --accent: var(--lavender-deep); }
.mediakit .sec--wine       { --accent: var(--wine); }
.mediakit .sec--pinkdeep   { --accent: var(--pink-deep); }
.mediakit .sec--plum       { --accent: var(--plum-soft); }
.mediakit .sec--mauve      { --accent: var(--mauve); }

/* ---------- Cijfers ---------- */
.mediakit .figs { display: flex; flex-wrap: wrap; gap: 48px; margin: 28px 0 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.mediakit .fig .fn { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: clamp(34px, 5vw, 46px); line-height: 1; color: var(--accent); }
.mediakit .fig .fl { font-size: 13px; color: var(--ink-soft); margin-top: 10px; max-width: 170px; line-height: 1.45; }

/* ---------- Tarief ---------- */
.mediakit .price { display: flex; flex-wrap: wrap; align-items: center; gap: 38px; margin-top: 16px; padding: 38px 40px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 11%, var(--paper)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.mediakit .price-amt { display: flex; flex-direction: column; line-height: 1; }
.mediakit .price-amt .from { font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: 10px; }
/* padding-left compenseert de optische linker-overhang van het grote €-teken,
   zodat €150 links uitlijnt met het label en de tekst (em = schaalt mee). */
.mediakit .price-amt .amt { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: clamp(58px, 9vw, 86px); color: var(--accent); line-height: 0.88; padding-left: 0.4em; margin-top: 12px; }
.mediakit .price-desc { flex: 1; min-width: 260px; }
.mediakit .price-desc p { margin: 0; color: var(--ink); }
@media (max-width: 560px) {
    /* Stapel €150 en omschrijving onder elkaar (i.p.v. naast elkaar). Met
       min-width:0 vult de omschrijving precies het smalle kader en valt 'ie
       niet over de rechterrand (de standaard min-width:260px zou breder zijn). */
    .mediakit .price { flex-direction: column; align-items: stretch; padding: 30px 26px; gap: 22px; }
    .mediakit .price-desc { min-width: 0; }
}

/* ---------- Partner list ---------- */
.mediakit .partner { border-top: 1px solid var(--line); padding: 28px 0; display: grid; grid-template-columns: 220px 1fr; gap: 10px 40px; }
.mediakit .partner:last-child { border-bottom: 1px solid var(--line); }
.mediakit .partner h3 { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--accent); }
.mediakit .partner ul { list-style: none; font-size: 16px; color: var(--ink-soft); }
.mediakit .partner li { padding-left: 22px; position: relative; margin-bottom: 10px; line-height: 1.5; }
.mediakit .partner li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 2px; background: var(--accent); }
@media (max-width: 640px) { .mediakit .partner { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Formats grid ---------- */
.mediakit .formats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: color-mix(in srgb, var(--accent) 22%, var(--paper)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.mediakit .fmt { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); padding: 26px; }
.mediakit .fmt h4 { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 18px; margin-bottom: 8px; color: var(--accent); }
.mediakit .fmt p { font-size: 15px; color: var(--ink-soft); margin: 0; line-height: 1.55; }
@media (max-width: 640px) { .mediakit .formats { grid-template-columns: 1fr; } }

/* ---------- Pills ---------- */
.mediakit .types { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 8px; }
.mediakit .pill { border: 1.5px solid var(--ink); border-radius: 40px; padding: 9px 19px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.mediakit .pill:nth-child(7n+1) { color: var(--terracotta); border-color: var(--terracotta); }
.mediakit .pill:nth-child(7n+2) { color: var(--wine); border-color: var(--wine); }
.mediakit .pill:nth-child(7n+3) { color: var(--mauve); border-color: var(--mauve); }
.mediakit .pill:nth-child(7n+4) { color: var(--pink-deep); border-color: var(--pink-deep); }
.mediakit .pill:nth-child(7n+5) { color: var(--lavender-deep); border-color: var(--lavender-deep); }
.mediakit .pill:nth-child(7n+6) { color: var(--plum-soft); border-color: var(--plum-soft); }

/* ---------- Contact-afsluiting (design-footer als sectie) ---------- */
.mediakit .mk-contact { background: var(--plum-soft); color: var(--paper); margin-top: 80px; padding: 72px 28px 60px; }
.mediakit .mk-contact .footwrap { max-width: var(--maxw); margin: 0 auto; }
.mediakit .mk-contact .big { font-family: 'Libre Baskerville', serif; font-style: italic; font-weight: 400; font-size: clamp(26px, 4.2vw, 40px); line-height: 1.2; margin-bottom: 38px; color: var(--paper); }
.mediakit .contact-grid { display: flex; gap: 52px; flex-wrap: wrap; }
.mediakit .contact-grid .k { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow); margin-bottom: 8px; font-weight: 600; }
.mediakit .contact-grid .v { font-size: 17px; color: var(--paper); line-height: 1.6; }
.mediakit .contact-grid a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(245, 245, 245, 0.35); }
.mediakit .sign { font-family: 'Allison', cursive; font-size: clamp(64px, 9vw, 96px); line-height: 0.8; color: var(--paper); margin-top: 48px; }

/* ---------- Print ---------- */
@media print {
    .mediakit .sec { break-inside: avoid; }
    .mediakit .mk-contact { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}