/* ==========================================================================
   Theme preset "magazine" — gecentreerde tijdschriftindeling: crème, terracotta.
   Layout: logo en menu gecentreerd boven elkaar, hero gecentreerd met de
   certificaatkaart eronder, peptiden en gidsen als brede rijen (kop links,
   tekst rechts), artikelpagina ZONDER zijbalk (panelen als band eronder),
   gecentreerde sectiekoppen en footer.
   Sfeer: weekendbijlage. Contrast: terracotta op wit #B3452B = 5,5:1.
   ========================================================================== */

:root {
  --ink:        #1B1A17;
  --ink-2:      #23221E;
  --ink-3:      #2E2C27;
  --paper:      #FBFAF7;
  --paper-2:    #F3F0E9;
  --paper-3:    #E8E3D8;
  --white:      #FFFFFF;
  --text:       #1B1A17;
  --muted:      #494640;
  --faint:      #75706A;
  --line:       rgba(27, 26, 23, 0.14);
  --line-strong:rgba(27, 26, 23, 0.3);
  --on-ink:     #FBFAF7;
  --on-ink-muted: rgba(251, 250, 247, 0.78);
  --on-ink-line:  rgba(251, 250, 247, 0.16);

  --accent:          #B3452B;
  --accent-deep:     #8E3420;
  --accent-rgb:      179, 69, 43;
  --accent-ink:      #B3452B;
  --accent-on-ink:   #E8886F;
  --on-accent:       #FFF8F5;
  --on-accent-muted: rgba(255, 248, 245, 0.86);
  --header-bg:       rgba(251, 250, 247, 0.96);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --display-weight: 700;

  --radius:    4px;
  --radius-lg: 18px;
  --shadow-1: 0 2px 4px rgba(27,26,23,.04), 0 18px 40px -26px rgba(27,26,23,.3);
  --shadow-2: 0 3px 8px rgba(27,26,23,.05), 0 40px 80px -30px rgba(27,26,23,.4);
}

/* ---------- Typografie: schreefletter voor koppen ---------- */
h1, h2, h3, h4, .display { font-stretch: normal; letter-spacing: -0.01em; line-height: 1.1; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.btn, .nav a, .faq summary, .filterbtn, .ticker__item, .stickybar__text strong { font-family: var(--font-body); font-stretch: normal; }
.btn { font-weight: 600; }
.nav a { font-weight: 500; font-size: .98rem; }

/* ---------- Schil: gecentreerd logo met het menu eronder ---------- */
.header__inner { flex-direction: column; height: auto; padding: 16px 0 10px; gap: 10px; position: relative; }
.logo { flex-direction: column; gap: 8px; text-align: center; }
.logo__text { font-size: 1.7rem; }
.logo__sub { text-align: center; }
.header__cta { position: absolute; right: 0; top: 18px; }
.nav { justify-content: center; flex-wrap: wrap; }
.ticker { border-top: 1px solid rgba(27,26,23,.12); }

/* ---------- Hero: alles gecentreerd, kaart eronder ---------- */
.hero.grid-bg {
  background-color: var(--paper);
  background-image: radial-gradient(60% 70% at 50% -10%, rgba(var(--accent-rgb), .12) 0%, rgba(var(--accent-rgb), 0) 70%);
  border-bottom: 1px solid var(--line); color: var(--text);
}
.hero.grain::after { opacity: .3; mix-blend-mode: multiply; }
.hero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; gap: clamp(28px, 4vw, 48px); }
.hero__title { color: var(--text); max-width: 20ch; }
.hero__title em { font-style: italic; color: var(--accent-ink); -webkit-text-stroke: 0; }
.hero__lead { color: var(--muted); margin-left: auto; margin-right: auto; }
.hero .eyebrow { color: var(--accent-ink); }
.hero .eyebrow::before { display: none; }
.hero .btn-row, .hero__chips { justify-content: center; }
.hero .btn--outline { color: var(--text); border-color: var(--line-strong); }
.hero .btn--outline:hover { background: var(--white); color: var(--text); border-color: var(--text); }
.hero .chip { background: var(--white); color: var(--muted); border-color: var(--line); }
.hero__art { max-width: 640px; width: 100%; }
/* Geen eigen `animation` hier: .hero__float is een direct kind van .rise en wordt pas zichtbaar door de
   rise-animatie van het framework. `animation: none` liet het blokje op opacity 0 staan (opgelost in 3.6.1). */
.hero__float { position: static; transform: none; margin: 18px auto 0; justify-content: center; display: inline-flex; }
.molecule svg { opacity: .35; right: -20%; }
.molecule .bond { stroke: rgba(27, 26, 23, .12); }
.molecule .node { fill: var(--paper); stroke: rgba(27, 26, 23, .25); }
.cert { transform: none; }

/* ---------- Secties gecentreerd ---------- */
.section__head { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; gap: 14px; }
.section__head p { max-width: 640px; }
.section__head .eyebrow::before { display: none; }

/* ---------- Kaarten worden brede rijen: kop links, tekst rechts ---------- */
.grid--3 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px 48px; align-items: start; padding: 30px 32px; }
.card__top { grid-column: 1; grid-row: 1; margin-bottom: 4px; }
.card__title { grid-column: 1; grid-row: 2; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.card__aka { grid-column: 1; grid-row: 3; }
.card__desc { grid-column: 2; grid-row: 1 / span 3; margin: 0; font-size: 1.02rem; }
.card__actions { grid-column: 1 / span 2; grid-row: 4; margin-top: 10px; }
.card--feature { grid-column: span 1; }

.gcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px 48px; align-items: start; padding: 28px 32px; }
.gcard__meta { grid-column: 1; grid-row: 1; justify-content: flex-start; gap: 14px; }
.gcard__title { grid-column: 1; grid-row: 2; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.gcard__desc { grid-column: 2; grid-row: 1 / span 2; }
.gcard .card__link { grid-column: 2; grid-row: 3; }

/* ---------- Categorieën: twee brede tegels ---------- */
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Artikel zonder zijbalk ---------- */
.layout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
.prose { max-width: 68ch; width: 100%; }
.sidebar { position: static; width: 100%; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: clamp(40px, 6vw, 72px); }
.phero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.phero__side { align-items: center; }
.phero h1 { max-width: 20ch; }
.phero__lead { margin-left: auto; margin-right: auto; }
.phero__tags { justify-content: center; }

/* ---------- Footer gecentreerd ---------- */
.footer__grid { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; gap: 30px; }
.footer__brand p { margin-left: auto; margin-right: auto; }
.footer__col ul { justify-items: center; }
.footer__bottom { justify-content: center; text-align: center; }
.footer__word { font-size: clamp(2.2rem, 11vw, 9rem); }

/* ---------- Leesbaarheid ---------- */
.card__title, .cat__title, .gcard__title, .post-card__title { letter-spacing: -0.005em; line-height: 1.12; }
.step h3, .prose h3, .cert__title, .product-box__name, .slidein__title, .stickybar__text strong { font-family: var(--font-body); font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.prose p, .prose > ul li, .prose > ol li { font-size: 1.08rem; line-height: 1.8; }
.card__aka, .cat__list li, .phero__alias, .crumbs__list, .spec__val:not(.spec__val--mono), .product-box__fine, .cta__note { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; }
.stat__label { font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.eyebrow, .tag, .chip, .panel__title, .topbar__item, .cert__rows span, .spec__key, .product-box__eyebrow, .product-box__specs span, .slidein__eyebrow, .promo-auto, .prose th { font-size: 12px; letter-spacing: 0.06em; }
.footer__col a { font-size: 0.95rem; }
.nav.is-open a { font-family: var(--font-display); }

/* ---------- Mobiel ---------- */
@media (max-width: 900px) {
  .card, .gcard { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 22px; }
  .card__top, .card__title, .card__aka, .card__desc, .card__actions,
  .gcard__meta, .gcard__title, .gcard__desc, .gcard .card__link { grid-column: 1; grid-row: auto; }
  .card__desc { margin-top: 10px; }
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .header__cta { top: 14px; }
  .sidebar { margin-top: 36px; }
}

/* ==========================================================================
   KoopPeptiden.com: eigen aanvullingen op het magazine-thema (site-eigen)
   ========================================================================== */

/* ---------- Blogkaarten: weer een nieuwsraster van drie ----------
   Het magazine-thema zet elk .grid--3 op een kolom (brede rijen). Voor blogkaarten
   levert dat schermbrede beeldvlakken op, en de uitgelichte kaart kreeg van het
   framework span 2 in een raster van een kolom. Zonder :has() blijft alles een kolom. */
.post-card--hero { grid-column: auto; }
.grid--3:has(> .post-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid--3:has(> .post-card) > .post-card--hero { grid-column: span 2; }
.post-card__title { font-stretch: normal; letter-spacing: -0.005em; line-height: 1.15; }
.post-card__visual span { font-stretch: normal; letter-spacing: -0.01em; line-height: 1; font-size: 1.9rem; }

/* ---------- Homepage: vijf vragen voor je bestelt (op inkt) ---------- */
.kp-questions { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); counter-reset: kpq; }
.kp-questions > li { counter-increment: kpq; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 26px 0 28px; border-top: 1px solid var(--on-ink-line); }
.kp-questions > li::before { content: counter(kpq, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; line-height: .9; color: var(--accent-on-ink); font-variant-numeric: lining-nums; }
.kp-questions > li.kp-questions__more::before { content: '+'; }
.kp-questions h3 { grid-column: 2; margin: 0 0 8px; font-family: var(--font-body); font-weight: 650; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.005em; }
.kp-questions p { grid-column: 2; margin: 0; font-size: .98rem; line-height: 1.65; }
.kp-questions a { color: var(--accent-on-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Homepage: open over wie we zijn (colofon) ---------- */
.kp-colofon { text-align: center; padding: clamp(28px, 4vw, 44px) clamp(8px, 3vw, 40px); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.kp-colofon .eyebrow { justify-content: center; color: var(--accent-ink); }
.kp-colofon .eyebrow::before { display: none; }
.kp-colofon p { font-family: var(--font-display); font-size: clamp(1.12rem, 1.8vw, 1.38rem); line-height: 1.6; color: var(--text); margin: 14px auto 0; max-width: 62ch; }
.kp-colofon a { color: var(--accent-ink); white-space: nowrap; }

/* ---------- Footer: merk gecentreerd, daaronder drie kolommen naast elkaar ---------- */
.footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.footer__brand { grid-column: 1 / -1; max-width: 640px; }

/* ---------- Footer: merk gecentreerd, daaronder drie kolommen naast elkaar ---------- */
.footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.footer__brand { grid-column: 1 / -1; max-width: 640px; }

@media (max-width: 1080px) {
  .grid--3:has(> .post-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__brand { grid-column: auto; }
  .kp-questions { grid-template-columns: minmax(0, 1fr); }
  .kp-questions > li { grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: 14px; padding: 22px 0 24px; }
  .kp-questions > li::before { font-size: 2.1rem; }
}
@media (max-width: 600px) {
  .grid--3:has(> .post-card) { grid-template-columns: minmax(0, 1fr); }
  .grid--3:has(> .post-card) > .post-card--hero { grid-column: auto; }
  .kp-colofon a { white-space: normal; }
  /* Lange Nederlandse samenstellingen ("massaspectrometrie", "groeihormoonpeptiden") passen op een
     telefoon niet in de koppen van het magazine-thema (h1 minimaal 2,6rem): kleiner en afbreken. */
  h1, .phero h1 { font-size: clamp(1.85rem, 8vw, 2.6rem); }
  h1, h2, h3, .hero__title, .card__title, .gcard__title { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  /* CTA-band: "Bekijk Semaglutide bij King Peptides" is breder dan het scherm; style.css zet de
     kolom hier op 1fr (geen minmax), waardoor een lang woord de band breder maakt dan het scherm */
  .cta .container { grid-template-columns: minmax(0, 1fr); }
  .cta__actions { width: 100%; align-items: stretch; }
  .cta .btn { white-space: normal; text-align: center; justify-content: center; line-height: 1.25; }
  .btn--lg { padding: 16px 22px; white-space: normal; text-align: center; }
  /* Peptidenoverzicht: het aantal profielen schuift onder de familienaam in plaats van ernaast */
  .group__head { flex-wrap: wrap; row-gap: 4px; }
}