/* ==========================================================================
 * WattWisely — about page
 * ========================================================================== */

@layer pages {

  /* Hero, cards, checklist, and prose are shared components — see components.css. */

  /* -- Mission ------------------------------------------------------------- */

  .about-mission__head h2 {
    margin-top: var(--ww-space-4);
    font-size: var(--ww-step-3);
  }

  @media (min-width: 1024px) {
    /* The heading stays beside the paragraph it introduces rather than
       scrolling away from it — the mission text is long enough that a static
       heading would be off-screen by the third paragraph. */
    .about-mission__head {
      position: sticky;
      top: calc(var(--ww-header-h, 4.5rem) + var(--ww-space-8));
    }
  }

  /* -- Where we are -------------------------------------------------------- */

  .about-place h2 { font-size: var(--ww-step-3); }

  .about-place__lead { font-size: var(--ww-step-1); }

  .about-place__card {
    align-self: start;
    padding: var(--ww-space-6);
    background: var(--ww-surface);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
  }

  .about-place__card-title { font-size: var(--ww-step-1); }

  .about-place__address {
    margin-top: var(--ww-space-4);
    font-style: normal;
    font-weight: var(--ww-weight-semibold);
    color: var(--ww-ink);
  }

  .about-place__note {
    margin-top: var(--ww-space-4);
    font-size: var(--ww-step--1);
    color: var(--ww-muted);
  }

  .about-place__mail {
    margin-top: var(--ww-space-2);
    margin-bottom: var(--ww-space-5);
    font-weight: var(--ww-weight-semibold);
  }

  /* A long address must not push the card wider than its column. */
  .about-place__mail a {
    display: inline-flex;
    align-items: center;
    overflow-wrap: anywhere;
  }

  /* The only thing in its paragraph — a destination, not a word inside a
     sentence — so the inline target-size exception does not cover it. */
  @media (pointer: coarse) {
    .about-place__mail a { min-height: 44px; }
  }
}