/* ============================================================
   CONTACT PAGE STYLES
============================================================ */

/* ---- Page Banner (shared with products) ---- */
.page-banner {
  padding: 7rem 0 3.5rem;
  background-image: linear-gradient(135deg, rgba(7, 63, 50, 0.78) 0%, rgba(5, 46, 36, 0.85) 100%),
                    url('heroimage.avif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.page-banner .eyebrow {
  color: var(--color-jonquil);
}

.page-banner .heading-1 {
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.page-banner .body-text {
  color: rgba(255, 255, 255, 0.7);
  max-width: 500px;
  margin-inline: auto;
}

.breadcrumb {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-jonquil);
}

.breadcrumb__sep {
  margin-inline: 0.5rem;
}

/* ---- Contact Page Section ---- */
.contact-page {
  background: #FFE6A6;
}

.contact-page__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.contact__desc {
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}

/* ---- Contact Details List ---- */
.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-detail-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #F6F4F1;
  border-radius: var(--radius-card);
  padding: 1.125rem 1.5rem;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.contact-detail-item--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.contact-detail-item--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* ---- Map Section ---- */
.map-section {
  background: var(--bg-primary);
  padding-block: var(--section-py);
}

.map-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(7, 63, 50, 0.08);
}

.map-wrap iframe {
  display: block;
  width: 100%;
  min-height: 400px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .contact-page__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .page-banner {
    padding: 6rem 0 2.5rem;
  }

  .contact-page__inner {
    gap: 2.5rem;
  }

  .map-wrap iframe {
    min-height: 300px;
  }
}

@media (max-width: 480px) {
  .contact-detail-item {
    padding: 1rem;
  }

  .contact-card__value {
    font-size: 0.875rem;
    word-break: break-all;
  }

  .map-wrap iframe {
    min-height: 250px;
  }
}