/* Click-to-load Google Maps facade (shared). Pairs with /js/map-facade.js.
 *
 * The maps iframe is not in the initial DOM: a placeholder band with the
 * campus name, street address, a Load Map button, and a plain link to
 * Google Maps renders instead, and no request reaches Google until the
 * visitor clicks Load Map. The facade fills the page's reserved map frame
 * (an aspect-ratio wrapper, or a fixed-height class carried on the facade
 * itself, e.g. .attend-map on /gls/), so activating the map does not move
 * the layout. The injected iframe carries [data-map-injected] (sized below)
 * plus any classes from data-map-class, and page-level `.wrapper iframe`
 * rules keep sizing it exactly like the old always-on embed.
 *
 * Child rules are scoped `.map-facade .map-facade__x` on purpose: the band
 * sits inside 13 different page scopes whose prose rules (`.section p`,
 * etc.) outrank a bare class, so the component carries its own weight.
 *
 * Theming: every color routes through a --mf-* custom property with a
 * site-token default, so a themed page (e.g. /gls/, the Easter microsite)
 * can restyle the band by overriding the --mf-* props in its own CSS.
 */

.map-facade {
  --mf-bg: var(--nh-cream, #F6F2EC);
  --mf-line: rgba(207, 199, 185, 0.45);
  --mf-pin: var(--nh-red, #B83227);
  --mf-ink: var(--nh-ink, #15110F);
  --mf-ink-2: var(--nh-ink-2, #2B2522);
  --mf-mute: var(--nh-mute, #675D54);
  --mf-btn-bg: var(--nh-red, #B83227);
  --mf-btn-bg-hover: var(--nh-red-deep, #8A1F17);
  --mf-btn-ink: var(--nh-paper, #FFFFFF);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  width: 100%;
  min-height: 100%;
  padding: var(--space-16, 16px) var(--space-24, 24px);
  /* Faint street-grid lines over the paper tone; the grid is drawn in CSS
     so the band needs no image from Google or anywhere else. */
  background:
    repeating-linear-gradient(0deg,  transparent 0 46px, var(--mf-line) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, var(--mf-line) 46px 47px),
    var(--mf-bg);
}

/* If the band's content ever needs more room than the reserved frame's
   ratio provides (narrow phones), let the frame grow instead of clipping
   (the map wrappers hide overflow). Once the iframe replaces the facade
   this stops matching and the frame returns to its exact ratio. */
*:has(> .map-facade) {
  min-height: fit-content;
}

.map-facade .map-facade__pin {
  width: 24px;
  height: 24px;
  color: var(--mf-pin);
  flex: 0 0 auto;
}

.map-facade .map-facade__name {
  margin: 0;
  font-family: var(--font-display, ui-sans-serif, system-ui, sans-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mf-ink);
}

.map-facade .map-facade__addr {
  margin: 0 0 var(--space-8, 8px);
  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--mf-ink-2);
}

.map-facade .map-facade__load {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: var(--space-12, 12px) var(--space-24, 24px);
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--mf-btn-bg);
  color: var(--mf-btn-ink);
  font-family: var(--font-display, ui-sans-serif, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.map-facade .map-facade__load:hover {
  background: var(--mf-btn-bg-hover);
  box-shadow: var(--shadow-md, 0 6px 20px -6px rgba(21, 17, 15, 0.18));
}

.map-facade .map-facade__link {
  margin: 0;
  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--mf-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.map-facade .map-facade__link:hover {
  color: var(--mf-btn-bg-hover);
}

.map-facade .map-facade__note {
  margin: var(--space-8, 8px) 0 0;
  max-width: 46ch;
  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mf-mute);
}

/* The iframe map-facade.js injects on click. Wrappers that size their map
   with `.wrapper iframe` page rules match it too; this rule covers the rest. */
iframe[data-map-injected] {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 480px) {
  .map-facade {
    padding: var(--space-12, 12px) var(--space-16, 16px);
  }
  .map-facade .map-facade__pin {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-facade .map-facade__load {
    transition: none;
  }
}