/*
 * Contact Us page. Loaded after components.css, before print.css.
 *
 * Mobile-first, with the desktop arrangement added at 68rem.
 *
 * `.page-hero`, `.page-hero__title` and `.page-hero__rule` are shared and
 * live in components.css. Nothing on this page needs script.
 */

/*
 * Mobile gutter. This page's content sits at 32px against the shared 24px
 * token, the same as Efficacy, Affordability and FAQ. Scoped to <main> so
 * the shared header, ISI and footer keep the shell's own gutter.
 */
@media (width < 48rem) {
  main {
    --container-margin: var(--space-xl); /* 32px */
  }
}

/*
 * The hero lede steps down to 16px on mobile.
 *
 * Left unscoped on purpose, matching affordability.css and faq.css: this
 * file only ever loads on this page, and the page has exactly one `.prose`
 * element — the hero lede.
 *
 * Do not promote the pair to components.css: Efficacy keeps `.prose` at 20px
 * on mobile, so a shared override would regress it.
 */
@media (width < 68rem) {
  .prose {
    font-size: var(--font-size-body);
  }
}

/* ===============================================================
 * Hero — intro above the cards on mobile, beside them on desktop
 * ============================================================= */

.contact-hero {
  padding-block: 3.5rem; /* 56 / 56 on mobile */
}

.contact-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m); /* 16px between title, rule and lede, both widths */
  text-align: center;
}

/* 12px between the lede's two lines on mobile. */
.contact-hero__lede p + p {
  margin-block-start: 0.75rem;
}

.contact-hero__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-m); /* 16px between the two cards on mobile */
  margin-block-start: 3.5rem; /* 56 below the lede */
}

/* ===============================================================
 * Contact card
 *
 * A flat panel: no border, and the only division inside it is the hairline
 * rule, which runs the FULL card width rather than being inset to the row
 * padding.
 * ============================================================= */

/*
 * A flex column so the desktop layout's uniform 8px gap between EVERY child
 * — heading, rule, org label and each value row alike — can be one
 * declaration. The value rows live inside a <dl>, which is itself one child
 * here, so `.contact-rows` repeats the same gap internally rather than using
 * `display: contents` (which strips list semantics from a <dl> in several
 * engines). Mobile sets the same children flush, so the gap is simply 0.
 */
.contact-card {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-s); /* 8 / 8 on mobile */
  border-radius: var(--radius-sm);
  background-color: var(--color-card-surface);
}

.contact-card__title {
  padding-inline: var(--space-l);
  padding-block: var(--space-m);
  margin: 0;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-lead); /* 18px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-caption); /* 1.5 */
}

/*
 * Full-bleed inside the card, so it is not `.section__rule` (which centres
 * itself on the container and caps at the content column).
 */
.contact-card__rule {
  inline-size: 100%;
  margin: 0;
  border: 0;
  border-block-start: var(--border-width) solid var(--color-card-rule);
}

/* Body grey, not the title's navy: the organisation line is #3a3a3a at both
   breakpoints. */
.contact-card__org {
  padding-inline: var(--space-l);
  padding-block: var(--space-m);
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-lead); /* 18px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

.contact-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/*
 * Label left, value right, on one line. The rows sit flush against each
 * other on mobile and gain an 8px gap on desktop.
 */
.contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding-inline: var(--space-l);
  padding-block: var(--space-m);
}

.contact-row__label {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body); /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

.contact-row__icon {
  flex-shrink: 0;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  object-fit: contain;
}

/* Values are body grey too — Medium, but no link colour. */
.contact-row__value {
  margin: 0;
  margin-inline-start: auto;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  text-align: end;

  /* The longest value is a 29-character email address against a ~213px column
     at 430px, and it is a single unbreakable token. */
  overflow-wrap: anywhere;
}

/*
 * Real mailto:/tel:/https: links, styled flat — no underline and no link
 * colour, but operable rather than rendered as plain text. Phone numbers are
 * tel: links at every width: desktop softphones and hand-off-to-phone both
 * use them, so no width-gated rules apply here.
 */
.contact-row__value a {
  color: inherit;
  text-decoration: none;
}

.contact-row__value a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
 * Desktop
 * ------------------------------------------------------------- */

@media (width >= 68rem) {
  .contact-hero {
    display: grid;

    /* 668 + 8 + 668 = the 1344 content column exactly. An 8px gutter between
       two columns is unusually tight for this design, and intentional. */
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr;

    /* The intro column is deliberately short (143px) against a ~919px card
       column, so the two are top-aligned rather than centred. */
    align-items: start;
    padding-block: 6.5rem; /* 104 / 104 */
  }

  .contact-hero__intro {
    align-items: start;
    text-align: start;
  }

  .contact-hero__cards {
    gap: 1.625rem; /* 26px */
    margin-block-start: 0;
  }

  .contact-card {
    gap: var(--space-s); /* 8px between every child */
    padding-block: var(--space-l) var(--space-xl); /* 24 / 32 */
  }

  /* Drawn at 9px; the 8px spacing token wins. */
  .contact-hero__lede p + p {
    margin-block-start: var(--space-s);
  }

  .contact-card__title {
    padding-inline: var(--gutter);
    font-size: var(--font-size-h4); /* 24px */
  }

  .contact-card__org {
    padding-inline: var(--gutter);
    font-size: var(--font-size-body-lg); /* 20px */
  }

  .contact-rows {
    gap: var(--space-s); /* 8px between rows */
  }

  .contact-row {
    gap: var(--space-l); /* 24px, icon->label and label->value alike */
    padding-inline: var(--gutter); /* 48px */
  }

  .contact-row__label,
  .contact-row__value {
    font-size: var(--font-size-body-lg); /* 20px */
  }
}