/* ==========================================================================
   SCPL Contact Page Styles
   Layout: Office location + branded office map (left) · Direct contact (right)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.contact-hero {
  padding-top: 150px;
  padding-bottom: var(--space-16);
  position: relative;
  background-color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   Two-Column Layout (Map Left · Contact Details Right)
   -------------------------------------------------------------------------- */
.contact-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

.contact-location-column,
.contact-details-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Shared Surface Card
   -------------------------------------------------------------------------- */
.contact-card-box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.contact-card-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

[data-theme="dark"] .contact-card-label {
  color: var(--brand-cyan);
}

.contact-card-value {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   Office Address Card
   -------------------------------------------------------------------------- */
.contact-address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}

.contact-address > span {
  display: block;
}

.contact-office-name {
  color: var(--brand-blue-dark);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

[data-theme="dark"] .contact-office-name {
  color: var(--brand-cyan);
}

.contact-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.contact-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.contact-action-row .btn {
  flex: 1 1 170px;
}

.btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.contact-protocol-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Interactive Office Map Frame
   -------------------------------------------------------------------------- */
.contact-map-frame {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface-light);
  box-shadow: var(--shadow-md);
  animation: fadeIn 0.7s ease-out 0.1s both;
}

.scpl-map {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 470px;
  background-color: var(--color-surface-light);
}

/* Leaflet integration with SCPL design tokens */
.contact-map-frame .leaflet-container {
  font-family: var(--font-primary);
  background-color: var(--color-surface-light);
}

.contact-map-frame .leaflet-tile-pane {
  filter: saturate(0.94) contrast(1.02);
}

[data-theme="dark"] .contact-map-frame .leaflet-tile-pane {
  filter: invert(1) hue-rotate(185deg) brightness(0.86) contrast(0.92) saturate(0.85);
}

.contact-map-frame .leaflet-control-attribution {
  background-color: var(--color-surface-glass);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-top-left-radius: var(--radius-xs);
}

.contact-map-frame .leaflet-control-attribution a {
  color: var(--color-accent);
}

.contact-map-frame .leaflet-bar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.contact-map-frame .leaflet-bar a {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.contact-map-frame .leaflet-bar a:hover {
  background-color: var(--color-surface-elevated);
  color: var(--color-accent);
}

.contact-map-frame .leaflet-bar a:not(:last-child) {
  border-bottom-color: var(--color-border);
}

.contact-map-frame .leaflet-popup-content-wrapper,
.contact-map-frame .leaflet-popup-tip {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

.contact-map-frame .leaflet-popup-content-wrapper {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.contact-map-frame .leaflet-popup-content {
  margin: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.contact-map-frame .leaflet-popup-close-button {
  color: var(--color-text-muted);
}

.map-popup-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.map-popup-address {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.map-popup-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
}

.map-popup-link:hover {
  color: var(--brand-cyan);
}

/* Overlay Chip inside the map frame */
.map-frame-chip {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem 0.4rem 0.45rem;
  background-color: var(--color-surface-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.map-frame-chip img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

/* Tile Failure Notice */
.map-tile-note {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 400;
  max-width: min(340px, calc(100% - 2rem));
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.map-tile-note[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Fallback Surface (Offline / Restricted Networks)
   -------------------------------------------------------------------------- */
.map-fallback {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 470px;
  padding: var(--space-8);
  text-align: center;
  background:
    radial-gradient(circle at 50% 18%, var(--color-accent-subtle) 0%, transparent 68%),
    var(--color-surface-light);
}

.map-fallback[hidden] {
  display: none;
}

.map-fallback-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
}

.map-fallback-icon svg {
  width: 26px;
  height: 26px;
}

.map-fallback-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

.map-fallback-text {
  max-width: 420px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Branded Map Pin (rendered through a Leaflet divIcon)
   A brand-gradient teardrop carrying the official SCPL logo, anchored by its tip.
   -------------------------------------------------------------------------- */
.scpl-map-pin,
.scpl-map-pin.leaflet-div-icon {
  background: transparent;
  border: none;
}

.scpl-pin {
  position: relative;
  width: 64px;
  height: 68px;
  filter: drop-shadow(0 12px 18px rgba(13, 28, 60, 0.3));
}

.scpl-pin-halo {
  position: absolute;
  top: 60px;
  left: 50%;
  width: 20px;
  height: 7px;
  margin-left: -10px;
  border-radius: 50%;
  background-color: var(--brand-cyan);
  opacity: 0.35;
  animation: pinHaloPulse 2.8s ease-in-out infinite;
}

.scpl-pin-bubble {
  position: absolute;
  top: 6px;
  left: 8px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(13, 28, 60, 0.12);
}

.scpl-pin-bubble img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #FFFFFF;
  transform: rotate(45deg);
}

@keyframes pinHaloPulse {
  0%, 100% {
    transform: scale(0.75);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.08;
  }
}

/* --------------------------------------------------------------------------
   Direct Contact Card (Right Column)
   -------------------------------------------------------------------------- */
.contact-person-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--color-accent-subtle) 0%, transparent 55%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

.contact-person-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
}

.contact-person-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.contact-person-avatar {
  flex-shrink: 0;
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  border: 2px solid var(--color-surface);
  box-shadow: 0 8px 20px var(--brand-cyan-glow);
}

.contact-person-name {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.contact-person-role {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.contact-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-surface-light);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-normal);
}

.contact-detail-item:hover {
  border-color: var(--color-border-hover);
  background-color: var(--color-surface-elevated);
  transform: translateX(3px);
}

.contact-detail-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
}

[data-theme="dark"] .contact-detail-icon {
  color: var(--brand-cyan);
}

.contact-detail-icon svg {
  width: 18px;
  height: 18px;
}

.contact-detail-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-detail-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.contact-detail-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  word-break: break-word;
  transition: color var(--transition-fast);
}

.contact-detail-value:hover {
  color: var(--brand-cyan);
}

.contact-detail-value-static:hover {
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Operational Footprint List
   -------------------------------------------------------------------------- */
.contact-footprint-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.contact-footprint-list li {
  position: relative;
  padding-left: 1rem;
  line-height: 1.6;
}

.contact-footprint-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
}

/* --------------------------------------------------------------------------
   Responsive Behaviour
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .contact-layout-grid {
    gap: var(--space-8);
  }

  .scpl-map,
  .map-fallback {
    height: 420px;
  }
}

@media (max-width: 920px) {
  .contact-layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Surface the direct contact details above the map on narrow viewports */
  .contact-details-column {
    order: -1;
  }
}

@media (max-width: 640px) {
  .contact-card-box,
  .contact-person-card {
    padding: var(--space-6);
  }

  .scpl-map,
  .map-fallback {
    height: 340px;
  }

  .contact-action-row .btn {
    flex: 1 1 100%;
  }

  .contact-person-avatar {
    width: 54px;
    height: 54px;
    font-size: var(--text-lg);
  }

  .map-frame-chip {
    max-width: calc(100% - 2rem);
  }
}