/*
  VIVIDEAR Contact Page
  WordPress-ready contact intro, support information, contact form, social links, and map layout.
*/


/* Contact Intro */

.contact-page {
  background:
    radial-gradient(circle at 8% 8%, rgba(86, 215, 209, .18), transparent 28%),
    linear-gradient(180deg, var(--color-surface-soft), var(--color-surface));
}
.contact-page__intro {
  padding-block: var(--space-12) var(--space-8);
}
.contact-page__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  max-width: 100%;
  margin-block-end: var(--space-6);
  padding: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.contact-page__breadcrumb a {
  color: var(--primary-blue);
}
.contact-page__intro .eyebrow {
  display: inline-flex;
}
.contact-page__intro h1 {
  max-width: 760px;
  margin-block: var(--space-3) 0;
}
.contact-page__intro p {
  max-width: 720px;
  margin-block-start: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body);
}


/* Contact Layout */

.contact-page__main {
  padding-block: var(--space-8) var(--space-16);
}
.contact-page__layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
}
.contact-page__info,
.contact-page__form,
.contact-page__map-panel {
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  border-radius: var(--radius-section);
  box-shadow: var(--shadow-card);
}


/* Contact Info Panel */

.contact-page__info {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
}
.contact-page__info h2,
.contact-page__form h2 {
  margin-block: 0 var(--space-3);
}
.contact-page__info-list {
  display: grid;
  gap: var(--space-4);
}
.contact-page__info-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.contact-page__info-item > span {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--white);
  background: linear-gradient(135deg, var(--primary-blue), var(--aqua));
  border-radius: var(--radius-circle);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
}
.contact-page__info-item strong {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--deep-navy);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
}
.contact-page__info-item a {
  color: var(--primary-blue);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}
.contact-page__info-item p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--line-height-body);
}


/* Contact Form */

.contact-page__form {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-8);
}
.contact-page__form-header p,
.contact-page__form-actions p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--line-height-body);
}
.contact-page__field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.contact-page__form label {
  display: grid;
  gap: var(--space-2);
  color: var(--deep-navy);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.contact-page__form input,
.contact-page__form textarea {
  width: 100%;
  min-width: 0;
  padding: 0 var(--space-4);
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  font: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.contact-page__form input {
  min-height: 56px;
}
.contact-page__form textarea {
  min-height: 160px;
  padding-block: var(--space-4);
  resize: vertical;
}
.contact-page__form input:focus,
.contact-page__form textarea:focus {
  border-color: var(--primary-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgba(61, 126, 255, .14);
}
.contact-page__form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}


/* Social Links */

.contact-page__socials {
  display: grid;
  gap: var(--space-3);
}
.contact-page__socials h3,
.contact-page__support-card h3 {
  margin: 0;
  font-size: var(--font-size-lg);
}
.contact-page__socials > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.contact-page__socials a {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--deep-navy);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  transition: transform var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}
.contact-page__socials a:hover {
  color: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}


/* Map Section */

.contact-page__map {
  padding-block: var(--space-4) var(--space-8);
}
.contact-page__map-panel {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: stretch;
  overflow: hidden;
  padding: var(--space-4);
  min-height: 390px;
}
.contact-page__map-panel iframe {
  display: block;
  width: 100%;
  min-height: 360px;
  border: 0;
  border-radius: var(--radius-xl);
}
.contact-page__map-card {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--text-secondary);
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 215, 209, .28), transparent 40%),
    linear-gradient(135deg, var(--blue-light), var(--color-surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.contact-page__map-card .eyebrow {
  margin-block-end: var(--space-1);
}
.contact-page__map-card h2 {
  margin: 0;
  color: var(--deep-navy);
}
.contact-page__map-card p {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body);
}
.contact-page__map-card a {
  justify-self: start;
  margin-block-start: var(--space-4);
  color: var(--primary-blue);
  font-weight: var(--font-weight-bold);
}


/* Support Note */

.contact-page__support-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 215, 209, .28), transparent 38%),
    linear-gradient(135deg, var(--blue-light), var(--teal-light));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.contact-page__support-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--line-height-body);
}
.contact-page__support-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.contact-page__support-card a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--space-3);
  color: var(--primary-blue);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}


/* Responsive page-specific rules */

@media (max-width: 1024px) {
  .contact-page__layout,
  .contact-page__map-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .contact-page__intro {
    padding-block: var(--space-10) var(--space-6);
  }

  .contact-page__map {
    padding-block: var(--space-4) var(--space-8);
  }

  .contact-page__main {
    padding-block: var(--space-8) var(--space-12);
  }

  .contact-page__info,
  .contact-page__form,
  .contact-page__map-panel {
    border-radius: var(--radius-xl);
  }

  .contact-page__info,
  .contact-page__form {
    padding: var(--space-6);
  }

  .contact-page__field-grid {
    grid-template-columns: 1fr;
  }

  .contact-page__map-panel,
  .contact-page__map-panel iframe {
    min-height: 360px;
  }

  .contact-page__map-panel {
    padding: var(--space-3);
  }
}

@media (max-width: 520px) {
  .contact-page__breadcrumb {
    width: 100%;
  }

  .contact-page__info-item {
    grid-template-columns: 1fr;
  }

  .contact-page__form-actions,
  .contact-page__form-actions .btn {
    width: 100%;
  }

  .contact-page__map-panel iframe {
    min-height: 300px;
  }
}