/* Section: contact_details — details card + network bar + HQ map (EXALCO-Contact.dc.html "Contact details map") */

.ex-contact-details__grid {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) 1.25fr;
  gap: clamp(18px, 2vw, 32px);
  align-items: stretch;
}
.ex-contact-details__grid--single { grid-template-columns: minmax(0, 1fr); }

.ex-contact-details__aside { display: flex; flex-direction: column; gap: var(--ex-space-4); min-width: 0; }

.ex-contact-details__card {
  flex: 1;
  padding: 24px 26px;
  border: .5px solid var(--ex-hairline-strong);
  background: var(--ex-tint);
}
.ex-contact-details__eyebrow.ex-eyebrow { margin-bottom: 16px; }
.ex-contact-details__company {
  margin: 0 0 6px;
  font-size: clamp(20px, 1.8vw, 27px);
  font-weight: var(--ex-fw-title);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ex-ink);
}
/* Rendered values: the mockup sets no line-height on the registry number, the phone / email values, the network
   label and the map caption, so they render at `normal` (13 / 16 / 16 / 11px lines). */
.ex-contact-details__gemi { margin: 0 0 16px; font-size: 12px; line-height: normal; color: var(--ex-text-muted); }

.ex-contact-details__list { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; }
.ex-contact-details__row { display: flex; align-items: center; gap: 12px; color: var(--ex-ink); }
.ex-contact-details__row--top { align-items: flex-start; }
.ex-contact-details__row--link { transition: color var(--ex-t-fast); }
.ex-contact-details__row--link:hover,
.ex-contact-details__row--link:focus-visible { color: var(--ex-red); }

.ex-contact-details__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: var(--ex-border-w) solid var(--ex-red);
  color: var(--ex-red);
}
.ex-contact-details__icon--light { border-color: rgba(255, 255, 255, .4); color: var(--ex-white); }

.ex-contact-details__address { font-size: 13.5px; font-style: normal; font-weight: 600; line-height: 1.6; color: var(--ex-ink); }
.ex-contact-details__address-line,
.ex-contact-details__address-secondary { display: block; }
.ex-contact-details__address-secondary { font-weight: 400; color: var(--ex-text-muted); }

.ex-contact-details__value {
  padding-bottom: 2px;
  border-bottom: var(--ex-border-w) solid var(--ex-line-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  overflow-wrap: anywhere;
}
/* Fax is not a link: no link underline */
.ex-contact-details__value--plain { padding-bottom: 0; border-bottom: 0; }

.ex-contact-details__network {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--ex-dark);
  color: var(--ex-white);
  transition: background var(--ex-t-base);
}
.ex-contact-details__network:hover,
.ex-contact-details__network:focus-visible { background: var(--ex-red); color: var(--ex-white); }
.ex-contact-details__network-label { font-size: 13.5px; font-weight: 800; line-height: normal; letter-spacing: .08em; }
.ex-contact-details__network-arrow { margin-left: auto; font-weight: 700; }

.ex-contact-details__map {
  position: relative;
  min-height: clamp(360px, 40vw, 480px);
  margin: 0;
  border: var(--ex-border-w) solid var(--ex-ink);
  background: var(--ex-grey-img);
  overflow: hidden;
}
.ex-contact-details__map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ex-contact-details__map-caption {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: var(--ex-z-raised);
  padding: 6px 10px;
  background: rgba(255, 255, 255, .9);
  color: var(--ex-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .14em;
}

@media (max-width: 1199px) {
  .ex-contact-details__grid { grid-template-columns: minmax(0, 1fr); }
  .ex-contact-details__map { min-height: clamp(300px, 52vw, 440px); }
}

@media (max-width: 899px) {
  .ex-contact-details__row--link { min-height: var(--ex-touch); }
  .ex-contact-details__icon { width: 40px; height: 40px; }
}

@media (max-width: 599px) {
  .ex-contact-details__card { padding: 20px 18px; }
  .ex-contact-details__network { padding: 16px 18px; }
  .ex-contact-details__map { min-height: 300px; }
  .ex-contact-details__map-caption { right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-contact-details__row--link,
  .ex-contact-details__network { transition: none; }
}