/**
 * Contact page — full modern layout overrides (Elementor post 302).
 */

/* ── Page shell ── */

.jem-rebrand.jem-page-contact .site-main {
  background: var(--jem-cream);
}

.jem-rebrand .jem-contact-hero > .elementor-background-overlay {
  background: linear-gradient(
    115deg,
    rgb(27 58 92 / 82%) 0%,
    rgb(123 75 148 / 62%) 50%,
    rgb(45 168 155 / 40%) 100%
  ) !important;
  opacity: 1 !important;
}

.jem-rebrand .jem-contact-hero .elementor-heading-title {
  font-family: var(--jem-display) !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  color: #fff !important;
}

/* ── Registration block (Send Us a Message + Day program form) ── */

.jem-rebrand .elementor-302 .jem-contact-registration.elementor-element-6e870d58,
.jem-rebrand .elementor-302 .jem-contact-registration.elementor-element-6e870d58:not(.elementor-motion-effects-element-type-background),
.jem-rebrand .elementor-302 .jem-contact-registration.elementor-element-6e870d58 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background: linear-gradient(180deg, var(--jem-cream) 0%, var(--jem-lavender) 100%) !important;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem) !important;
}

.jem-rebrand .jem-contact-registration > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: stretch;
  max-width: 1140px !important;
}

.jem-rebrand .jem-contact-registration .elementor-column {
  width: 100% !important;
}

/* Left — intro card */

.jem-rebrand .jem-contact-intro-stack {
  background: var(--jem-surface);
  border: 1px solid var(--jem-border);
  border-radius: var(--jem-radius-xl);
  padding: clamp(1.75rem, 3vw, 2.5rem) !important;
  box-shadow: var(--jem-shadow);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  height: 100%;
  margin: 0 !important;
}

.jem-rebrand .jem-contact-registration .elementor-widget-text-editor,
.jem-rebrand .jem-contact-registration .elementor-widget-text-editor p,
.jem-rebrand .jem-contact-registration .jem-lead-copy {
  color: var(--jem-muted) !important;
}

.jem-rebrand .jem-contact-registration .elementor-heading-title {
  color: var(--jem-navy) !important;
}

.jem-rebrand .jem-contact-eyebrow {
  margin-bottom: 0.25rem;
}

.jem-rebrand .jem-contact-eyebrow .elementor-icon-list-items {
  gap: 0.65rem;
}

.jem-rebrand .jem-contact-eyebrow .elementor-icon-list-text {
  font-family: var(--jem-font) !important;
  font-size: clamp(1.35rem, 2.5vw, 1.65rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--jem-navy) !important;
}

.jem-rebrand .jem-contact-eyebrow .elementor-icon-list-icon svg {
  fill: var(--jem-purple) !important;
}

.jem-rebrand .jem-contact-subhead .elementor-heading-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--jem-purple) !important;
  margin: 0 !important;
}

.jem-rebrand .jem-contact-subhead > .elementor-widget-container {
  margin: 0 !important;
}

.jem-rebrand .jem-contact-registration .jem-contact-list-card > .elementor-widget-container {
  background: var(--jem-cream);
  border: 1px solid var(--jem-border);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  margin-top: 0.25rem;
}

.jem-rebrand .jem-contact-registration .jem-contact-list-card .elementor-icon-list-text {
  color: var(--jem-navy) !important;
  font-size: 0.98rem;
}

.jem-rebrand .jem-contact-registration .jem-contact-list-card .elementor-icon-list-icon svg {
  fill: var(--jem-teal) !important;
}

.jem-rebrand .jem-contact-registration .jem-contact-link {
  color: var(--jem-purple);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgb(123 75 148 / 25%);
}

.jem-rebrand .jem-contact-registration .jem-contact-link:hover {
  color: var(--jem-teal);
  border-bottom-color: var(--jem-teal);
}

/* Right — registration form card */

.jem-rebrand .jem-registration-form-col > .elementor-element-populated {
  border: none !important;
  border-radius: var(--jem-radius-xl) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.jem-rebrand .jem-registration-form-col > .elementor-widget-wrap {
  background: var(--jem-surface) !important;
  border: 1px solid var(--jem-border) !important;
  border-radius: var(--jem-radius-xl) !important;
  padding: clamp(1.75rem, 3vw, 2.5rem) !important;
  box-shadow: var(--jem-shadow-hover) !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.jem-rebrand .jem-registration-form-col .elementor-element-b7e7529 > .elementor-widget-container {
  margin: 0 0 0.75rem !important;
  text-align: left !important;
}

.jem-rebrand .jem-registration-form-col .elementor-element-b7e7529 .elementor-heading-title {
  font-family: var(--jem-display) !important;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
  color: var(--jem-navy) !important;
  text-align: left !important;
}

.jem-rebrand .jem-registration-form-col .elementor-form .elementor-button {
  width: 100%;
  justify-content: center;
  padding: 1rem 1.5rem !important;
  font-size: 1rem !important;
}

/* Form closing note — replace black box */

.jem-rebrand .jem-form-note > .elementor-widget-container {
  background: var(--jem-mint) !important;
  border: 1px solid rgb(45 168 155 / 22%) !important;
  border-radius: 1rem !important;
  padding: 1rem 1.15rem !important;
  margin-top: 0.75rem;
}

.jem-rebrand .jem-form-note p {
  color: var(--jem-navy) !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ── Appointment section ── */

.jem-rebrand .elementor-302 .jem-contact-appointment.elementor-element-5669c28,
.jem-rebrand .elementor-302 .jem-contact-appointment.elementor-element-5669c28:not(.elementor-motion-effects-element-type-background) {
  background: var(--jem-surface) !important;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem) !important;
}

.jem-rebrand .jem-contact-appointment > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
  max-width: 1140px !important;
}

.jem-rebrand .jem-contact-appointment .elementor-element-fbc96be > .elementor-element-populated {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.jem-rebrand .jem-contact-appointment .jem-contact-form-col > .elementor-widget-wrap {
  background: var(--jem-surface) !important;
  border: 1px solid var(--jem-border);
  border-radius: var(--jem-radius-xl);
  padding: clamp(1.75rem, 3vw, 2.25rem) !important;
  box-shadow: var(--jem-shadow);
}

.jem-rebrand .jem-contact-sidebar > .elementor-widget-wrap {
  position: sticky;
  top: 5.5rem;
}

/* ── Photo strip ── */

.jem-rebrand .jem-contact-gallery {
  background: var(--jem-cream) !important;
  padding-bottom: clamp(2.5rem, 6vw, 4rem) !important;
}

.jem-rebrand .jem-contact-gallery > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1200px !important;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.jem-rebrand .jem-contact-gallery .elementor-column {
  width: 100% !important;
}

.jem-rebrand .jem-contact-gallery .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--jem-radius-lg) !important;
  box-shadow: var(--jem-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.jem-rebrand .jem-contact-gallery .elementor-widget-image:hover img {
  transform: translateY(-4px);
  box-shadow: var(--jem-shadow-hover);
}

/* ── Responsive ── */

@media (max-width: 900px) {
  .jem-rebrand .jem-contact-registration > .elementor-container,
  .jem-rebrand .jem-contact-appointment > .elementor-container {
    grid-template-columns: 1fr !important;
  }

  .jem-rebrand .jem-contact-sidebar > .elementor-widget-wrap {
    position: static;
  }

  .jem-rebrand .jem-contact-gallery > .elementor-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .jem-rebrand .jem-contact-gallery > .elementor-container {
    grid-template-columns: 1fr;
  }
}