/* ============================================================================
   Map, as a click-to-load facade.

   A Google Maps iframe loads Google's scripts and sets cookies the moment the
   page renders, on every page, for every visitor. That would oblige us to show
   a consent banner, and ARCHITECTURE.md §3.5 deliberately chose to have none:
   no cookies, no banner, faster pages, and a site that looks more confident
   than one with a modal over its hero.

   So the map is a facade. The reader sees the address, the hours and a styled
   placeholder with no third party involved. The real embed loads only when
   they ask for it, and the button says plainly what will happen. Same map,
   one click later, and the page stays clean for everyone who never clicks.
   ========================================================================= */

@layer components {
  .map { border: 1px solid var(--rule); background: var(--surface-2) }

  .map-facade {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--sp-6);
    cursor: pointer;
    border: 0;
    width: 100%;
    font: inherit;
    color: var(--ink-2);
    /* A schematic street grid, so the placeholder reads as a map rather than
       as a broken image. No tiles are fetched. */
    background-image:
      linear-gradient(var(--rule) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 48px 48px, 48px 48px;
    background-color: var(--surface-2);
  }
  .map-facade:hover { background-color: var(--surface) }
  .map-facade:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px }

  .map-pin {
    width: 14px; height: 14px; border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent);
    margin: 0 auto var(--sp-4);
  }
  .map-facade strong { display: block; color: var(--ink); font-size: var(--t-body) }
  .map-facade small  { display: block; margin-top: var(--sp-2); color: var(--ink-3);
                       font-size: var(--t-caption) }

  .map-meta { border-top: 1px solid var(--rule); padding: var(--sp-4) var(--sp-5);
              display: grid; gap: var(--sp-3) var(--sp-6);
              grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)) }
  .map-meta dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
                 color: var(--ink-3) }
  .map-meta dd { margin: var(--sp-1) 0 0; font-size: var(--t-sm); color: var(--ink) }
  .map-meta a  { color: var(--accent) }

  .map iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0 }
}