/* Contact page only. Linked after site.css. Tokens only; the site's three breakpoints only. */
@layer components {

  /* The lead sentence of the 2025 page, set as the page-head lead on column 5 (desktop). */
  .contact-lead b { font-weight: var(--w-bold); }

  /* Layout: scheduler first (it is the page's main action), then email and address, then the map.
     Phone: one column in that order. Tablet: scheduler full width, details and map side by side.
     Desktop: details and map on columns 1 to 4, the scheduler on columns 5 to 12. */
  .contact-page { margin-top: var(--s-8); grid-template-areas: "book" "info" "map"; gap: var(--s-7) var(--gutter); }
  .contact-page__book { grid-area: book; display: grid; gap: 0.625rem; min-width: 0; }
  .contact-page__info { grid-area: info; display: grid; gap: var(--s-6); align-content: start; padding-top: var(--s-5); border-top: var(--hair) solid var(--ink); }
  .contact-page__map { grid-area: map; display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }

  @media (min-width: 48em) {
    .contact-page { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "book book" "info map"; }
  }
  @media (min-width: 68.75em) {
    .contact-page {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "info info info info book book book book book book book book"
        "map  map  map  map  book book book book book book book book";
      margin-top: var(--s-6);
    }
    /* the rule over the email lines up with the rule under the scheduler's caption */
    .contact-page__info { margin-top: calc(2.75rem - var(--hair)); }
  }

  /* captions over the scheduler and under the map: the instrument layer */
  .contact-page__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-4); min-height: 2.75rem; border-bottom: var(--hair) solid var(--ink); }
  .contact-page__map .contact-page__cap { border-bottom: 0; border-top: 0; min-height: 0; }
  .contact-page__cap b { font-weight: 500; color: var(--ink); }
  .contact-page__out {
    display: inline-flex; align-items: center; gap: 0.45em; min-height: 2.75rem; color: var(--ink);
    text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--dur-2);
  }
  .contact-page__out .icon { transition: translate var(--dur-2) var(--ease-out); }
  .contact-page__out:hover { text-decoration-color: currentColor; }
  .contact-page__out:hover .icon { translate: 2px -2px; }

  /* email and address */
  .contact-page__info .contact__item .mono { margin-bottom: var(--s-2); }
  .contact-page__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); }
  .contact-page__mail > a {
    font-size: var(--fs-h4); letter-spacing: -0.012em; text-decoration: underline; text-decoration-color: var(--line);
    text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-2);
  }
  .contact-page__mail > a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
  .contact-page__addr { font-size: var(--fs-h4); font-weight: var(--w-strong); letter-spacing: -0.012em; line-height: 1.45; }
  @media (max-width: 47.99em) {
    .contact-page__mail > a, .contact-page__addr { font-size: var(--fs-body); }
  }

  /* the "Copy" button style is shared (site.css 5.24) */

  /* the two outside services */
  .embed--book { --embed-h: 44rem; scroll-margin-top: calc(var(--header-h) + var(--s-3)); }
  .contact-page__map .embed--map { flex: 1 0 auto; min-height: 0; aspect-ratio: 4 / 3; }
  @media (min-width: 68.75em) {
    .contact-page__map .embed--map { aspect-ratio: auto; min-height: 18rem; }
  }
  @media (max-width: 47.99em) {
    /* on a phone the scheduler fills the screen under the header when Book Call is pressed */
    .embed--book { --embed-h: clamp(34rem, 100svh - var(--header-h) - var(--s-9), 46rem); }
  }

  /* the loading state and the fade-in of the frames are shared (site.css 5.24) */
}