/* ============================================================
   Contact page
   ============================================================ */

/* ---- Panel sections (01 & 02) --------------------------- */
.contact-panel {
  padding: 3.75rem 0;
  position: relative;
  overflow: hidden;
}

.contact-panel--light { background: var(--white); }
.contact-panel--blush { background: var(--blush); }

/* 1040px, the same measure `.media-entry__inner` uses, rather than the full
   1400px shell. The copy is capped at 520px, so across the full width the
   icon and the text ended up at opposite ends of the viewport with a void
   between them — a gap that only looked deliberate while the icon was big
   enough to fill its half. */
.contact-panel__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  align-items: center;
  gap: 4rem 3.5rem;
}

/* The visual column was a full `1fr` of a 1400px grid — roughly 450px of
   white around a 140px line icon, which made a stock flask and a stock
   document the biggest things on the page. The column is now sized to the
   icon rather than the icon floating in the column, and the copy gets the
   space back. */
.contact-panel__inner--ltr { grid-template-columns: 200px minmax(0, 1fr); }
.contact-panel__inner--rtl { grid-template-columns: minmax(0, 1fr) 200px; }

/* Visual column */
.contact-panel__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}


.contact-panel__icon {
  color: var(--blue-mid);
  opacity: 0.55;
}
/* Drawn at 140 in the markup; shown at 92 so it reads as a quiet marker
   beside the text rather than as the subject of the panel. */
.contact-panel__icon svg {
  width: 92px;
  height: 92px;
}

/* Content column */
.contact-panel__heading {
  font-size: var(--fs-2xl);
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.contact-panel__text {
  font-size: var(--fs-md);
  color: var(--blue-dark);
  line-height: 1.85;
  max-width: 520px;
  margin-bottom: 2.25rem;
}

/* CTA link */
.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--red);
  border-bottom: 2px solid rgba(176,42,60,0.30);
  padding-bottom: 3px;
  transition: border-color var(--dur-base) var(--ease-out);
}

.contact-cta:hover {
  border-color: var(--red);
}

/* The arrow moves, not the gap — animating `gap` runs layout on every frame,
   and .card__arrow already solved this with a composited transform. */
.contact-cta svg {
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.contact-cta:hover svg { transform: translateX(4px); }

/* ---- Address section (03) -------------------------------- */
.contact-address {
  display: flex;
  min-height: 520px;
}

/* Left info panel */
.contact-address__info {
  flex: 0 0 42%;
  background: var(--navy);
  color: var(--blush);
  padding: 5rem 3.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Red left accent stripe */
.contact-address__info::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--red);
}


.contact-address__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.contact-address__heading {
  font-size: var(--fs-2xl);
  color: var(--blush);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.contact-address__name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--blush);
  line-height: 1.5;
  font-style: normal;
}

.contact-address__rule {
  width: 36px;
  height: 1px;
  background: rgba(247,232,228,0.18);
  margin: 1.1rem 0;
}

.contact-address__lines {
  font-style: normal;
}

.contact-address__lines p {
  font-size: var(--fs-sm);
  color: rgba(247,232,228,0.68);
  line-height: 1.9;
}

.contact-address__sublabel {
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em;
  color: rgba(247,232,228,0.58) !important;
  margin-bottom: 0.1rem;
}

/* Right map panel */
.contact-address__map {
  flex: 1;
  position: relative;
  min-height: 440px;
  background: var(--blue-dark);
}

.contact-address__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 900px) {
  .contact-panel__inner--ltr,
  .contact-panel__inner--rtl {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  /* On mobile, body always comes first for RTL panels */
  .contact-panel__inner--rtl .contact-panel__body { order: 1; }
  .contact-panel__inner--rtl .contact-panel__visual { order: 2; }

  /* Stacked, the icon sits with the copy rather than centred over it. */
  .contact-panel__visual {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .contact-panel__icon svg { width: 72px; height: 72px; }


}

@media (max-width: 767px) {
  .contact-panel { padding: 2.75rem 0; }
  .contact-panel__inner { padding: 0 1.25rem; gap: 2rem; }

  .contact-address { flex-direction: column; }
  .contact-address__info {
    flex: none;
    padding: 3.5rem 2rem 3.5rem 2.5rem;
  }
  .contact-address__map { min-height: 360px; }
}