@layer pages {
  /* ================================================================ Page head
     Same pattern as calculator and legal pages. */
  .page-head {
    padding-top: var(--space-l);
  }

  .page-head__title {
    margin-top: var(--space-m);
  }

  .page-head__lead {
    max-width: 44ch;
    margin-top: var(--space-s);
  }

  /* ================================================================ Layout
     Desktop: places and phones on the left, the map holds the right side.
     Mobile: places, map, phones. */
  .contacts {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "places map"
      "reach map";
    align-items: start;
    gap: var(--space-xl) var(--space-xl);
    margin-top: var(--space-xl);
  }

  .contacts__places {
    grid-area: places;
    display: grid;
    gap: var(--space-m);
  }

  /* ---------------------------------------------------------------- Places */
  .place {
    display: grid;
    align-content: start;
    gap: var(--space-s);
    padding: var(--space-l);
    border-radius: var(--r-l);
    background: var(--surface-2);
  }

  .place__head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .place__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--surface);
    color: var(--navy);
  }

  .place__icon .icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .place__address {
    max-width: 42ch;
    font-size: var(--fs-body-l);
    font-weight: 600;
  }

  /* Notes are plain navy text. "Pickup here" gets the yellow tick used for positive states. */
  .place__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    color: var(--navy);
    font-weight: 700;
  }

  .place__note .icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
  }

  .place--warehouse .place__note .icon {
    box-sizing: content-box;
    width: 0.8125rem;
    height: 0.8125rem;
    padding: 0.21875rem;
    border-radius: 50%;
    background: var(--yellow);
  }

  .place__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-m);
    margin-top: var(--space-2xs);
  }

  /* ---------------------------------------------------------------- Map
     `relative` here and `sticky` only where the map is beside the addresses, rather than
     `sticky` here and undone below. Two goes at the narrow end came from doing it the other
     way round. `static` there cost the map its containing block, and its loading cover, which
     is inset:0, then sized itself against the whole page. `relative` fixed that and uncovered
     the next one: the `top` belongs to `sticky`, `static` ignored it, `relative` does not, so
     the map dropped by var(--nav-h) + var(--space-m) and sat 32px into the footer.

     Stated once, in the place it applies, there is nothing left to undo and no stray offset to
     inherit. .map in components.css needs a containing block at every width; this gives it one
     without ever setting an offset it does not mean. */
  .contacts__map {
    grid-area: map;
    position: relative;
    height: 24rem;
    overflow: hidden;
    border-radius: var(--r-l);
    background: var(--surface-3);
    box-shadow: var(--ring-card);
  }

  /* Wide enough for the map to sit beside the addresses: it follows them down the page. */
  @media (min-width: 64rem) {
    .contacts__map {
      position: sticky;
      top: calc(var(--nav-h) + var(--space-m));
      height: min(46rem, calc(100dvh - var(--nav-h) - var(--space-xl)));
      min-height: 30rem;
    }
  }

  /* ---------------------------------------------------------------- Phones and social */
  .contacts__reach {
    grid-area: reach;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l) var(--space-2xl);
  }

  .contacts__heading {
    margin-bottom: var(--space-2xs);
  }

  .contacts__phone,
  .contacts__social {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 3rem;
    font-weight: 700;
    text-decoration: none;
  }

  .contacts__phone {
    font-size: var(--fs-h4);
  }

  /* Same colour as the Instagram icon beside it (client feedback). */
  .contacts__phone .icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .contacts__social {
    font-size: var(--fs-body-l);
  }

  .contacts__social .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .contacts__handle {
    font-weight: 600;
    color: var(--ink-2);
  }

  @media (hover: hover) and (pointer: fine) {
    .contacts__phone:hover span,
    .contacts__social:hover span:not(.contacts__handle) {
      text-decoration: underline;
      text-decoration-thickness: 2px;
    }
  }

  /* ================================================================ Responsive */
  @media (max-width: 64rem) {
    /* Phones and tablets: calling is the first thing people do here, so phone and Instagram lead. */
    .contacts {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      grid-template-areas:
        "reach"
        "places"
        "map";
      gap: var(--space-l);
    }

    .contacts__map {
      height: 28rem;
    }
  }

  @media (min-width: 40rem) and (max-width: 64rem) {
    .contacts__places {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 36rem) {
    .contacts {
      margin-top: var(--space-l);
    }

    .contacts__reach {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2xs);
    }

    /* Each channel becomes one full-width tappable row */
    .contacts__channel {
      display: grid;
      padding: var(--space-xs) var(--space-s);
      border-radius: var(--r-m);
      box-shadow: inset 0 0 0 2px var(--line);
    }

    .contacts__heading {
      margin-bottom: 0;
      color: var(--ink-2);
      font-family: var(--font-sans);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .contacts__phone {
      font-size: 1.375rem;
    }

    .place {
      padding: var(--space-m) var(--space-s);
    }

    .contacts__map {
      height: 24rem;
    }
  }
}