/*
 * Contact block. Three parts placed by grid areas:
 *   desktop  intro and details on the left, the map on the right
 *   tablet   intro across the top, then details | map
 *   phones   intro, details, map stacked
 * Spacious: wider, location across the top of the details, email/phone/fax beside the
 * hours, a taller map. Full bleed: the map fills its half of the section edge to edge.
 */

.blk--contact {
    --subheading: var(--tertiary-600);
    --map-radius: var(--radius);
}

.blk--contact.is-dark,
.is-dark .blk--contact {
    --subheading: var(--tertiary-200);
}

.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 580px) minmax(0, 560px);
    grid-template-areas:
        "intro   map"
        "details map";
    justify-content: space-between;
    align-content: center;
    gap: var(--step-8) var(--space-md);
}

.contact__intro {
    grid-area: intro;
    align-self: end;
}

.contact__intro .text-group__subheading {
    margin-bottom: var(--subheading-gap);
}

.contact__intro .text-group__body {
    gap: .6em;
}

.contact__details {
    grid-area: details;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--step-7);
}

/* Hours keep their width; the location and buttons sit beside them, and wrap under at ~220px */
.contact__hours {
    flex: 0 0 auto;
    max-width: 100%;
}

.contact__location {
    flex: 1 1 220px;
    min-width: 0;
}

.contact__details p {
    margin: 0;
}

.contact__label {
    margin-bottom: var(--step-4) !important;
    color: var(--text-strong);
    font-weight: 700;
}

.contact__hours dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--step-2) var(--step-7);
    margin: 0;
}

.contact__hours :is(dt, dd) {
    margin: 0;
    white-space: nowrap;
}

.contact__note {
    margin-top: var(--step-2) !important;
    font-style: italic;
}

.contact__buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: var(--step-7);
}

.contact__buttons .btn {
    width: 100%;
}

.contact__map {
    grid-area: map;
    align-self: stretch;
}

.contact__map iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
    border-radius: var(--map-radius);
}

/* Keyboard users tab into the map: show where they are */
.contact__map iframe:is(:focus, .has-focus) {
    outline: 2px solid var(--tertiary-600);
    outline-offset: 3px;
}

.is-dark .contact__map iframe:is(:focus, .has-focus) {
    outline-color: var(--tertiary-200);
}

@media (max-width: 1090px) {
    .contact__grid {
        column-gap: var(--step-8);
    }
}

/* Tablet: intro across the top, then details | map; the map wraps under when both won't fit */
@media (min-width: 601px) and (max-width: 1024px) {
    .contact__grid {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--step-8) var(--step-7);
    }

    .contact__intro {
        flex: 0 0 100%;
    }

    .contact__intro .text-group__body {
        max-width: 600px;
    }

    .contact__details {
        flex: 1 1 0%;
        min-width: min-content;
    }

    .contact__map {
        flex: 1 1 0%;
        min-width: 320px;
    }

    .contact__map iframe {
        min-height: 320px;
    }
}

/* Tablet and phones: hours always above the location */
@media (max-width: 1024px) {
    .contact__details {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .contact__details > :is(.contact__hours, .contact__location) {
        flex: none;
    }
}

@media (max-width: 600px) {
    .contact__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "intro" "details" "map";
        gap: var(--step-7);
    }

    .contact__map iframe {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

/* ---------- Spacious (the Contact page) ---------- */

.contact--spacious .contact__grid {
    grid-template-columns: minmax(0, 620px) minmax(0, 620px);
    gap: var(--step-7) var(--space-md);
}

.contact--spacious .contact__intro {
    align-self: start;
}

.contact--spacious .contact__details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--step-7) var(--step-10);
}

.contact--spacious .contact__location,
.contact--spacious .contact__actions {
    grid-column: 1 / -1;
}

.contact--spacious .contact__hours dl {
    row-gap: 4px;
}

.contact--spacious .contact__hours :is(dt, dd) {
    line-height: 1.55;
}

.contact--spacious .contact__lines {
    display: flex;
    flex-direction: column;
    gap: var(--step-6);
    min-width: 0;
}

.contact--spacious .contact__details a:not(.btn) {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.contact--spacious .contact__buttons {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    margin-top: 0;
}

.contact--spacious .contact__buttons .btn {
    width: auto;
}

.contact--spacious .contact__map iframe {
    min-height: 560px;
}

@media (max-width: 1024px) {
    .contact--spacious .contact__grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--step-8);
    }

    .contact--spacious .contact__grid > * {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .contact--spacious .contact__details {
        display: grid;
    }

    .contact--spacious .contact__map iframe {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 600px) {
    .contact--spacious .contact__details {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--step-7);
    }

    .contact--spacious .contact__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .contact--spacious .contact__buttons .btn {
        width: 100%;
    }

    .contact--spacious .contact__map iframe {
        aspect-ratio: 4 / 3;
    }
}

/* ---------- Map side: left ---------- */

@media (min-width: 1025px) {
    .contact--map-left .contact__grid {
        grid-template-columns: minmax(0, 560px) minmax(0, 580px);
        grid-template-areas:
            "map intro"
            "map details";
    }

    .contact--spacious.contact--map-left .contact__grid {
        grid-template-columns: minmax(0, 620px) minmax(0, 620px);
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .contact--map-left:not(.contact--spacious) .contact__map { order: 1; }
    .contact--map-left:not(.contact--spacious) .contact__details { order: 2; }
}

/* ---------- Full bleed: the map fills its half of the section, edge to edge ---------- */

.contact--bleed {
    --map-radius: 0px;
}

@media (min-width: 1025px) {
    /* The map is placed against the section itself, not its padded content box */
    .section:has(> .section__inner .contact--bleed) :is(.section__inner, .section__blocks, .blk--contact) {
        position: static;
    }

    .contact--bleed .contact__grid {
        min-height: 520px;
    }

    .contact--bleed .contact__map {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        right: 0;
    }

    .contact--bleed .contact__map iframe {
        height: 100%;
        min-height: 0;
    }

    .contact--bleed .contact__grid > :is(.contact__intro, .contact__details) {
        grid-column: 1;
    }

    .contact--bleed.contact--map-left .contact__map {
        left: 0;
        right: 50%;
    }

    .contact--bleed.contact--map-left .contact__grid > :is(.contact__intro, .contact__details) {
        grid-column: 2;
    }
}

@media (max-width: 1024px) {
    .section:has(> .section__inner .contact--bleed) {
        padding-bottom: 0;
    }

    .contact--bleed .contact__map {
        width: auto;
        margin: var(--step-4) calc(var(--gutter) * -1) 0;
    }
}

/* ---------- Entrance (script.js) ----------
   The intro comes in like a section header, the details rise in one after another,
   and the map settles in (a masked zoom) as the page loads, wherever it is. */
.blk--contact.rv .contact__intro,
.blk--contact.rv .contact__details > * {
    opacity: 0;
}

.blk--contact.rv.rv-from-left .contact__intro {
    transform: translateX(calc(var(--reveal-shift) * -1));
}

.blk--contact.rv.rv-from-below .contact__intro {
    transform: translateY(var(--reveal-rise));
}

.blk--contact.rv .contact__details > * {
    translate: 0 calc(var(--reveal-rise) * .6);
}

.blk--contact.rv .contact__map iframe {
    opacity: 0;
    --mz: var(--reveal-zoom);
    scale: var(--mz);
    clip-path: inset(calc((1 - 1 / var(--mz)) * 50%) round calc(var(--map-radius) / var(--mz)));
}

.blk--contact.rv-armed .contact__intro {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--reveal-ease);
}

.blk--contact.rv-armed .contact__details > * {
    --rv-delay: calc(var(--rv-start, 0s) + var(--rv-i, 0) * var(--reveal-stagger));
    transition:
        opacity var(--reveal-text) ease var(--rv-delay),
        translate var(--reveal-text) var(--reveal-ease) var(--rv-delay);
}

.blk--contact.rv-armed .contact__map iframe {
    transition:
        opacity calc(var(--reveal-media) * .7) ease,
        --mz var(--reveal-media) var(--reveal-ease);
}

.blk--contact.rv.rv-intro-in .contact__intro,
.blk--contact.rv.rv-details-in .contact__details > * {
    opacity: 1;
    transform: none;
    translate: none;
}

.blk--contact.rv.rv-map-in .contact__map iframe {
    opacity: 1;
    --mz: 1;
}