/* =====================================================================
   Layout Primitives
   Generic section-wrapper and grid helpers shared across every section
   file. Section-specific rules stay in their own file — this is only
   the reusable skeleton.
   ===================================================================== */

.section {
    padding-block: var(--section-padding-mobile);
}

@media (min-width: 640px) {
    .section {
        padding-block: var(--section-padding-tablet);
    }
}

@media (min-width: 1280px) {
    .section {
        padding-block: var(--section-padding-desktop);
    }
}

.section--alt {
    background-color: var(--color-bg-light);
}

.section--dark {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--color-white);
}

.section--dark p {
    color: rgba(255, 255, 255, 0.75);
}

/* ---- Section header (eyebrow + heading + optional description) ------- */

.section-header {
    max-width: 720px;
    margin-bottom: var(--space-3xl);
}

.section-header--center {
    margin-inline: auto;
    text-align: center;
}

.section-header h1,
.section-header h2 {
    /* Clips the .reveal-text span for the slide-up text reveal in
       animations.js. Purely a clipping box — never hides real content;
       with JS off the heading just renders normally. h1 covers the
       standalone pages (services.php, service-details.php) that use
       .section-header for their page title instead of a homepage h2. */
    overflow: hidden;
}

.section-header__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.section-header__description {
    margin-top: var(--space-md);
    color: var(--color-text-grey);
    font-size: var(--fs-body-lg);
}

.section--dark .section-header__description {
    color: rgba(255, 255, 255, 0.75);
}