/* === g-contact — consolidated contact (v3.38.0) === */
/* ONE section, two layouts gated by data-ssla-contact-layout. ONE set of field */
/* nodes reflowed via CSS grid-template-areas. Single-zone: root surface =       */
/* core --ssla-bg-color (§7.1). Tone = foreground. Tokens only.                  */

.ssla-g-contact {
  width: 100%;
  background-color: var(--ssla-bg-color, #ffffff);
  color: var(--g-contact-fg, #1a1a1a);
}
.ssla-g-contact-inner {
  max-width: var(--g-contact-content-max-width, 1120px);
  margin: 0 auto;
  padding: var(--g-contact-section-padding, 80px) 48px;
  display: grid;
  column-gap: var(--g-contact-column-gap, 56px);
  row-gap: 40px;
}
.alignfull .ssla-g-contact-inner { max-width: 100%; }

/* ── Layout: STANDARD ── header spans; form | details; map full-width below.
   The reason-cards row (items) spans above the columns when present. cta hidden. */
.ssla-g-contact--layout-standard .ssla-g-contact-inner {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "head    head"
    "items   items"
    "form    details"
    "map     map";
}
.ssla-g-contact--layout-standard .ssla-g-contact-cta { display: none; }

/* ── Layout: CARDS ── info (head + reason cards + cta) beside the form.
   No details block, no map. */
.ssla-g-contact--layout-cards .ssla-g-contact-inner {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "head    form"
    "items   form"
    "cta     form";
  align-items: start;
}
.ssla-g-contact--layout-cards .ssla-g-contact-details,
.ssla-g-contact--layout-cards .ssla-g-contact-map { display: none; }

/* ── Zone → grid-area ── */
.ssla-g-contact-head    { grid-area: head; max-width: 64ch; }
.ssla-g-contact-grid    { grid-area: items; }
.ssla-g-contact-form    { grid-area: form; }
.ssla-g-contact-details { grid-area: details; }
.ssla-g-contact-cta     { grid-area: cta; }
.ssla-g-contact-map     { grid-area: map; }

/* Empty zones collapse (no cards / no map set). */
.ssla-g-contact-grid:empty { display: none; }
.ssla-g-contact-map[src=""],
.ssla-g-contact-map:not([src]) { display: none; }

/* ── Header ── */
.ssla-g-contact-eyebrow {
  color: var(--g-contact-eyebrow, inherit);
  font-size: var(--g-contact-eyebrow-size, 13px);
  letter-spacing: var(--g-contact-eyebrow-letter, 0.12em);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.ssla-g-contact-eyebrow:empty { display: none; }
.ssla-g-contact-heading {
  font-family: var(--g-contact-heading-family, inherit);
  font-size: var(--g-contact-heading-size, clamp(28px, 4vw, 42px));
  font-weight: var(--g-contact-heading-weight, 700);
  margin: 0 0 16px;
}
.ssla-g-contact-body {
  font-family: var(--g-contact-body-family, inherit);
  font-size: var(--g-contact-body-size, 17px);
  line-height: var(--g-contact-body-line-height, 1.6);
  opacity: 0.9;
}
.ssla-g-contact-body:empty { display: none; }

/* ── Reason cards grid ── */
.ssla-g-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--g-contact-card-gap, 20px);
}
.ssla-g-contact-card {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--g-contact-radius, 10px);
  padding: 18px 20px;
}
.ssla-g-contact-card-heading { font-size: 1.05em; font-weight: 700; margin: 0 0 6px; }
.ssla-g-contact-card-body { font-size: 0.95em; line-height: 1.5; opacity: 0.85; }

/* ── Details column (standard) ── */
.ssla-g-contact-details { display: flex; flex-direction: column; gap: 18px; }
.ssla-g-contact-details :where(.ssla-g-contact-address, .ssla-g-contact-hours) { line-height: 1.5; }
.ssla-g-contact-email { color: inherit; text-decoration: underline; font-weight: 600; }
.ssla-g-contact-phone { margin: 0; opacity: 0.9; }

/* ── CTA (cards) ── */
.ssla-g-contact-cta {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
  align-self: start;
}

/* ── Map (standard) ── */
.ssla-g-contact-map {
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: var(--g-contact-radius, 10px);
}

/* ── Tone: dark ── readable floor (same precedent as the source sections). */
.ssla-g-contact--tone-dark {
  --g-contact-fg:      var(--shell-text-light, #ffffff);
  --g-contact-eyebrow: var(--shell-text-light, #ffffff);
}

/* ── Responsive ── single column; areas stack in source order. */
@media (max-width: 860px) {
  .ssla-g-contact--layout-standard .ssla-g-contact-inner,
  .ssla-g-contact--layout-cards .ssla-g-contact-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "items" "form" "details" "cta" "map";
  }
  .ssla-g-contact-grid { grid-template-columns: 1fr; }
}

/* ═══ Skeleton state ═══ */
.ssla-section.ssla-g-contact {
  --g-contact-fg:                var(--brand-fg);
  --g-contact-eyebrow:           var(--brand-accent, var(--brand-fg));
  --g-contact-heading-family:    var(--brand-heading-family);
  --g-contact-heading-size:      var(--brand-h2-size-clamp);
  --g-contact-body-family:       var(--brand-body-family);
  --g-contact-section-padding:   var(--paint-section-padding, var(--brand-section-padding, 80px));
  --g-contact-content-max-width: var(--brand-content-max-width, 1120px);
  --g-contact-card-gap:          var(--brand-card-gap, 20px);
  --g-contact-radius:            var(--brand-card-radius, 10px);
}