/* ============================================================
   WMC House — footer
   NAP printed from the venue record, so the text a guest reads
   and the schema a crawler reads can never disagree.
   ============================================================ */

/* === Map façade === */
.map { background: var(--ground-alt); color: var(--ink); padding: var(--s-4) var(--gutter); }
/* Capped, not proportional. At 5fr/7fr on a wide screen the frame grew to
   most of the viewport for what is a footer courtesy. */
.map__inner { display: grid; grid-template-columns: 1fr minmax(0, 620px); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: var(--wrap); margin-inline: auto; }
 /* .foot__lbl is written for the dark footer, so it is invisible on this
    light band. Rebind it inside the map rather than fork the class. */
.map .foot__lbl { color: var(--ink-soft); }
.map__addr { font-family: var(--font-display); font-size: var(--h3-size); line-height: 1.15; margin: .75rem 0 1.5rem; }
.map__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
/* .btn sets display:inline-flex, which outranks the [hidden] attribute — so
   the button stayed on screen after the map had loaded. */
.map__actions .btn[hidden] { display: none; }

/* Reserves the box before anything loads, so revealing the map cannot shift
   the page under a guest who is mid-scroll. */
.map__frame { position: relative; aspect-ratio: 16 / 9; max-height: 320px; display: grid; place-items: center; background: var(--ground); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }

/* Stills stack, crossfaded, one visible at a time. `.shot` is shared with
   The Restaurant section — see base.css. */
.map__frame.is-loaded .shot { display: none; }
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* === Frame === */
.foot { background: var(--dark); color: var(--on-dark); padding: var(--s-6) var(--gutter) var(--s-3); }
.foot__grid { display: grid; grid-template-columns: 4fr 2fr 3fr 3fr; gap: clamp(1.5rem, 4vw, 4rem); max-width: var(--wrap); margin-inline: auto; padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule-dark); }

/* === Brand === */
.foot__mark { font-family: var(--font-display); font-size: var(--h2-size); line-height: 1; }
.foot__parent { margin-top: 1rem; color: var(--on-dark-soft); max-width: 26ch; }

/* === Columns === */
.foot__lbl { color: var(--on-dark-soft); margin-bottom: var(--s-2); }
.foot__lbl--gap { margin-top: var(--s-3); }
.foot__addr { font-style: normal; color: var(--on-dark-soft); margin-bottom: var(--s-2); max-width: 24ch; }
.foot__list { display: grid; gap: .1rem; }
.foot__list a, .foot__social a { display: block; padding: .35rem 0; color: var(--on-dark-soft); transition: color .3s ease, padding-left .35s var(--ease); }
.foot__list a:hover, .foot__social a:hover { color: var(--on-dark); padding-left: .35rem; }
.foot__list li { color: var(--on-dark-soft); padding: .35rem 0; }
.foot__list a { padding-block: 0; }
.foot__social { display: flex; flex-wrap: wrap; gap: .25rem var(--s-2); }
.foot__social a { padding-block: .2rem; }

/* === Pre-footer: legal and membership === */
.foot__pre { max-width: var(--wrap); margin-inline: auto; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule-dark); }
.foot__pre-list { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.foot__pre-list a { color: var(--on-dark-soft); transition: color .3s ease; }
.foot__pre-list a:hover { color: var(--on-dark); }

/* === Bottom === */
.foot__btm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--wrap); margin-inline: auto; padding-top: var(--s-3); color: var(--on-dark-soft); }
.foot__hub { color: var(--on-dark-soft); transition: color .3s ease; }
.foot__hub:hover { color: var(--on-dark); }

/* === Breakpoints === */
@media (max-width: 1080px) {
	.foot__grid { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); }
	.foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
	.map__inner { grid-template-columns: 1fr; }
	.map__frame { max-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
	.map__img { transition: none; }
}
@media (max-width: 560px) {
	.foot__grid { grid-template-columns: 1fr; }
}

/* Footer logo. Taller than the nav mark — the footer is where the brand signs
   off, and the same file has room to breathe here. */
.foot__mark--logo { line-height: 0; }
.foot__logo { display: block; height: 56px; width: auto; max-width: 260px; object-fit: contain; }
@media (max-width: 560px) { .foot__logo { height: 44px; } }