/* pages/contact.css — Contact: only what is unique to this page.

   R04 restructured this page to follow the element order of the approved reference:
   hero (breadcrumb inside) → four-up contact strip → form + map in two columns →
   locations → closing CTA. No token, colour, font, radius or motion pattern changed;
   every rule below composes existing tokens and existing shared components. */

/* =====================================================================
   Hero — the breadcrumb moved inside it (R04)
   The shared .breadcrumb paints its own surface bar and bottom hairline, which is
   right for a standalone strip and wrong over a photograph. Neutralising both here
   keeps the shared rule untouched for the other eleven pages, and zeroing the nested
   .container's gutter stops it double-indenting inside .page-hero__inner.
   ===================================================================== */
.page-hero .breadcrumb {
    background-color: transparent;
    border-block-end: 0;
}
.page-hero .breadcrumb .container {
    padding-inline: 0;
    max-inline-size: none;
}
.page-hero .breadcrumb__item { min-block-size: auto; }

/* =====================================================================
   Direct contact — four-up label / value strip
   The reference pairs a muted uppercase label with the value directly beneath it, so
   the two sit tighter than the card's default rhythm and the description keeps it.
   ===================================================================== */
.contact-card { gap: var(--space-sm); }
.contact-card .card__icon-frame { margin-block-end: var(--space-xs); }
.contact-card .card__text { margin-block-start: var(--space-xs); }

.contact-card__label {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* The value is the action now — the old card carried a separate arrow link. Colour is
   inherited at rest so the strip stays calm, and resolves to the same accent highlight
   the breadcrumb and fact-strip links use on hover. */
.contact-card__link {
    color: inherit;
    transition: color var(--transition-fast);
}

.contact-card__address {
    display: grid;
    gap: var(--space-xs);
}

@media (hover: hover) {
    .contact-card__link:hover { color: var(--color-accent-highlight); }
}

/* =====================================================================
   Inquiry + location — the approved .detail-layout carries the two columns
   ===================================================================== */
/* .detail-layout__main supplies the rhythm between the head and the form, so the
   section head's own bottom margin would double it. */
.detail-layout__main > .section-head { margin-block-end: 0; }

.maps__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    letter-spacing: 0;
}
.maps__link { margin-block-start: var(--space-md); }

/* =====================================================================
   Locations
   ===================================================================== */
/* the showroom card carries an extra CTA under the quick actions */
.page-contact .location-card__cta { margin-block-start: var(--space-md); }

/* R04 — the two pending map frames moved out of the dissolved Maps zone and into the
   branch cards they describe. Short frames keep those cards close to the Baghdad card's
   height instead of running away from it. */
/* 2:1 rather than the old zone's 3:2 — the shallower frame keeps the two pending cards
   closer to the Baghdad card's natural height, so the row shares less dead space. */
.location-card__body .map-frame--short { aspect-ratio: 2 / 1; }

/* R04 — Erbil and Babylon lost their "Get Directions" action when their map moved into
   the card, and the shared row is a fixed three-column grid whose gap paints the divider,
   so a two-item row left a lit, empty third cell. Auto-flow sizes the row to whatever the
   card actually has — two or three — and keeps the dividers even. Scoped to this page so
   the identical rows on index.html stay byte-for-byte as approved. */
.page-contact .location-card__actions {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}