/* Form base styles */
.hero-enroll-form {
  display: none;
  background: var(--custom-bg-card);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 12px 35px var(--custom-shadow-medium);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--custom-gray-medium);
  font-size: 0.92rem;
}

/* Form inputs */
.hero-enroll-form .form-control,
.hero-enroll-form .form-select {
  border-radius: 8px !important;
  border: 1px solid var(--custom-gray-light) !important;
  padding: 0.2rem 0.5rem !important;
  font-size: 0.92rem !important;
  background: var(--custom-white) !important;
  transition: all 0.2s;
}

.hero-enroll-form .form-control:focus,
.hero-enroll-form .form-select:focus {
  border-color: var(--custom-teal) !important;
  box-shadow: 0 0 0 0.2rem rgba(10,148,143,0.15) !important;
  transform: translateY(-1px);
}

/* Labels & radios */
.hero-enroll-form .form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--custom-gray-medium);
  margin-bottom: 0.4rem;
}

.hero-enroll-form .form-check-input {
  accent-color: var(--custom-teal);
  cursor: pointer;
}

/* ==========================================
   DECISION LOGIC:
   - Desktop (≥1024px) = FORM
   - Tablet landscape (768-1023px + landscape + height≥600px) = FORM
   - Phones landscape (width<768px OR height<600px) = BUTTON
   - Portrait anything = BUTTON
   ========================================== */

/* DESKTOP: Always form */
@media (min-width: 1024px) {
  .hero-inner {
    display: flex !important;
    flex-direction: row !important;
    gap: 2.5rem !important;
    align-items: center !important;
  }
  .hero-text {
    flex: 1 1 55% !important;
    order: 1 !important;
    padding-right: 1rem !important;
  }
  .hero-cta {
    flex: 0 0 auto !important;
    order: 2 !important;
    width: auto !important;
    max-width: 420px !important;
  }
  .hero-enroll-form {
    display: block !important;
    width: 100% !important;
  }
  .cta-btn-mobile {
    display: none !important;
  }
}

/* TABLET LANDSCAPE: iPad/tablets in horizontal = FORM */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) and (min-height: 600px) {
  .hero-inner {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem !important;
    align-items: center !important;
  }
  .hero-text {
    flex: 1 1 50% !important;
    order: 1 !important;
    padding-right: 1rem !important;
  }
  .hero-cta {
    flex: 0 0 auto !important;
    order: 2 !important;
    width: auto !important;
    max-width: 380px !important;
  }
  .hero-enroll-form {
    display: block !important;
    width: 100% !important;
    padding: 1.2rem !important;
    font-size: 0.88rem !important;
  }
  .cta-btn-mobile {
    display: none !important;
  }
}

/* ALL OTHER CASES: Button only (phones landscape, portrait everything) */
@media (max-width: 767px),
       (orientation: portrait),
       (orientation: landscape) and (max-height: 599px) {
  .hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
  .hero-text {
    order: 1 !important;
    width: 100% !important;
    padding-right: 0 !important;
  }
  .hero-cta {
    order: 2 !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  .hero-enroll-form {
    display: none !important;
  }
  .cta-btn-mobile {
    display: block !important;
    width: 100% !important;
  }
}