/* components-sections.css — page-section components shared by the home page and the
   interior pages. Moved verbatim out of pages/home.css in Phase 2 (same rules, same
   cascade position: after components.css, before header.css) so About, Contact and the
   case-study template reuse the approved treatments instead of re-declaring them.
   Nothing here changed visually — see the Phase 2 run report, §9.2 inheritance gate. */

/* =====================================================================
   Stats — 2x2 numeral block on a gold hairline grid (home intro, about, results)
   ===================================================================== */
.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hairline);
    background-color: var(--color-border);
    border: var(--hairline) solid var(--color-border);
}
.stats__item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding-block: var(--space-xl);
    padding-inline: var(--space-md);
    background-color: var(--color-bg);
}
.stats__value {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-2xl), 3.6vw + var(--space-sm), var(--fs-numeral));
    font-weight: var(--fw-light);
    line-height: 1;
    letter-spacing: var(--tracking-display);
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}
.stats__label {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
}

@media (min-width: 992px) {
    .stats__item {
        padding-block: var(--space-2xl);
        padding-inline: var(--space-xl);
    }
}

/* =====================================================================
   Why ETQAN — 3x2 grid, large outlined gold numerals, kicker on each rule
   ===================================================================== */
.why-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl) var(--space-xl);
}
.why-item {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-md);
    padding-block-start: var(--space-xl);
    border-block-start: var(--hairline) solid var(--color-border-subtle);
}
.why-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(var(--hairline) * -1);
    inline-size: var(--kicker-width);
    block-size: var(--rule);
    background: var(--gradient-gold);
}
.why-item__number {
    font-family: var(--font-heading);
    font-size: var(--fs-numeral);
    font-weight: var(--fw-light);
    line-height: 1;
    letter-spacing: var(--tracking-display);
    color: transparent;
    -webkit-text-stroke: var(--hairline) var(--color-accent);
}
.why-item__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    letter-spacing: 0;
}
.why-item__text {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .why-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--space-2xl);
        row-gap: var(--space-3xl);
    }
}

/* =====================================================================
   Locations — three cards: photo, details, segmented quick actions
   ===================================================================== */
.location-card {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    overflow: hidden;
    background-color: var(--color-bg);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-card);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.location-card__media { aspect-ratio: 3 / 2; }
.location-card__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.location-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
}
.location-card__title {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-display);
}
.location-card__address,
.location-card__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}
.location-card__address { display: grid; gap: var(--space-xs); }
/* phone and email sit 47px apart centre-to-centre so their 44px hit areas never overlap (Fix 9) */
.location-card__contacts {
    display: grid;
    gap: var(--space-lg);
    margin-block-start: var(--space-sm);
}
.location-card__contacts .text-link { position: relative; }
.location-card__contacts .text-link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: var(--touch-target);
    transform: translateY(-50%);
}
.location-card__pending {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-button);
    color: var(--color-text-muted);
}
.location-card__pending-icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    color: var(--color-accent);
}
.location-card__cta { inline-size: 100%; }

.location-card__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hairline);
    inline-size: 100%;
    margin-block-start: auto;
    background-color: var(--color-border-subtle);
    border: var(--hairline) solid var(--color-border-subtle);
}
.location-card__action {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--space-xs);
    block-size: 100%;
    min-block-size: calc(var(--touch-target) + var(--space-xl));
    padding-block: var(--space-sm);
    padding-inline: var(--space-xs);
    background-color: var(--color-bg);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    text-align: center;
    color: var(--color-text);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.location-card__action-icon {
    inline-size: var(--icon-md);
    block-size: var(--icon-md);
    color: var(--color-accent);
}

@media (hover: hover) {
    .location-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-ring-gold); }
    .location-card:hover .location-card__image { transform: scale(1.05); }
    .location-card__action:hover { background-color: var(--color-surface-2); color: var(--color-accent-highlight); }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .location-card { flex-direction: row; }
    .location-card__media { flex: 0 0 40%; aspect-ratio: auto; min-block-size: 100%; }
}

/* =====================================================================
   Final CTA band — elevated black, gold gradient hairlines top and bottom
   ===================================================================== */
.cta-band {
    position: relative;
    padding-block: var(--section-pad);
    background-color: var(--color-surface-2);
    background-image: var(--gradient-glow-gold);
    text-align: center;
}
.cta-band::before,
.cta-band::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: var(--hairline);
    background: var(--gradient-gold-rule);
}
.cta-band::before { inset-block-start: 0; }
.cta-band::after { inset-block-end: 0; }

.cta-band__inner {
    display: grid;
    justify-items: center;
    gap: var(--space-lg);
}
.cta-band__title { font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl)); }
.cta-band__text {
    max-inline-size: 40rem;
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
}
.cta-band__actions {
    justify-content: center;
    margin-block-start: var(--space-md);
}