/* =============================================================================
   Alabama Signature Homes — pages/contact
   =============================================================================

   The contact page, app/views/pages/contact.html.php.

   Note these are the page's own two-column split and address list. The form
   itself is .contact-section* / .contact-form in main.css, from
   partials/contact_section, which most public pages render — a different set
   of classes despite the similar names.

   Same house rules as main.css — no nesting, flat selectors, media queries
   inside the layer that owns them. Everything is wrapped in @layer: an
   unlayered rule would outrank even the utilities layer.
   ========================================================================== */

@layer pages {
  .contact-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    padding-block: var(--space-md);
  }

  @media (min-width: 768px) {
    .contact-split {
      grid-template-columns: 1fr 8px 1fr;
      gap: var(--space-md);
    }
  }

  .contact-split__divider {
    background-color: var(--clr-primary-400);
    width: 100%;
    min-height: var(--size-rule);
    height: 100%;
  }

  .contact-info {
    font-size: var(--fs-2xl);
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
  }

  .contact-info__heading {
    font-family: var(--ff-heading);
    font-size: var(--fs-4xl);
    margin-block-end: var(--space-2xs);
  }

  .contact-info__label {
    color: var(--clr-primary-400);
  }

  .contact-outro {
    margin-block-start: var(--space-2xl);
  }

  .contact-info__email {
    word-break: break-all;
  }
}