/* Variant 3: Form only (carousel on right layout) - Colors come from color-css link */
@import url('./variant1.css');

/* Form-specific overrides for Variant 3 layout */

/* Optional: ensure hero gradient uses the gold variables (variant1 already does) */

/* Variant 3 hero: use original carousel on the right (hide yoga image) */
.hero-yoga-image{display:none !important}
.hero-copy h1{font-size:clamp(1.9rem,4.2vw,3.2rem) !important}
.hero-media{display:block !important;flex:0 0 auto !important;position:relative !important;height:500px !important;aspect-ratio:1 / 1 !important;width:auto !important;max-width:none !important;min-width:0 !important;border-radius:16px !important;overflow:hidden !important;box-shadow:none !important}
.hero-carousel{position:relative !important;width:100% !important;height:100% !important}
.hero-slide{position:absolute !important;inset:0 !important;opacity:0 !important;transition:opacity .6s ease !important}
.hero-slide.active{opacity:1 !important}
.hero-slide img{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:16px !important}
/* Logo slide: use contain to show full logo with transparent background */
.hero-logo-slide img{object-fit:contain !important;background:transparent !important}

/* Tablet (600px-900px): keep side-by-side, size like Variant 1 image */
@media (max-width: 900px) and (min-width: 601px){
  .hero{padding:80px 0 60px 0 !important}
  .hero-inner{gap:32px !important;padding:0 24px !important;justify-content:space-between !important;align-items:center !important}
  .hero-copy{flex:1 1 auto !important;min-width:0 !important;max-width:none !important;padding-right:12px !important}
  .hero-copy h1{margin-bottom:16px !important;line-height:1.25;font-size:clamp(1.5rem,3.5vw,2.2rem) !important}
  .hero .subtitle{margin-bottom:20px !important;line-height:1.5;font-size:0.95rem !important}
  .hero-ctas{margin-top:16px !important}
  .hero-media{flex:0 0 auto !important;height:38vh !important;max-height:38vh !important;aspect-ratio:1 / 1 !important;width:auto !important;max-width:38vh !important;min-width:0 !important}
  .hero-slide img{height:100% !important;object-fit:cover !important}
}

/* Mobile (<600px): stack, fit on one screen */
@media (max-width: 600px){
  .hero{padding:60px 0 24px 0 !important;display:flex;align-items:center;justify-content:center}
  .hero-inner{flex-direction:column !important;gap:12px !important;padding:0 20px !important;justify-content:center;align-items:center}
  .hero-copy{max-width:100%;flex-shrink:1;text-align:center !important}
  .hero-copy h1{font-size:clamp(1.5rem,4.5vw,1.9rem) !important;margin-bottom:8px !important;line-height:1.2;text-align:center !important}
  .hero .subtitle{font-size:1rem !important;margin-bottom:12px !important;line-height:1.4;text-align:center !important}
  .hero-ctas{margin-top:8px;text-align:center !important}
  .hero .btn{padding:10px 18px !important;font-size:0.85rem !important}
  .hero-media{flex:0 0 auto !important;height:26vh !important;max-height:26vh !important;aspect-ratio:1 / 1 !important;width:auto !important;margin:0 auto 0 auto !important;padding:0 !important;margin-bottom:0 !important}
  .hero-slide img{height:100% !important;object-fit:cover !important}
}

/* Slightly wider hero content on desktop - spacing already optimized above */

/* Make the white radial gradient more subtle for Variant 3 */
.hero::after{content:"";position:absolute;inset:-10%;background:radial-gradient(60% 40% at 30% 50%, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%);pointer-events:none}

/* Color-specific button styles moved to color CSS files */


/* Fix about headshot carousel for Variant 3 */
.about-headshot-carousel{position:relative !important;box-sizing:border-box !important;aspect-ratio:1/1 !important}
.about-headshot-slide{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100% !important;min-width:100% !important;min-height:100% !important;object-fit:cover !important;object-position:center center !important;margin:0 !important;padding:0 !important;border:none !important}
.about-headshot-slide.active{z-index:2 !important}
@media (max-width: 600px){.about-headshot-carousel{aspect-ratio:1/1 !important;width:180px !important;height:180px !important;min-height:180px !important;max-height:180px !important}}

/* Header visibility on mobile: hidden until scroll (like Variant 1) */
/* Color-specific nav styles moved to color CSS files */
header.site-header{opacity:0 !important;visibility:hidden !important;position:fixed !important;top:0 !important;left:0 !important;right:0 !important;z-index:1000 !important;width:100% !important;pointer-events:none !important;height:68px !important;min-height:68px !important}
header.site-header.scrolled{opacity:1 !important;visibility:visible !important;pointer-events:auto !important}
header.site-header.scrolled .menu-toggle{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;display:inline-flex !important}
@media (min-width: 901px){
  header.site-header{opacity:1 !important;visibility:visible !important;pointer-events:auto !important}
  header.site-header .menu-toggle{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;display:inline-flex !important}
}

/* Variant 3: Images interspersed in What I Offer section - side-by-side layout */
/* Note: Base styles in styles.css handle visibility and zoom for all variants */
body.form-variant3 .offer-image-variant2{width:100%;margin:32px 0;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.12)}
body.form-variant3 .offer-image-variant2 img{width:100%;height:auto;display:block;object-fit:cover}
@media (min-width: 901px){
  /* Desktop: side-by-side layout with alternating order */
  body.form-variant3 .services .cards{display:grid !important;grid-template-columns:1fr 1fr !important;gap:40px !important;align-items:start !important}
  /* First card (1:1 Coaching) + first image: card left, image right */
  body.form-variant3 .services .cards > .card:nth-child(1){grid-column:1 !important;grid-row:1 !important}
  body.form-variant3 .services .cards > .offer-image-variant2.offer-image-1{grid-column:2 !important;grid-row:1 !important;margin:0 !important;align-self:stretch !important;display:flex !important}
  body.form-variant3 .services .cards > .offer-image-variant2.offer-image-1 img{height:100%;object-fit:cover}
  /* Second card (Group Coaching) + second image: image left, card right */
  body.form-variant3 .services .cards > .offer-image-variant2.offer-image-2{grid-column:1 !important;grid-row:2 !important;margin:0 !important;align-self:stretch !important;display:flex !important}
  body.form-variant3 .services .cards > .offer-image-variant2.offer-image-2 img{height:100%;object-fit:cover}
  body.form-variant3 .services .cards > .card:nth-child(3){grid-column:2 !important;grid-row:2 !important}
  /* Third card (Corporate Options) + Image 3: card left, image right */
  body.form-variant3 .services .cards > .card:nth-child(5){grid-column:1 !important;grid-row:3 !important}
  body.form-variant3 .services .cards > .offer-image-variant2.offer-image-3{grid-column:2 !important;grid-row:3 !important;margin:0 !important;align-self:stretch !important;display:flex !important}
  body.form-variant3 .services .cards > .offer-image-variant2.offer-image-3 img{height:100%;object-fit:cover}
}
@media (max-width: 900px){
  body.form-variant3 .offer-image-variant2{grid-column:1 / -1;margin:24px 0}
  body.form-variant3 .services .cards > .card:nth-child(5){grid-column:1 !important;grid-row:auto !important}
  body.form-variant3 .services .cards > .offer-image-variant2.offer-image-3{grid-column:1 / -1 !important;grid-row:auto !important;max-width:100%}
}

/* Testimonial hero images - rounded corners for variant 3 */
.testimonial-hero-image{border-radius:12px !important}
.testimonial-hero-image img{border-radius:12px !important}

/* Variant 3 signature styling - keep original colors */
.signature,.signature img{display:block !important;max-width:588px !important;width:588px !important;height:auto !important;max-height:240px !important;opacity:.9 !important;filter:none !important;margin:0 auto !important;transform:none !important;scale:1 !important;object-fit:contain !important;box-sizing:border-box !important}
/* More specific selector for about section to ensure no filters */
body.form-variant3 .about .signature,body.form-variant3 .about .signature img{filter:none !important}
@media (max-width: 900px){.signature,.signature img{max-width:480px !important;width:480px !important;max-height:200px !important}}
@media (max-width: 600px){.signature,.signature img{max-width:428px !important;width:428px !important;max-height:180px !important}}
/* Additional mobile constraints for iPhone */
@media screen and (max-width: 768px){.signature,.signature img{max-width:428px !important;width:428px !important;max-height:180px !important}}

/* Variant 3: Loading overlay effect */
/* Overlay visibility controlled by inline critical CSS in head */
.variant3-loading-overlay{position:fixed;inset:0;z-index:99999;pointer-events:auto;background:var(--primary)}
body:not(.form-variant3) .variant3-loading-overlay{display:none !important}
body.form-variant3 .variant3-loading-overlay{display:block !important}
/* Hide site content initially for variant 3 only - but allow it to load behind overlay */
body.form-variant3 #site-content.unlocked:not(.content-visible){opacity:0 !important;pointer-events:none !important;visibility:hidden !important}
body.form-variant3 #site-content.unlocked.content-visible{opacity:1 !important;pointer-events:auto !important;visibility:visible !important;transition:opacity 0.5s ease !important}
/* Loading rectangles - fixed position, visible immediately, positioned at 50% split, above overlay */
.loading-rect{position:fixed !important;left:0 !important;right:0 !important;width:100% !important;background:var(--primary) !important;transition:transform 0.8s cubic-bezier(0.77,0,0.175,1) 1s !important;display:flex !important;align-items:center !important;justify-content:center !important;transform:translateY(0) !important;visibility:visible !important;opacity:1 !important}
.loading-rect-top{top:0 !important;height:calc(50dvh - 1.5px) !important;max-height:calc(50vh - 1.5px) !important;border-bottom:3px solid var(--accent) !important;align-items:flex-end !important;justify-content:center !important;padding-bottom:20px !important;overflow:visible !important;position:relative !important;z-index:100001 !important}
.loading-rect-top .loading-text{position:absolute !important;bottom:23px !important;left:0 !important;right:0 !important;width:100% !important;text-align:center !important;color:#ffffff !important;opacity:1 !important;visibility:visible !important;display:block !important;z-index:100003 !important;transform:none !important;margin:0 !important;padding:0 !important;pointer-events:none !important}
.loading-rect-bottom{top:calc(50dvh - 1.5px) !important;height:calc(50dvh + 1.5px) !important;border-top:3px solid var(--accent) !important;align-items:flex-start !important;justify-content:center !important;padding-top:20px !important;z-index:100000 !important}
.loading-text{color:#fff !important;font-family:serif !important;font-size:clamp(0.9rem,2.5vw,1.2rem) !important;font-weight:400 !important;letter-spacing:0.05em !important;text-transform:uppercase !important;opacity:1 !important;visibility:visible !important;display:block !important;transform:none !important;animation:none !important;transition:none !important;text-align:center !important;width:100% !important;position:relative !important;z-index:100001 !important;font-display:block !important}
/* Ensure text is visible immediately on all devices - no delays */
.loading-rect-top .loading-text,.loading-rect-bottom .loading-text{opacity:1 !important;visibility:visible !important;display:block !important;will-change:auto !important}
/* Force immediate visibility - no transitions or animations that could delay */
body.form-variant3 .loading-text{opacity:1 !important;visibility:visible !important;display:block !important;transition:none !important;animation:none !important}
.loading-signature{max-width:75px !important;width:auto !important;height:auto !important;opacity:1 !important;filter:none !important;animation:logoGlow 2s ease-in-out infinite !important;will-change:filter,transform !important}
/* Glow animation for logo while loading - more pronounced to indicate loading */
@keyframes logoGlow{
  0%{filter:drop-shadow(0 0 10px rgba(212,165,116,0.7)) drop-shadow(0 0 20px rgba(212,165,116,0.5)) !important;opacity:1 !important;transform:scale(1) !important}
  50%{filter:drop-shadow(0 0 30px rgba(212,165,116,1)) drop-shadow(0 0 50px rgba(212,165,116,0.9)) drop-shadow(0 0 70px rgba(212,165,116,0.7)) !important;opacity:1 !important;transform:scale(1.08) !important}
  100%{filter:drop-shadow(0 0 10px rgba(212,165,116,0.7)) drop-shadow(0 0 20px rgba(212,165,116,0.5)) !important;opacity:1 !important;transform:scale(1) !important}
}
/* Stop glow when loaded */
body.form-variant3.loaded .loading-signature{animation:none !important;filter:none !important;transform:scale(1) !important;will-change:auto !important}
/* Animation when loaded: rectangles pry apart */
body.form-variant3.loaded .loading-rect-top{transform:translateY(-100%) !important}
body.form-variant3.loaded .loading-rect-bottom{transform:translateY(100%) !important}
/* Overlay fades out after rectangles complete their movement (1s pause + 0.8s animation) */
body.form-variant3.loaded .variant3-loading-overlay{pointer-events:none !important;opacity:0 !important;transition:opacity 0.3s ease 1.8s !important;visibility:hidden !important}