/* contact.css - the "Where we are" panel on /contact.

   Linked from App.razor after 05-theme.css with the other page sheets
   (docs/REDESIGN-PLAN.md 1.6), so a rule here beats the theme by order.

   ONE MAP AND THE FACTS UNDER IT. The frame is the panel: full width of the
   reading column, a fixed aspect box so nothing below it moves when the map
   paints, and the address, hours and directions in real text underneath,
   which is what a printed page and a screen reader get (owner ask,
   2026-09-18).

   The box is reserved in CSS rather than by width and height attributes on
   the element, because the frame is fluid and an attribute box is not. */

/* ===========================================================================
   THE PANEL. One card in the reading column: map, then facts, then the
   paragraph that tells somebody what the building looks like. The facts sit
   beside that paragraph from 46rem up, which is the width at which two
   columns of text are still readable.
   =========================================================================== */

.wayfind {
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    background-color: var(--bg-raised);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 46rem) {
    .wayfind {
        padding: var(--space-5);
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
        gap: var(--space-4) var(--space-5);
        align-items: start;
    }

    /* The map spans both columns and leads. Under it the address takes the
       narrow column and the direction line the wide one. */
    .wayfind__frame {
        grid-column: 1 / -1;
    }

    .wayfind__telling {
        grid-column: 2;
        grid-row: 2;
    }

    .wayfind__facts {
        grid-column: 1;
        grid-row: 2;
    }
}

/* THE FRAME. A 16:9 box on a wide screen and a squarer one on a phone, where
   a 16:9 map of a rural crossroads is a letterbox of nothing. Bordered and
   rounded like every other card, and clipped, because the map paints square
   corners of its own. */
.wayfind__frame {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    background-color: var(--bg-sage);
}

@media (min-width: 46rem) {
    .wayfind__frame {
        aspect-ratio: 16 / 9;
    }
}

.wayfind__facts > * + * {
    margin-top: var(--space-3);
}

.wayfind__facts address {
    font-style: normal;
    line-height: var(--lh-body);
}

/* The one line that says where the place is, rather than what it looks like.
   It leads on a phone, where it is the first thing under the map, and sits
   beside the address on a wider screen. */
.wayfind__telling {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--ink);
    margin: 0;
}