/* 
 * Responsive Hero Section - FINAL OPTIMIZED VERSION
 * Version: 8.1 - Fixed icon wrapping and avatar centering
 * Desktop (>950px): PRESERVED EXACTLY - NO CHANGES
 * Mobile (<950px): Optimized viewport-based system
 * 
 * Final Improvements:
 * - Larger avatars on mobile screens (30vh base)
 * - No backdrop circle on mobile (under 768px) - cleaner look
 * - More space between avatar and text
 * - Fixed social icons wrapping with smaller gaps
 * - Perfect avatar centering
 * - Scroll arrows always visible and safe from edge
 */

/* ============================================
   DESKTOP: NO CHANGES WHATSOEVER
   Perfect side-by-side design preserved above 950px
   ============================================ */

/* Only apply height-based adjustments on desktop screens */
@media (min-width: 951px) and (max-height: 700px) {
    .hero {
        min-height: 100vh;
        padding: 90px 0 40px;
    }
}

@media (min-width: 951px) and (max-height: 600px) {
    .hero {
        min-height: 100vh;
        padding: 80px 0 35px;
    }
}

/* Desktop width-based sizing (preserving original) */
@media (min-width: 951px) and (max-width: 1199.98px) {
    h1 {
        font-size: 3rem;
    }
    
    .profile-img-container,
    .profile-backdrop {
        width: 280px;
        height: 280px;
    }
}

/* ============================================
   MOBILE/TABLET: OPTIMIZED VIEWPORT-BASED SYSTEM
   Applies below 950px
   ============================================ */

@media (max-width: 950px) {
    /* ===== CORE LAYOUT SYSTEM ===== */
    .hero {
        /* Lock to exact viewport height */
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
        
        /* Flexbox for perfect distribution */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Responsive padding */
        padding-top: 70px !important;    /* offset the fixed header */
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        margin: 0 !important;
    }

    .scroll-indicator { 
        bottom: max(3vh, env(safe-area-inset-bottom)); 
    }
    
    .hero-content {
        /* Flexbox column layout */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Full height with proper spacing */
        height: 100% !important;
        width: 100% !important;
        max-width: 600px !important;
        
        /* Let flex handle spacing */
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 auto !important;
        
        /* Center text */
        text-align: center !important;
    }
    
    /* ===== STACKING ORDER ===== */
    .hero-image {
        order: 1;
        /* Avatar container with MUCH MORE spacing below */
        flex: 0 0 auto !important;
        margin: 0 0 5vh 0 !important;
        /* Perfect centering */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .hero-text {
        order: 2;
        /* Text section */
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .social-links {
        order: 3;
        /* Social links with space above */
        flex: 0 0 auto !important;
        justify-content: center !important;
        margin: 3.5vh 0 0 0 !important;
    }
    
    /* ===== AVATAR SIZING - LARGER ON MOBILE ===== */
    .profile-img-container,
    .profile-backdrop {
        /* INCREASED size - 30vh base (was 28vh) */
        width: 30vh !important;
        height: 30vh !important;
        
        /* Higher max size for taller screens */
        max-width: 340px !important;
        max-height: 340px !important;
        
        /* Min size for very short screens */
        min-width: 180px !important;
        min-height: 180px !important;
        
        /* Perfect centering */
        margin: 0 auto !important;
    }
    
    /* CRITICAL: Backdrop positioning for centered layout - REDUCED OFFSET */
    .profile-backdrop {
        top: 0.8vh !important;
        left: -1.2vh !important; /* FIXED: Reduced from -2.5vh for better centering */
    }
    
    /* CRITICAL: Ensure circles-composition wrapper is centered */
    .circles-composition {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
    }
    
    /* ===== TYPOGRAPHY SCALING WITH GENEROUS SPACING ===== */
    
    /* "Hello, I'm" text */
    .hero-text h3:first-child {
        font-size: clamp(0.95rem, 2.5vh, 1.35rem) !important;
        margin: 0 0 1vh 0 !important;
        line-height: 1.3 !important;
    }
    
    /* Main name heading */
    .hero-text h1 {
        font-size: clamp(1.9rem, 5.5vh, 3.4rem) !important;
        margin: 1vh 0 !important;
        line-height: 1.2 !important;
    }
    
    /* "AI Researcher" subtitle */
    .hero-text h3:not(:first-child) {
        font-size: clamp(1.05rem, 2.9vh, 1.45rem) !important;
        margin: 1vh 0 2vh 0 !important;
        line-height: 1.3 !important;
    }
    
    /* Biography paragraph */
    .hero-text p {
        font-size: clamp(0.88rem, 2.1vh, 1.15rem) !important;
        line-height: 1.5 !important;
        margin: 2vh auto !important;
        max-width: 90% !important;
    }
    
    /* ===== SOCIAL LINKS - FIXED WRAPPING ISSUE ===== */
    .social-links {
        /* CRITICAL FIX: Smaller gap to prevent wrapping */
        gap: 0.7rem !important;
        flex-wrap: wrap !important;
    }
    
    .social-links li {
        margin: 0 !important;
    }
    
    .social-links a {
        width: clamp(36px, 4.8vh, 48px) !important;
        height: clamp(36px, 4.8vh, 48px) !important;
        font-size: clamp(1rem, 2.1vh, 1.3rem) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ===== SCROLL INDICATOR - SAFE FROM EDGE ===== */
    .scroll-indicator {
        bottom: 6vh !important;
        font-size: clamp(0.7rem, 1.5vh, 1rem) !important;
    }
    
    .scroll-arrow {
        width: clamp(15px, 2vh, 20px) !important;
        height: clamp(15px, 2vh, 20px) !important;
        margin: calc(clamp(15px, 2vh, 20px) / -2) !important;
    }
}


/* ============================================
   TABLET OPTIMIZATIONS (768px - 950px)
   Keep backdrop, larger avatar
   ============================================ */
@media (max-width: 950px) and (min-width: 768px) {
    .profile-img-container,
    .profile-backdrop {
        width: 30vh !important;
        height: 30vh !important;
        max-width: 360px !important;
        max-height: 360px !important;
    }
    
    .profile-backdrop {
        top: 0.9vh !important;
        left: -10vh !important; /* FIXED: Reduced from -2.6vh for better centering */
        display: block !important;
    }
    
    .hero-image {
        margin: 0 0 5.5vh 0 !important;
    }
    
    .hero-text p {
        max-width: 100% !important;
        font-size: 1.4rem !important;
    }
    
    .social-links {
        margin: 4vh 0 0 0 !important;
        gap: 0.8rem !important;
    }
}

/* ============================================
   MOBILE OPTIMIZATIONS (576px - 768px)
   Standard mobile phones - NO BACKDROP
   Includes iPhone XR (414px)
   ============================================ */
@media (max-width: 767px) and (min-width: 576px) {
    .profile-img-container,
    .profile-backdrop {
        width: 30vh !important;
        height: 30vh !important;
        max-width: 280px !important;
        max-height: 280px !important;
        min-width: 200px !important;
        min-height: 200px !important;
    }
    
    .hero-image {
        margin: 0 0 4.5vh 0 !important;
    }
    
    .hero-text p {
        max-width: 92% !important;
    }
    
    .social-links {
        margin: 3.5vh 0 0 0 !important;
        gap: 0.7rem !important;
    }
    
    .social-links a {
        width: clamp(36px, 4.8vh, 46px) !important;
        height: clamp(36px, 4.8vh, 46px) !important;
        font-size: clamp(1rem, 2vh, 1.25rem) !important;
    }
}

/* ============================================
   SMALL MOBILE (below 576px)
   Compact phones - NO BACKDROP
   ============================================ */
@media (max-width: 575px) {
    .profile-img-container,
    .profile-backdrop {
        width: 22vh !important;
        height: 22vh !important;
        max-width: 260px !important;
        max-height: 260px !important;
        min-width: 190px !important;
        min-height: 190px !important;
        border: 2px solid var(--secondary);
    }

    .profile-backdrop {
        top: 0.9vh !important;
        left: -7vh !important; /* FIXED: Reduced from -2.6vh for better centering */
        display: block !important;
        border: 2px solid var(--secondary);
    }
    
    .hero-image {
        margin: 0 0 4.2vh 0 !important;
    }

    .hero-text h3:first-child {
        font-size: 1.5rem !important;  /* "Hello, I'm" */
    }
    
    .hero-text h1 {
        font-size: 2.5rem !important;  /* "Didier Merk" */
    }
    
    .hero-text h3:not(:first-child) {
        font-size: 1rem !important;  /* "AI Researcher" */
    }
    
    .hero-text p {
        max-width: 100% !important;
        font-size: 0.95rem !important;
    }
    
    .social-links {
        margin: 3.2vh 0 0 0 !important;
        gap: 0.7rem !important;
    }
    
    .social-links a {
        width: clamp(36px, 4.5vh, 44px) !important;
        height: clamp(36px, 4.5vh, 44px) !important;
    }
}

/* ============================================
   VERY SMALL MOBILE (below 400px)
   Extra compact screens - NO BACKDROP
   ============================================ */
@media (max-width: 399px) {
    .profile-img-container,
    .profile-backdrop {
        width: 26vh !important;
        height: 26vh !important;
        max-width: 240px !important;
        max-height: 240px !important;
        min-width: 180px !important;
        min-height: 180px !important;
    }
    
    .hero-image {
        margin: 0 0 4vh 0 !important;
    }
    
    .social-links {
        gap: 0.65rem !important;
    }
    
    .social-links a {
        width: clamp(34px, 4.2vh, 42px) !important;
        height: clamp(34px, 4.2vh, 42px) !important;
    }
}

/* ============================================
   SHORT SCREENS (height < 700px)
   Landscape phones and short displays
   ============================================ */
@media (max-width: 950px) and (max-height: 700px) {
    .profile-img-container {
        /* Smaller avatar on short screens */
        width: 26vh !important;
        height: 26vh !important;
        min-width: 150px !important;
        min-height: 150px !important;
    }
    
    .hero-image {
        margin: 0 0 3.5vh 0 !important;
    }
    
    .social-links {
        margin: 2.8vh 0 0 0 !important;
        gap: 0.65rem !important;
    }
    
    .social-links a {
        width: clamp(34px, 4.5vh, 44px) !important;
        height: clamp(34px, 4.5vh, 44px) !important;
    }
    
    /* Slightly tighter text spacing */
    .hero-text h3:first-child {
        margin: 0 0 0.8vh 0 !important;
    }
    
    .hero-text h1 {
        margin: 0.8vh 0 !important;
    }
    
    .hero-text h3:not(:first-child) {
        margin: 0.8vh 0 1.6vh 0 !important;
    }
    
    .hero-text p {
        margin: 1.6vh auto !important;
    }
    
    .scroll-indicator {
        bottom: 4.5vh !important;
    }
}

/* ============================================
   VERY SHORT SCREENS (height < 600px)
   Ultra-compact vertical space
   ============================================ */
@media (max-width: 950px) and (max-height: 600px) {
    .profile-img-container {
        width: 24vh !important;
        height: 24vh !important;
        min-width: 140px !important;
        min-height: 140px !important;
    }
    
    .hero-image {
        margin: 0 0 3vh 0 !important;
    }
    
    .hero-text h3:first-child {
        margin: 0 0 0.6vh 0 !important;
    }
    
    .hero-text h1 {
        margin: 0.6vh 0 !important;
    }
    
    .hero-text h3:not(:first-child) {
        margin: 0.6vh 0 1.4vh 0 !important;
    }
    
    .hero-text p {
        margin: 1.4vh auto !important;
    }
    
    .social-links {
        margin: 2.4vh 0 0 0 !important;
        gap: 0.6rem !important;
    }
    
    .social-links a {
        width: clamp(32px, 4vh, 40px) !important;
        height: clamp(32px, 4vh, 40px) !important;
    }
    
    .scroll-indicator {
        bottom: 4vh !important;
    }
}

/* ============================================
   EXTREME SHORT SCREENS (height < 500px)
   Maximum compression for landscape phones
   ============================================ */
@media (max-width: 950px) and (max-height: 500px) {
    .profile-img-container {
        width: 22vh !important;
        height: 22vh !important;
        min-width: 120px !important;
        min-height: 120px !important;
        max-width: 170px !important;
        max-height: 170px !important;
    }
    
    .hero-image {
        margin: 0 0 2.5vh 0 !important;
    }
    
    .hero-text h3:first-child {
        margin: 0 0 0.4vh 0 !important;
    }
    
    .hero-text h1 {
        margin: 0.4vh 0 !important;
    }
    
    .hero-text h3:not(:first-child) {
        margin: 0.4vh 0 1.2vh 0 !important;
    }
    
    .hero-text p {
        margin: 1.2vh auto !important;
        line-height: 1.4 !important;
    }
    
    .social-links {
        margin: 2vh 0 0 0 !important;
        gap: 0.55rem !important;
    }
    
    .social-links a {
        width: 32px !important;
        height: 32px !important;
    }
    
    .scroll-indicator {
        bottom: 3vh !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   Special handling for wide, short screens
   ============================================ */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 500px) {
    .hero-content {
        max-width: 700px !important;
    }
    
    .profile-img-container {
        width: 20vh !important;
        height: 20vh !important;
        min-width: 110px !important;
        min-height: 110px !important;
        max-width: 160px !important;
        max-height: 160px !important;
    }
    
    .hero-image {
        margin: 0 0 2vh 0 !important;
    }
    
    .social-links {
        margin: 1.8vh 0 0 0 !important;
        gap: 0.55rem !important;
    }
    
    .social-links a {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ============================================
   Z-INDEX MANAGEMENT
   Ensure proper layering on mobile
   ============================================ */
@media (max-width: 950px) {
    .hero-content {
        position: relative;
        z-index: 10;
    }
    
    .profile-img-container {
        z-index: 11;
        position: relative;
    }
    
    .profile-backdrop {
        z-index: 9;
        position: absolute;
    }
}

/* ============================================
   TABLET ONLY: Keep backdrop visible
   ============================================ */
@media (min-width: 768px) and (max-width: 950px) {
    .profile-backdrop {
        display: block !important;
    }
}