/**
 * Fluid Framework - Places (opt-in module)
 * @layer components
 *
 * dist/fluid-places.min.css (package export "./places"). Link it after core.
 * Contact lists, opening hours, the outline map with numbered pins, and the
 * numbered list that matches it. Without this file the markup is plain HTML:
 * a definition list, a table, an image and an ordered list.
 *
 * CONTACT LIST
 *   <dl class="contact-list">
 *     <div><dt>Phone</dt><dd><a href="tel:+351296000000">+351 296 000 000</a></dd></div>
 *   </dl>
 *
 * HOURS
 *   <table class="hours"><caption>Opening hours</caption>
 *     <tbody><tr><th scope="row">Mon to Fri</th><td>09:00 to 18:00</td></tr></tbody>
 *   </table>
 *
 * MAP: an outline drawn at build time (scripts/build-map.mjs). No script,
 * no tiles, no request to another site; it follows light and dark because
 * every colour is a token. The pins are HTML (so they stay a readable size
 * at any width; their number is generated content, so a page without this
 * file shows none) and hidden from assistive tech: the figure carries the
 * description and the numbered list below it carries the places.
 *   <figure class="map">
 *     <div class="map__frame" role="img" aria-label="..." style="aspect-ratio: 960 / 420">
 *       <svg class="map__svg" viewBox="0 0 960 420" aria-hidden="true"><path class="map__land" d="..."/></svg>
 *       <span class="map__pin" data-n="1" style="--x: 41.2%; --y: 63.3%" aria-hidden="true"></span>
 *       <small class="map__name" data-name="Marina" style="--x: 41.2%; --y: 63.3%" aria-hidden="true"></small>
 *     </div>
 *     <figcaption>...</figcaption>
 *   </figure>
 *
 * PLACE LIST (matches the pins)
 *   <ol class="place-list"><li class="place">
 *     <span class="place__num" aria-hidden="true">1</span>
 *     <div class="place__body"><h3>...</h3><address>...</address><p class="place__links">...</p></div>
 *   </li></ol>
 */

@layer components {
  /* ========================================
     CONTACT LIST
     ======================================== */

  .contact-list { margin: 0; }

  .contact-list > div {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.5fr) minmax(0, 2fr);
    gap: var(--space-xs) var(--space-m);
    align-items: baseline;
    padding-block: var(--space-s);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .contact-list > div:last-child { border-block-end: var(--border-width) solid var(--color-border); }

  .contact-list dt, .contact-list dd { margin: 0; }

  .contact-list dd {
    font-size: var(--step-1);
    font-variant-numeric: lining-nums;
    overflow-wrap: anywhere;
  }

  .contact-list address { margin: 0; }


  /* ========================================
     HOURS
     ======================================== */

  .hours {
    inline-size: 100%;
    max-inline-size: 28rem;
    font-size: var(--step-0);
    font-variant-numeric: lining-nums tabular-nums;
  }

  .hours caption {
    caption-side: top;
    text-align: start;
    padding-block-end: var(--space-xs);
  }

  .hours tbody th {
    text-align: start;
    font-weight: var(--weight-normal);
  }

  .hours td { text-align: end; }
  .hours [data-closed] { color: var(--color-text-muted); }


  /* ========================================
     MAP
     ======================================== */

  .map {
    --_pin: 1.75rem;
    color: var(--accent-ink);
    margin: 0;
  }

  /* The coordinates are not text: a right-to-left page does not mirror the pins. */
  .map__frame {
    direction: ltr;
    position: relative;
    overflow: hidden;
    inline-size: 100%;
    background: color-mix(in oklab, currentColor 9%, var(--color-background));
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .map__frame { container: map / inline-size; }

  .map__svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .map__land {
    fill: color-mix(in oklab, currentColor 24%, var(--color-background));
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .map__pin {
    position: absolute;
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    translate: -50% -50%;
    display: grid;
    place-items: center;
    inline-size: var(--_pin);
    block-size: var(--_pin);
    border-radius: var(--radius-full);
    background: var(--accent-fill);
    color: var(--on-accent-fill);
    border: var(--border-width-thick) solid var(--color-background);
    font: var(--weight-semibold) var(--step--1) / 1 var(--font-body);
    font-variant-numeric: lining-nums tabular-nums;
    box-shadow: 0 0 0 var(--border-width) var(--accent-fill);
  }

  /* The number is generated content, so a page without this file draws no
     stray digits. A name sits beside the pin once the map is wide enough to
     read it; on a phone the pins are numbers and the list carries the names. */
  .map__pin::before { content: attr(data-n); }

  @container map (min-width: 40rem) {
    .map__name {
      position: absolute;
      inset-inline-start: calc(var(--x) + 1.25rem);
      inset-block-start: var(--y);
      translate: 0 -50%;
      white-space: nowrap;
      z-index: calc(var(--z-raised) + 1);   /* above an enlarged pin */
      font: var(--weight-medium) var(--step--1) / 1 var(--font-body);
      color: var(--color-text);
      /* a halo in the page colour keeps the name readable over the outline */
      text-shadow: 0 0 var(--space-xs) var(--color-background), 0 0 var(--space-xs) var(--color-background), 0 0 2px var(--color-background);
    }

    .map__name::before { content: attr(data-name); }
    .map__name[data-side="start"] { inset-inline-start: auto; inset-inline-end: calc(100% - var(--x) + 1.25rem); }

    /* Centred above or below the pin, for pins that sit close together along a coast */
    .map__name:is([data-side="above"], [data-side="below"]) { inset-inline-start: var(--x); translate: -50% 0; }
    .map__name[data-side="below"] { inset-block-start: calc(var(--y) + 1.25rem); }
    .map__name[data-side="above"] { inset-block-start: calc(var(--y) - 1.25rem); translate: -50% -100%; }
  }

  .map__pin { transition: scale var(--duration-fast) var(--ease-fluid); }

  .map figcaption {
    margin-block-start: var(--space-xs);
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  /* ========================================
     DIRECTIONS: plain links to Google Maps and Apple Maps
     ======================================== */

  .directions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    margin: var(--space-s) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--1);
  }

  .directions li { margin: 0; }

  /* Plain links are 18px tall: a 2.75rem target, as .team-member__social has. */
  :is(.directions, .place__links) a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }


  /* ========================================
     PLACE LIST: numbered like the pins
     ======================================== */

  .place-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .place {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-m);
    margin: 0;
    padding-block: var(--space-m);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .place:last-child { border-block-end: var(--border-width) solid var(--color-border); }

  .place__num {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--accent-fill);
    color: var(--on-accent-fill);
    font: var(--weight-semibold) var(--step--1) / 1 var(--font-body);
    font-variant-numeric: lining-nums tabular-nums;
  }

  .place__body { display: grid; gap: var(--space-xs); justify-items: start; min-inline-size: 0; }
  .place__body > * { margin: 0; }
  .place__body h3 { font-size: var(--step-1); }
  .place__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); font-size: var(--step--1); }

  /* Point at a place in the list and its pin grows; the first five places (the
     pins are the spans after the outline, the places the list's items). */
  .places:has(.place:nth-child(1):is(:hover, :focus-within)) .map__pin:nth-of-type(1),
  .places:has(.place:nth-child(2):is(:hover, :focus-within)) .map__pin:nth-of-type(2),
  .places:has(.place:nth-child(3):is(:hover, :focus-within)) .map__pin:nth-of-type(3),
  .places:has(.place:nth-child(4):is(:hover, :focus-within)) .map__pin:nth-of-type(4),
  .places:has(.place:nth-child(5):is(:hover, :focus-within)) .map__pin:nth-of-type(5) {
    scale: 1.35;
    z-index: var(--z-raised);
  }

  /* The map and its list side by side when there is room */
  .places {
    display: grid;
    gap: var(--space-l);
  }

  @media (min-width: 60rem) {
    .places { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
    /* The map column scrolls with the page, not sticky (Neil, 2026-10-31). */
  }
}