/* ============================================================
   CONTACT PAGE — JUJO CHEMICAL
   ============================================================ */

.contact-section { background: var(--c-bg); }

.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
}

/* Info side */
.contact-info-col {}

.contact-info-head {
  margin-bottom: var(--sp-8);
}
.contact-info-title { font-size: clamp(1.5rem, 2.5vw, var(--sz-4xl)); font-weight: var(--fw-extrabold); color: var(--c-text); margin-bottom: var(--sp-3); }
.contact-info-sub   { font-size: var(--sz-base); color: var(--c-text-muted); line-height: var(--lh-relaxed); }

.contact-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.contact-info-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  transition: all var(--dur-fast);
}
.contact-info-card:hover { border-color: var(--c-border-mid); box-shadow: var(--sh-sm); }

.ci-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-xl);
  background: var(--c-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sz-lg);
  color: var(--c-secondary);
  flex-shrink: 0;
}

.ci-body {}
.ci-label { font-size: var(--sz-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); margin-bottom: var(--sp-1); }
.ci-value { font-size: var(--sz-base); font-weight: var(--fw-medium); color: var(--c-text); line-height: var(--lh-relaxed); }
.ci-value a { color: var(--c-text); text-decoration: none; }
.ci-value a:hover { color: var(--c-secondary); }

/* Map */
.contact-map {
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--c-border);
  margin-top: var(--sp-6);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: none;
}
.map-offline-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  background: var(--c-surface, #1a2a3a);
}
.map-fallback-inner {
  text-align: center;
  color: rgba(255,255,255,0.75);
  padding: var(--sp-6);
}
.map-fallback-inner i.fa-location-dot {
  font-size: 2.5rem;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}
.map-fallback-inner p {
  font-size: var(--sz-sm);
  line-height: 1.7;
  margin-bottom: var(--sp-2);
}
.map-fallback-inner strong { color: white; }

/* Social links */
.contact-socials { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.contact-social {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: var(--sz-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  text-decoration: none;
  transition: all var(--dur-fast);
}
.contact-social:hover { border-color: var(--c-secondary); color: var(--c-secondary); }

/* Directions button */
.directions-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--sz-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-secondary);
  text-decoration: none;
  margin-top: var(--sp-3);
  transition: all var(--dur-fast);
}
.directions-btn:hover { gap: var(--sp-3); color: var(--c-accent); }

/* Responsive */
@media (max-width: 1024px) { .contact-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .contact-map iframe { height: 220px; } }