/**
 * Services Section
 *
 * Full-width light band, four equal columns on desktop, two on mobile, each
 * centred as ICON -> TITLE -> DESCRIPTION. No cards, no shadows, no gradients,
 * no hover or motion — the only decoration is a hairline at the band edges.
 *
 * Sizing is fluid (clamp) rather than per-breakpoint, so the one media query
 * below only changes the column count.
 */

.casablanca-services-section {
    /* Scoped to this section: can be overridden via inline style or :root. */
    --svc-ground: #fffaf2;
    --svc-ink: #1a1a1a;
    --svc-muted: #4a4a4a;
    --svc-icon: var(--svc-ink);
    --svc-hairline: rgba(26, 26, 26, 0.08);

    background-color: var(--svc-ground);
    border-top: 1px solid var(--svc-hairline);
    border-bottom: 1px solid var(--svc-hairline);
    padding-block: clamp(28px, 3vw, 48px);
}

.services-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(38px, 4.5vw, 66px);
}

.services-subtitle {
    display: block;
    color: var(--svc-muted);
    font-size: clamp(9px, 0.7vw, 10px);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.services-main-title {
    font-size: clamp(18px, 1.9vw, 26px);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    color: var(--svc-ink);
    line-height: 1.3;
}

.services-description {
    color: var(--svc-muted);
    font-size: clamp(12px, 0.95vw, 14px);
    line-height: 1.7;
    margin: 14px 0 0;
    opacity: 1;
}

/* ── Grid ─────────────────────────────────────────────────────────────
 * minmax(0, 1fr) rather than 1fr so a long unbroken word can never push a
 * track wider than its share and blow the row out horizontally. */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(26px, 3.4vw, 40px) clamp(12px, 1.6vw, 26px);
    width: 100%;
    /* Boxed: the blocks stay grouped in the middle instead of stretching to
       the viewport edges. The narrower cap applies while the grid is two
       columns — without it, a tablet-width track leaves the two blocks
       stranded far apart. Raised to 1040px with the four-column switch. */
    max-width: 560px;
    margin-inline: auto;
    padding-inline: clamp(0px, 2vw, 24px);
    align-items: start;
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: 240px;
    margin-inline: auto;
}

.service-icon {
    width: clamp(30px, 2.4vw, 36px);
    height: clamp(30px, 2.4vw, 36px);
    margin-bottom: clamp(10px, 1.2vw, 16px);
    color: var(--svc-icon);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.service-title {
    font-size: clamp(10px, 0.78vw, 12px);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.45;
    margin: 0 0 clamp(5px, 0.6vw, 9px);
    color: var(--svc-ink);
    /* Balances a two-line title into even lines instead of an orphan word. */
    text-wrap: balance;
}

.service-text {
    font-size: clamp(11px, 0.8vw, 12.5px);
    line-height: 1.55;
    color: var(--svc-muted);
    opacity: 1;
    margin: 0;
    /* Measure cap keeps the description a tidy block under the title rather
     * than stretching the full column width on wide screens. */
    max-width: 30ch;
}

/* ── Four columns once there is room ───────────────────────────────────
 * Placed last on purpose: these share specificity with the base rules
 * above, so they must come after them to win. */
@media (min-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 1040px;
    }

    /* The reference uses noticeably larger icons and type once four columns
     * fit, so the fluid floors are raised here rather than in a separate
     * breakpoint — values stay fluid above these minimums. */
    .service-icon {
        width: clamp(34px, 2.4vw, 40px);
        height: clamp(34px, 2.4vw, 40px);
    }

    .service-title {
        font-size: clamp(10.5px, 0.78vw, 12.5px);
    }

    .service-text {
        font-size: clamp(11.5px, 0.8vw, 13px);
    }
}

/* ── Flush against the footer ──────────────────────────────────────────
 * The white band under this section was .casablanca-footer's own `margin-top: 60px`
 * (template-parts/footer/main-footer.css), not anything inside this section —
 * #primary ends exactly at the services band, and the footer's margin pushed
 * itself down from there.
 *
 * That 60px is still wanted on every other template, where the last element is
 * ordinary content rather than a full-width tinted band, so it is zeroed only
 * for pages that actually contain this section (it is rendered last, and only
 * on the front page). No negative margins, no spacer, footer design untouched.
 */
#primary:has(.casablanca-services-section) + .casablanca-footer {
    margin-top: 0;
}