/* =========================================================================
   Merioneth Apartments — Neighborhood section
   Design tokens. Tune the section from here.
   ========================================================================= */
:root {
  /* Colors */
  --color-bg:            #faf7f2;  /* warm off-white page background */
  --color-surface:       #ffffff;  /* cards, panels */
  --color-surface-alt:   #f4efe7;  /* hover / subtle fills */
  --color-ink:           #2b2926;  /* dark charcoal primary text */
  --color-ink-soft:      #6b655d;  /* secondary text */
  --color-ink-faint:     #9a938a;  /* tertiary text */
  --color-border:        #e5ddd1;  /* soft neutral borders */
  --color-border-strong: #d3c8b8;
  --color-accent:        #8a5a3c;  /* warm branded accent (terracotta/brown) */
  --color-accent-soft:   #f0e6dc;
  --color-accent-ink:    #ffffff;
  --color-focus:         #1f6feb;  /* high-contrast keyboard focus ring */

  /* Pin accent colors (per kind) */
  --pin-home:   #8a5a3c;
  --pin-transit:#3b4252;
  --pin-shopping:#8a5a3c;
  --pin-culture:#7a4a6b;
  --pin-park:   #5e7a52;

  /* Type sizes */
  --fs-title:    2.25rem;   /* 36px */
  --fs-h3:       1.125rem;  /* 18px */
  --fs-body:     1rem;      /* 16px */
  --fs-sm:       0.875rem;  /* 14px */
  --fs-xs:       0.75rem;   /* 12px */
  --fs-eyebrow:  0.8125rem; /* 13px */
  --lh-tight:    1.15;
  --lh-body:     1.6;

  /* Type families */
  --font-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Borders & radius */
  --border-width: 1px;
  --border:       var(--border-width) solid var(--color-border);
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* Shadows (minimal) */
  --shadow-sm: 0 1px 2px rgba(43, 41, 38, 0.05);
  --shadow-md: 0 6px 20px rgba(43, 41, 38, 0.10);

  /* Layout */
  --content-max:       1200px;
  --col-gap:           var(--space-7);
  --breakpoint-mobile: 900px;

  /* Illustrated map palette (also mirrored inside the SVG asset) */
  --map-frame:  #efe7d8;

  /* Motion */
  --transition-fast: 200ms ease;
  --transition-med:  320ms ease;
}

/* =========================================================================
   Base
   ========================================================================= */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--map-frame);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Full-bleed widget: the map fills the whole page / iframe. */
.page {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* =========================================================================
   Two-column layout — natural content height
   ========================================================================= */
.neighborhood__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: start; /* columns size to their own content */
}

.neighborhood__col { min-width: 0; }

/* =========================================================================
   Eyebrow + heading + stats (left column top)
   ========================================================================= */
.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.neighborhood__heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-5);
}

.stats {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.stat {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat__value {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
}

.stat__label {
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}

/* =========================================================================
   Illustrated map + HTML pin layer
   ========================================================================= */
.neighborhood-map {
  /* ---- Interactive map viewport --------------------------------------------
     The SVG is treated as a large canvas shown through this window; panning and
     zooming are driven by neighborhood-map.js, which sets the canvas transform
     and updates --map-inv-zoom so pins keep a constant on-screen size.
       --map-aspect   : viewport shape (width / height)
       --map-inv-zoom : 1 / current zoom (managed by JS)
     Per-device shape overrides live in the responsive section near the bottom. */
  --map-inv-zoom: 1;

  position: relative;
  width: 100%;
  height: 100%;                /* fill the page / iframe */
  margin: 0;
  overflow: hidden;            /* clips the scaled canvas to the viewport */
  background: var(--map-frame);
  cursor: grab;
  touch-action: none;          /* we handle pan/pinch ourselves */
}
.neighborhood-map.is-grabbing { cursor: grabbing; }

/* The pannable / zoomable canvas holding the map art + the pin layer.
   Both are transformed together (by JS), so pins stay aligned to the map. */
.neighborhood-map__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 0 0;       /* JS drives translate()+scale() from here */
  will-change: transform;
}
.neighborhood-map__canvas.is-ready { transition: opacity var(--transition-fast); }

/* Animated zoom/recenter: the canvas and the pins transition their transforms
   together (same timing) so markers keep a constant size while zooming. */
.neighborhood-map.is-animating .neighborhood-map__canvas,
.neighborhood-map.is-animating .neighborhood-pin {
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.neighborhood-map__art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;   /* drags fall through to the viewport */
}

.neighborhood-map__pins {
  position: absolute;
  inset: 0;
  pointer-events: none; /* only pins themselves are interactive */
}

/* --- Pan/zoom controls -------------------------------------------------- */
.neighborhood-map__controls {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.map-ctrl {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.map-ctrl:hover { background: var(--color-surface-alt); }
.map-ctrl:active { transform: translateY(1px); }
.map-ctrl svg { width: 22px; height: 22px; fill: currentColor; }
.map-ctrl--reset { color: var(--color-accent); }

/* Figure fills the page; the caption becomes a subtle attribution overlay. */
.neighborhood-map-fig {
  margin: 0;
  height: 100%;
}

/* Attribution chip, bottom-left (controls sit bottom-right, like a real map). */
.neighborhood-map__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  max-width: 78%;
  margin: 0;
  padding: 3px 9px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-ink-soft);
  background: rgba(250, 247, 242, 0.82);
  border-top-right-radius: var(--radius-sm);
}

/* --- Pins --------------------------------------------------------------- */
.neighborhood-pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  /* Anchor the marker tip at the point, then counter-scale by 1/zoom so the
     marker keeps a constant on-screen size while the map is scaled. The
     transform-origin (bottom-centre = the tip) stays fixed under scaling. */
  transform: translate(-50%, -100%) scale(var(--map-inv-zoom, 1));
  transform-origin: 50% 100%;
  pointer-events: auto;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
}

/* Marker teardrop */
.neighborhood-pin__marker {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--pin-color, var(--pin-home));
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.neighborhood-pin__marker svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  transform: rotate(45deg);
}

/* Per-kind color (not color alone — each also has a distinct icon + label) */
.neighborhood-pin--home    { --pin-color: var(--pin-home); }
.neighborhood-pin--transit { --pin-color: var(--pin-transit); }
.neighborhood-pin--shopping{ --pin-color: var(--pin-shopping); }
.neighborhood-pin--culture { --pin-color: var(--pin-culture); }
.neighborhood-pin--park    { --pin-color: var(--pin-park); }

/* The property pin reads larger + ringed so it stands out beyond color */
.neighborhood-pin--home .neighborhood-pin__marker {
  width: 38px;
  height: 38px;
  border-width: 3px;
  box-shadow: 0 0 0 4px rgba(138, 90, 60, 0.18), var(--shadow-md);
}
.neighborhood-pin--home .neighborhood-pin__marker svg { width: 19px; height: 19px; }

.neighborhood-pin:hover .neighborhood-pin__marker,
.neighborhood-pin:focus-visible .neighborhood-pin__marker,
.neighborhood-pin.is-active .neighborhood-pin__marker {
  transform: rotate(-45deg) scale(1.12);
  box-shadow: var(--shadow-md);
}

/* Tooltip label on hover/focus */
.neighborhood-pin__tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: 140px;
  max-width: 220px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-sm);
  line-height: 1.3;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 5;
  pointer-events: none;
}
.neighborhood-pin__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-ink);
}
.neighborhood-pin:hover .neighborhood-pin__tooltip,
.neighborhood-pin:focus-visible .neighborhood-pin__tooltip,
.neighborhood-pin.is-active .neighborhood-pin__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.neighborhood-pin__name { display: block; font-size: var(--fs-sm); font-weight: 600; }
.neighborhood-pin__sub  { display: block; font-size: var(--fs-xs); color: #d9d3ca; }

/* =========================================================================
   Right column — intro, gallery, categories
   ========================================================================= */
.neighborhood__intro {
  margin: 0 0 var(--space-5);
  font-size: 1.0625rem;
  color: var(--color-ink-soft);
}

/* --- Gallery ------------------------------------------------------------ */
.gallery {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.gallery__item {
  position: relative;
  border: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt);
}
.gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gallery__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #fff;
  background: linear-gradient(to top, rgba(43, 41, 38, 0.72), rgba(43, 41, 38, 0));
}

/* --- Category accordion ------------------------------------------------- */
.categories__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

.category {
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.category.is-open { border-color: var(--color-border-strong); }

.category__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: background var(--transition-fast);
}
.category__trigger:hover { background: var(--color-surface-alt); }

.category__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.category__icon svg { width: 18px; height: 18px; fill: currentColor; }

.category__label { flex: 1 1 auto; font-weight: 600; }

.category__count {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--color-ink-faint);
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.category__chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-ink-soft);
  border-bottom: 2px solid var(--color-ink-soft);
  transform: rotate(45deg);
  transition: transform var(--transition-med);
}
.category.is-open .category__chevron { transform: rotate(-135deg); }

.category__panel {
  padding: 0 var(--space-4) var(--space-4);
}

.category__list { list-style: none; margin: 0; padding: 0; }

.category__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-3) 0;
  border-top: var(--border);
}
.category__item:first-child { border-top: 0; }
.category__item-name { font-weight: 500; font-size: var(--fs-sm); }
.category__item-meta { font-size: var(--fs-xs); color: var(--color-ink-soft); }

.category__note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
}

/* --- Standalone disclaimer (kept for reference; hidden by default) ------- */
.disclaimer {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-soft);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}

/* =========================================================================
   Focus states (keyboard accessibility)
   ========================================================================= */
:where(.neighborhood-pin, .category__trigger, .map-ctrl):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.neighborhood-map:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.neighborhood-map__caption a { color: var(--color-accent); }
.neighborhood-map__caption a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* =========================================================================
   Responsive — single column below the breakpoint
   ========================================================================= */
@media (max-width: 480px) {
  /* Larger touch targets on small screens */
  .neighborhood-pin__marker { width: 34px; height: 34px; }
  .neighborhood-pin__marker svg { width: 17px; height: 17px; }
  .map-ctrl { width: 44px; height: 44px; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}