/**
 * OMGEE AESTHETICS — UNIFIED LUXURY HERO SECTION
 * 
 * - Katie's face, neck, and shoulders fully visible and clear
 * - Large prize wheel on left side, half on view
 * - "Spin to Win" moved over to the right
 * - "ENTER NOW" form moved lower down below Katie's shoulder
 */

/* ==========================================================================
   HERO SECTION & BACKGROUND
   ========================================================================== */

.hero-section {
  position: relative;
  min-height: 585px;
  height: 585px;
  background-color: #FAF6F0;
  overflow: hidden;
  display: block;
  padding: 0;
}

.hero-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to bottom, transparent 75%, rgba(250, 246, 240, 0.85) 90%, #FAF6F0 100%),
    url('../assets/original_practitioner.jpg');
  background-size: 100% auto;
  background-position: left top;
  background-repeat: no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

/* Layout Container */
.hero-grid {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 585px;
  z-index: 2;
}



/* Lowered Wheel: Positioned on Left-Hand Side, Half on View */
.hero-wheel-col {
  position: absolute;
  left: 0;
  top: 240px;
  width: 380px;
  height: 380px;
  transform: translateX(-40%);
  z-index: 10;
  display: block;
}

.hero-wheel-anchor {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-normal);
}

.hero-wheel-anchor:hover {
  transform: scale(1.015);
}

/* Content Column: Anchored to Right Side */
.hero-content-col {
  display: block;
  position: static;
}

/* Spin to Win - Lowered directly above the form on the right */
.editorial-headline-wrap {
  position: absolute;
  right: 14px;
  top: 240px;
  width: 49%;
  max-width: 250px;
  text-align: right;
  z-index: 25;
}

.editorial-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #7A3922;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.95), 0 0 2px #FFFFFF;
  margin-bottom: 2px;
  text-align: right;
}

.editorial-headline {
  font-family: 'Playfair Display', "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.1rem, 6.2vw, 3.1rem);
  line-height: 0.90;
  color: var(--text-primary);
  margin-bottom: 0;
  letter-spacing: -0.01em;
  font-weight: 800;
  text-align: right;
}

.editorial-headline .line-spin {
  display: block;
  font-weight: 800;
  color: #1A0D08;
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.95), 0 0 5px #FFFFFF;
}

.editorial-headline .line-to-win {
  display: block;
  font-style: italic;
  font-weight: 800;
  color: #8A4129;
  background: linear-gradient(135deg, #5C2213 0%, #9E4E34 45%, #7D3520 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.95));
}

/* Form Card placed directly below the headline and below half way of the wheel */
.hero-form-card {
  position: absolute;
  right: 12px;
  top: 315px;
  width: 50%;
  max-width: 252px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 12px;
  border: 1px solid rgba(224, 185, 155, 0.45);
  box-shadow: 0 12px 35px rgba(45, 29, 22, 0.14);
  padding: 8px 10px 7px;
  text-align: left;
  z-index: 25;
}

@media (max-width: 420px) {
  .hero-section {
    min-height: 720px;
    height: 720px;
  }
  .hero-grid {
    min-height: 720px;
    height: 720px;
  }
  .hero-wheel-col {
    width: 340px;
    height: 340px;
    top: 230px;
    transform: translateX(-42%);
  }
  .editorial-headline-wrap {
    right: 10px;
    top: 235px;
    width: 50%;
  }
  .hero-form-card {
    right: 10px;
    top: 308px;
    width: 50%;
    padding: 8px 10px 6px;
  }
  .hero-lead-text {
    display: none;
  }
}

@media (min-width: 768px) {
  .hero-section {
    min-height: 740px;
    height: 760px;
  }
  .hero-grid {
    min-height: 740px;
  }
  .hero-bg-layer {
    background-size: min(650px, 50%) auto;
    background-position: left 10% top;
  }
  .hero-wheel-col {
    width: 480px;
    height: 480px;
    top: 240px;
    transform: translateX(-35%);
  }
  .editorial-headline-wrap {
    right: 40px;
    top: 80px;
    width: 42%;
    max-width: 360px;
  }
  .editorial-headline {
    font-size: 3rem;
  }
  .hero-lead-text {
    font-size: 0.8rem;
  }
  .hero-form-card {
    right: 40px;
    top: 470px;
    width: 42%;
    max-width: 360px;
    padding: 18px 20px 14px;
    border-radius: 14px;
  }
}