/* assets/css/components/front-contact.css
 * @layer components — Homepage contact split layout
 * ════════════════════════════════════════════════════════════════════
 *
 * Two-column: info + offices (left), contact form (right).
 * Collapses to single column on narrow viewports.
 *
 * Token sources: §2 semantics, §5 spacing, §13 radii, §14 shadows
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  .front-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-3xl);
    align-items: start;
  }

  .front-contact__intro {
    font-size: var(--text-s);
    font-weight: var(--weight-light, 300);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    margin-block-start: var(--space-m);
    margin-block-end: var(--space-xl);
  }

  /* ── Office cards grid ── */
  .front-contact__offices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
  }

  .front-contact__office-card {
    padding: var(--space-m);
    border-radius: var(--radius-s);
    background: var(--surface-tinted);
    border: 1px solid var(--border-subtle);
  }

  .front-contact__office-title {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
    margin-block-end: var(--space-xs);
  }

  .front-contact__office-address {
    font-size: var(--text-xs);
    font-weight: var(--weight-light, 300);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    font-style: normal;
  }

  /* ── Form wrapper — card appearance ── */
  .front-contact__form .contact-form {
    background: var(--surface-tinted);
    border-radius: var(--radius-m);
    border: 1px solid var(--border-subtle);
    padding: var(--space-xl);
  }

  /* ── Responsive: stack on narrow viewports ── */
  @media (max-width: 48em) {
    .front-contact__grid {
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
    }

    .front-contact__offices {
      grid-template-columns: 1fr;
    }
  }

} /* end @layer components */