/* === 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, var(--paint-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; }

/* ── Per-method icon rows (v3.44.52) ──
   Each detail method (address/hours/email/phone) is wrapped in a
   .ssla-g-contact-detail flex row: an optional leading icon + the method
   element. The icon keyword → flat SVG happens in the bridge; the wrapper is
   :empty-hidden when no icon. The svg is capped for BOTH the Hub (.ss-icon)
   and local (.ssla-icon) render seams to --g-contact-icon-size so the Hub
   glyph can't balloon (cf. the g-cards 318px fix in v3.44.51). Icon defaults
   to the section EYEBROW/accent color; icons use currentColor. When a method
   is suppressed (empty value) the row has only the icon span left and collapses
   via :has() — no phantom gap, so iconless/empty instances are unchanged. */
.ssla-g-contact-detail { display: flex; gap: 12px; align-items: flex-start; }
.ssla-g-contact-detail:not(:has(> :nth-child(2))) { display: none; }
.ssla-g-contact-method-icon:empty { display: none; }
.ssla-g-contact-method-icon {
  flex: 0 0 auto;
  color: var(--g-contact-eyebrow, currentColor);
  line-height: 1;
}
.ssla-g-contact-method-icon .ssla-icon,
.ssla-g-contact-method-icon .ss-icon {
  width: var(--g-contact-icon-size, 20px);
  height: var(--g-contact-icon-size, 20px);
  display: block;
}

/* Icon size — v3.44.52. Section-level affordance (icon_size variant): the
 * author picks Small/Medium/Large; each sets the --g-contact-icon-size token
 * consumed by the method-icon svg cap above. Medium mirrors the default. */
.ssla-g-contact--icon-size-small  { --g-contact-icon-size: 16px; }
.ssla-g-contact--icon-size-medium { --g-contact-icon-size: 20px; }
.ssla-g-contact--icon-size-large  { --g-contact-icon-size: 24px; }

/* ── 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);
  --g-contact-icon-size:         20px;
}