/* services.css — the nine-service editorial list and the compact methodology strip.
   Icons, numbers, rules and type come from the locked system; rows highlight on hover. */

/* ============================================================ Services list */
.services-list__intro {
    font-family: var(--font-heading);
    max-inline-size: var(--measure);
    margin-block-end: var(--space-xl);
    color: var(--color-heading);
    font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl));
    font-weight: 400;
}

.service {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--space-md);
    padding-block: var(--space-xl);
    padding-inline: var(--space-md);
    border-block-start: 1px solid var(--color-border);
}

.service:last-child { border-block-end: 1px solid var(--color-border); }

/* Highlight — on hover, and when arriving from a home-page card (/services#slug):
   a pale-gold wash from the inline-start edge and a gold bar that grows down that edge */
.service::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to right, var(--color-surface-gold) 40%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

[dir="rtl"] .service::before { background-image: linear-gradient(to left, var(--color-surface-gold) 40%, transparent); }

.service::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    background-color: var(--color-accent);
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.service:target::before { opacity: 1; }
.service:target::after { transform: scaleY(1); }

.service__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
}

.service__number {
    font-family: var(--font-heading);
    grid-column: 1 / -1;
    color: var(--color-accent-deep);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.service__title { font-size: var(--fs-h3); }

.service__body {
    max-inline-size: var(--measure);
    font-size: var(--fs-md);
}

/* The icon turns gold and steps toward the title */
.service__icon { transition: color var(--transition-base), transform var(--transition-base); }

@media (hover: hover) {
    .service:hover::before { opacity: 1; }
    .service:hover::after { transform: scaleY(1); }

    .service:hover .service__icon {
        color: var(--color-accent-deep);
        transform: translateX(var(--space-xs));
    }

    [dir="rtl"] .service:hover .service__icon { transform: translateX(calc(var(--space-xs) * -1)); }
}

/* Equal-height rows from tablet width up (BASAM 2026-09-15): every row takes the tallest row's height and
   centres its content. Phones keep natural heights, so short rows don't leave large gaps. */
@media (min-width: 768px) {
    .services-list__items {
        display: grid;
        grid-auto-rows: 1fr;
    }

    .service {
        align-content: center;
        padding-inline: var(--space-lg);
    }
}

@media (min-width: 992px) {
    .service {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: start;
        gap: var(--space-3xl);
        padding-block: var(--space-2xl);
    }

    .service__body { font-size: var(--fs-lg); }
}

/* ============================================================ Compact methodology strip */
.timeline--compact .timeline__step { row-gap: 0; }

.timeline--compact .timeline__title { align-self: center; }

@media (min-width: 992px) {
    .methodology-strip { padding-block: calc(var(--space-3xl) + var(--space-md)); }

    .timeline--compact .timeline__title { margin-block-start: var(--space-md); }
}