/* ==========================================================================
   Contact — split layout (doc 10 §5.12). Form left, details + map facade right.
   The form itself is styled by the form-contact partial's scoped .cform-* CSS.
   ========================================================================== */

.contact__grid { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 940px) {
  .contact__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-9); }
}

/* Left column: keep the fixed-width form left-aligned inside its column */
.contact__form-col .cform { margin-inline: 0; }
.contact__preselect {
  margin-bottom: var(--sp-5); padding: 12px 16px;
  background: var(--tint); border-radius: var(--radius);
  font-size: var(--fs-small); color: var(--text);
}

/* Right column */
.contact__card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-6);
}
.contact__card-title { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.contact__item { display: grid; gap: 4px; }
.contact__label { margin: 0; }
.contact__value {
  font-size: var(--fs-body); color: var(--text); font-style: normal;
  line-height: 1.5; text-decoration: none; word-break: break-word;
}
a.contact__value:hover { color: var(--accent-deep); text-decoration: underline; }

.contact__discovery {
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.contact__discovery-copy { font-weight: 600; margin-bottom: var(--sp-3); }
.contact__discovery-cta { width: 100%; justify-content: center; }
.contact__discovery-note { margin: var(--sp-3) 0 0; text-align: center; }

/* --- Static map facade (no live iframe) ------------------------------------ */
.contact__map {
  position: relative; display: block; margin-top: var(--sp-5);
  min-height: 200px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); text-decoration: none; color: var(--text);
  background:
    radial-gradient(120% 120% at 70% 20%, var(--tint), transparent 60%),
    var(--surface);
  transition: border-color var(--dur-hover) ease-out, transform var(--dur-hover) ease-out;
}
.contact__map:hover { border-color: var(--accent-deep); transform: translateY(-2px); }
.contact__map-grid {
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
}
.contact__map-pin {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  color: var(--accent-deep); filter: drop-shadow(0 4px 6px rgba(22,51,0,0.25));
}
.contact__map-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-4) var(--sp-5);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top: 1px solid var(--border);
}
.contact__map-label strong { font-size: var(--fs-body); }

@media (prefers-reduced-motion: reduce) {
  .contact__map:hover { transform: none; }
}