/* === Layout helpers (zonder Tailwind build) === */
.container-page {
    max-width: 1280px;   /* ongeveer max-w-screen-xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;  /* px-4 */
    padding-right: 1rem;
}
.section-pad {
    padding-top: 5rem;   /* py-20 */
    padding-bottom: 5rem;
}

/* === Koppen: H1 (hero) en H2 (sectiekop) delen dezelfde opmaak (CRO-01) === */
.h1-hero,
.h2-section {
    font-family: 'Libre Baskerville', serif;
    font-style: normal;           /* not-italic */
    font-weight: 400;             /* font-normal */
    line-height: 1.1;             /* leading-tight-ish */
    font-size: 1.875rem;          /* ~text-3xl */
    margin-bottom: .75rem;        /* mb-3 */
}
@media (min-width: 1024px) {    /* lg - MacBook Pro 14" range */
    .h1-hero, .h2-section { font-size: 2rem; }
}
@media (min-width: 1536px) {    /* 2xl, same step as the hero intro text (2xl:text-xl) */
    .h1-hero, .h2-section { font-size: 2.5rem; }
}

/* Default color for h1-hero when no text color is specified (hero over video) */
.h1-hero:not([class*="text-"]) {
    color: rgba(255,255,255,.7);  /* text-white/70 - only when no text- class is present */
}
.h1-hero::first-letter {        /* optische tweak "D" */
    font-size: 98%;
}

.h2-hero {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;             /* font-semibold */
    line-height: 1.1;
    font-size: 1.25rem;           /* text-xl - smaller base */
    margin-bottom: 1.5rem;        /* mb-6 */
}
@media (min-width: 768px) {     /* md - smaller cascade */
    .h2-hero { font-size: 1.375rem; }
}
@media (min-width: 1024px) {    /* lg - MacBook Pro 14" range */
    .h2-hero { font-size: 1.5rem; }
}
@media (min-width: 1536px) {    /* 2xl, same step as the hero intro text (2xl:text-xl) */
    .h2-hero { font-size: 1.875rem; }
}

/* === Subkop direct onder een H2 (CRO-01) === */
.h3-section {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;             /* font-light */
    font-size: 1.5rem;            /* text-2xl */
    margin-bottom: 1.5rem;        /* mb-6 */
}

/* Default color for h3-section when no text color is specified */
.h3-section:not([class*="text-"]) {
    color: #4b5563;               /* ~text-gray-600 - only when no text- class is present */
}
@media (min-width: 768px) {     /* md:text-3xl */
    .h3-section { font-size: 1.875rem; }
}