/* ============================================
   MOBILE PORTRAIT HERO OPTIMIZATION
   Targets portrait orientation only
   Desktop and landscape remain unchanged
   ============================================ */

/* Portrait orientation only - no changes to desktop/landscape */
@media (orientation: portrait) {
  
  /* Define header height variable for calculations */
  :root { 
    --header-h: 70px; /* Matches the fixed header height from inline CSS */
  }

  /* 1) Safe height: avoid 100vh bugs, account for browser UI */
  .hero {
    min-height: min(100svh, 90dvh) !important;
    display: grid !important;
    align-content: center !important;
    
    /* 2) Prevent header overlap */
    padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)) !important;
    scroll-margin-top: var(--header-h) !important;
    
    /* 3) Background image framing for the <img> element */
    position: relative !important;
    overflow: hidden !important;
  }

  /* Optimize the hero background image positioning */
  .hero-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 35% !important; /* Shift focal point slightly up */
    aspect-ratio: 16/9 !important; /* Prevents CLS */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
  }

  /* 4) Improve readability with subtle overlay (keeping existing overlay but enhancing) */
  .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.30) 0%,
      rgba(0,0,0,0.15) 40%,
      rgba(0,0,0,0) 100%
    ) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  /* Ensure hero overlay doesn't conflict */
  .hero-overlay {
    opacity: 0.7 !important; /* Reduce existing overlay slightly */
  }

  /* 5) Fluid, modern, legible typography that won't crowd */
  .hero-title {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-trust span {
    font-size: clamp(14px, 3.9vw, 18px) !important;
    line-height: 1.45 !important;
  }

  /* 6) Optimize CTA buttons for mobile portrait */
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 1.5rem !important;
  }
  
  .hero-actions .btn {
    min-height: 44px !important;
    padding: 12px 18px !important;
    width: 100% !important;
    max-width: 280px !important;
    font-size: clamp(14px, 4vw, 16px) !important;
  }

  /* 7) Optimize content container spacing and layout */
  .hero-content {
    display: grid !important;
    gap: clamp(12px, 3vh, 20px) !important;
    padding: clamp(16px, 6vh, 48px) 2rem !important;
    max-width: 90vw !important;
    margin: 0 auto !important;
    text-align: center !important;
    position: relative !important;
    z-index: 3 !important;
  }

  /* Optimize rotating word container for mobile */
  .rotating-word-container {
    min-width: clamp(180px, 40vw, 280px) !important;
    height: 1.2em !important;
  }

  /* Trust section spacing adjustment */
  .hero-trust {
    margin: 1rem 0 !important;
  }
}

/* iOS Safari fallback for older versions */
@supports (-webkit-touch-callout: none) {
  @media (orientation: portrait) {
    .hero {
      min-height: -webkit-fill-available !important;
    }
  }
}

/* Ensure proper contrast for accessibility */
@media (orientation: portrait) and (prefers-contrast: high) {
  .hero::after {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.50) 0%,
      rgba(0,0,0,0.25) 40%,
      rgba(0,0,0,0.10) 100%
    ) !important;
  }
}

/* Reduced motion preference support */
@media (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .hero-content {
    gap: 16px !important;
  }
  
  .rotating-word {
    transition: none !important;
  }
}