/* ==========================================================================
   CUCSR — contact.html specific styles
   ========================================================================== */

.page-hero { padding-block: var(--sp-7) var(--sp-5); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info h3, .contact-form-wrap h3 { margin-bottom: var(--sp-4); }

.info-block {
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--color-line);
}
.info-block h4 { font-size: var(--fs-sm); color: var(--color-teal); margin-bottom: 0.3rem; }
.info-block p { font-size: var(--fs-sm); color: var(--color-ink); }
.info-block a { color: var(--color-navy-800); transition: color var(--dur-fast); }
.info-block a:hover { color: var(--color-navy-500); }

.map-embed {
  margin-top: var(--sp-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-line);
  aspect-ratio: 4 / 3;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; }

.contact-form-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}