/* ==========================================================================
   PAGES-CONTACT.CSS — Contact page styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTACT HERO
   -------------------------------------------------------------------------- */
.contact-hero {
  padding-block: var(--space-12) var(--space-8);
  text-align: center;
}

.contact-hero__title {
  margin-bottom: var(--space-3);
}

.contact-hero__desc {
  max-width: 55ch;
  margin-inline: auto;
  font-size: var(--font-size-lg);
}

/* --------------------------------------------------------------------------
   CONTACT LAYOUT
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: start;
}

.contact-form-panel {
  padding: var(--space-6);
}

.contact-info {
  display: grid;
  gap: var(--space-5);
}

.contact-info-card {
  padding: var(--space-5);
}

.contact-info-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  display: grid;
  place-items: center;
  font-size: var(--font-size-lg);
}

.contact-info-card__title {
  margin-bottom: var(--space-2);
}

.contact-info-card a {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}