/* ============================================================
   CrumpIT — Contact page (@layer pages)
   Contact form + details. Reuses shell form controls, cards,
   buttons + tokens.
   ============================================================ */

@layer pages {

  .page-hero {
    padding-top: calc(var(--header-h) + var(--sp-16));
    padding-bottom: var(--sp-8);
  }
  .page-hero h1 { margin: var(--sp-4) 0; }
  .page-hero .lead { max-width: 56ch; }

  .contact-section { padding-top: var(--sp-4); padding-bottom: var(--sp-24); }
  .contact-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: var(--sp-10);
    align-items: start;
  }

  /* ---- form ---- */
  .contact-form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-8);
  }
  .contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--sp-5);
  }
  .contact-form-card .btn { width: 100%; margin-top: var(--sp-2); }
  .form-note { margin-top: var(--sp-4); font-size: var(--fs-12); color: var(--text-muted); text-align: center; }

  /* success state */
  .contact-success {
    display: none;
    text-align: center;
    padding: var(--sp-10) var(--sp-6);
  }
  .contact-success.is-visible { display: block; }
  .contact-success__icon {
    width: 64px; height: 64px;
    margin: 0 auto var(--sp-5);
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--success);
    background: rgba(0, 196, 140, 0.14);
  }
  .contact-success__icon svg { width: 32px; height: 32px; }
  .contact-success h2 { font-size: var(--fs-24); margin-bottom: var(--sp-3); }
  .contact-success p { color: var(--text-muted); margin-inline: auto; }

  /* ---- details ---- */
  .contact-details { display: flex; flex-direction: column; gap: var(--sp-4); }
  .contact-detail {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    transition: border-color var(--dur-base) var(--ease);
  }
  .contact-detail:hover { border-color: var(--accent-24); }
  .contact-detail__icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    color: var(--accent);
    background: var(--accent-14);
  }
  .contact-detail__icon svg { width: 20px; height: 20px; }
  .contact-detail__label {
    font-family: var(--font-ui);
    font-size: var(--fs-12);
    letter-spacing: var(--ls-ui);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .contact-detail__value {
    display: block;
    margin-top: 2px;
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--text);
  }
  a.contact-detail__value:hover { color: var(--accent); }

  .contact-aside-note {
    margin-top: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: var(--fs-14);
    line-height: 1.6;
  }

  /* ---- responsive ---- */
  @media (max-width: 860px) {
    .contact-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  }
  @media (max-width: 520px) {
    .contact-row { grid-template-columns: 1fr; }
  }
}