/**
 * ============================================================================
 * HERO SECTION - FIGMA-EXACT CSS
 * ============================================================================
 *
 * Created: 2025-10-23 12:40 UTC
 * Purpose: Pixel-perfect implementation of Figma node 8:8
 * Figma File: ZUxuAbQALF5C2buaW7pNk1
 * Node: 8:8 (Header-Section+BackgroundColor) - 1920x1000px
 *
 * CRITICAL MEASUREMENTS FROM FIGMA:
 * - Container: 1296x1000px (centered in 1920px viewport)
 * - Photo Collage: 1198x650px (6 photos with exact positions)
 * - Headline: 376x244px overlay on right side
 * - CTA Button: 600x70px at bottom-left
 * - Subheadline: 449x61px at bottom-right (BESIDE button, not below!)
 *
 * ============================================================================
 */

/* ===== CSS VARIABLES - EXACT FIGMA VALUES ===== */
:root {
    /* Hero Container */
    --hero-bg: #1E1E1E;  /* Fallback solid color */
    --hero-gradient-start: #F5F5F5;  /* Light gray/off-white at top */
    --hero-gradient-end: #1E1E1E;    /* Dark charcoal at bottom */
    --hero-container-width: 1296px;
    --hero-section-height: 1000px;

    /* Photo Collage - EXACT measurements from Figma */
    --collage-width: 1198px;  /* Exact: 193+20+105+20+291+20+153+20+230+20+126 = 1198px */
    --collage-height: 650px;
    --photo-gap: 20px;  /* CRITICAL: EXACT 20px gaps between all photos */
    --photo-border-radius: 12px;  /* EXACT 12px from Figma */

    /* Individual Photo Sizes (from Figma node data) */
    --photo1-width: 193px;   /* Rectangle 2 */
    --photo2-width: 105px;   /* Rectangle 3 */
    --photo3-width: 291px;   /* Rectangle 4 */
    --photo4-width: 153px;   /* Rectangle 6 */
    --photo5-width: 230px;   /* Rectangle 7 */
    --photo6-width: 126px;   /* Rectangle 8 */

    /* Heights: 4 tall + 2 shorter */
    --photo-tall-height: 650px;    /* Photos 1-4 */
    --photo-short-height: 386px;   /* Photos 5-6 */

    /* Headline Overlay */
    --headline-width: 376px;
    --headline-height: 244px;

    /* CTA Button */
    --cta-width: 600px;
    --cta-height: 70px;

    /* Subheadline */
    --subheadline-width: 449px;  /* FIGMA EXACT: 449px width from node 50:6 for correct text wrapping */
    --subheadline-height: 61px;

    /* Colors - EXACT from Figma */
    --hero-orange: #e4a960;  /* EXACT from Figma headline PIL analysis - median of 22,712 pixels */
    --hero-text: #FFFFFF;
    --hero-text-muted: rgba(255, 255, 255, 0.7);
    --cta-bg: #D4A574;  /* UNIFIED: Match nav-cta-button solid gold (was #E5AA61) */
    --cta-text: #000000;  /* UNIFIED: Match nav-cta-button black text (was #1A1A1A) */

    /* Spacing */
    --hero-top-padding: 0;  /* NO padding - content starts at top */
    --bottom-row-gap: 94px;  /* Gap between button (x=135) and subheadline (x=829) = 694px, but flexbox will handle */

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
}

/* ===== HERO SECTION CONTAINER ===== */
.hero-search {
    /* Solid dark background from Figma - NOT a gradient! */
    background-color: #1a1a1a;  /* EXACT color from Figma analysis */
    padding: 80px 0 20px 0;  /* EXACT: 80px navbar offset, minimal bottom padding */
    min-height: var(--hero-section-height);
    position: relative;
    overflow: visible;
}

/* ===== MAIN CONTAINER - 1296px centered ===== */
/* FUNDAMENTAL CLEAN POSITIONING - NO HACKS, NO !important */
.hero-main-container {
    max-width: var(--hero-container-width);
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: 10px;  /* FIGMA EXACT: Reduced from 20px - VQA Blocker #3 fix (CTA 8-12px too low) */
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* FUNDAMENTAL FIX: .hero-content MUST match container dimensions */
.hero-search .hero-content {
    width: 100%;
    max-width: var(--hero-container-width);  /* CRITICAL: Match 1296px container! */
    margin: 0 auto;  /* Center like container */
    padding: 0;
}

/* ===== PHOTOS + HEADLINE CONTAINER ===== */
.hero-photos-and-headline {
    position: relative;
    width: 100%;
    max-width: var(--collage-width);
    height: var(--collage-height);
    margin-left: 47px;  /* EXACT: Figma node 50:20 at x=135 → 135-88 = 47px */
    overflow: visible;  /* CRITICAL: Allow absolute positioned children to be visible */
}

/* ===== PHOTO COLLAGE - FLEXBOX FOR EXACT LAYOUT ===== */
.hero-photo-collage {
    width: var(--collage-width);
    height: var(--collage-height);
    position: relative;

    /* Flexbox: horizontal row for photos */
    display: flex;
    flex-direction: row;
    gap: 20px;  /* EXPLICIT: 20px gaps (was var, now explicit for browser consistency) */
    column-gap: 20px;  /* FALLBACK: Ensure horizontal gaps are exactly 20px */
    align-items: flex-end;  /* Photos 5-6 align to bottom */
}

/* REMOVED GRADIENT - was making photos too dark */

/* ===== INDIVIDUAL PHOTOS - EXACT WIDTHS & HEIGHTS ===== */
.collage-photo {
    object-fit: cover;
    border-radius: var(--photo-border-radius);
    display: block;
    flex-shrink: 0;  /* Prevent shrinking */
    transition: opacity 0.6s ease-in-out;
}

.hero-photo-collage .collage-photo--fading {
    opacity: 0;
}

/* Photos 1-4: Full height (650px) */
.photo-1 {
    width: var(--photo1-width);
    height: var(--photo-tall-height);
}

.photo-2 {
    width: var(--photo2-width);
    height: var(--photo-tall-height);
}

.photo-3 {
    width: var(--photo3-width);
    height: var(--photo-tall-height);
}

.photo-4 {
    width: var(--photo4-width);
    height: var(--photo-tall-height);
}

/* Photos 5-6: Shorter (386px), bottom-aligned */
.photo-5 {
    width: var(--photo5-width);
    height: var(--photo-short-height);
    align-self: flex-end;  /* VISUAL QA FIX: Explicit bottom alignment (VQA line 52) */
}

.photo-6 {
    width: var(--photo6-width);
    height: var(--photo-short-height);
    align-self: flex-end;  /* VISUAL QA FIX: Explicit bottom alignment (VQA line 52) */
}

/* ===== HEADLINE OVERLAY - ABSOLUTE POSITION ===== */
/* CRITICAL: Use high specificity to override old hero-master.css */
.hero-search .hero-title,
.hero-main-container .hero-title,
.hero-photos-and-headline .hero-title {
    position: absolute !important;  /* Override grid positioning from old CSS */
    top: 0;  /* FIGMA EXACT: Headline and photos at SAME level (both at y=-171 in Figma) */
    left: auto;  /* Ensure right positioning works correctly from container edge */
    right: 0 !important;  /* FIGMA EXACT: Headline right edge aligns with photo collage right edge */
    width: var(--headline-width);
    max-height: var(--headline-height);
    z-index: 100 !important;  /* MAXIMUM z-index to ensure text is ALWAYS visible */
    overflow: visible;  /* Allow text to be visible even if it exceeds container */
    grid-column: unset !important;  /* Remove grid positioning from old CSS */
    grid-row: unset !important;  /* Remove grid positioning from old CSS */

    /* Typography - EXACT FIGMA SPECS */
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 40px !important;  /* FIGMA EXACT: 40px from node 126:4 */
    font-weight: 800 !important;  /* FIGMA EXACT: 800 weight, not 700 */
    line-height: 49px !important;  /* FIGMA EXACT: 49px line-height (ratio 1.225) */
    letter-spacing: 0 !important;  /* FIGMA EXACT: 0 letter-spacing */
    color: var(--hero-text) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 4px 20px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 1);
    margin: 0;
    padding: 0;

    /* Layout: block for natural text flow without extra gaps */
    display: block !important;
    text-align: left;
}

.hero-search .hero-title .highlight-orange,
.hero-main-container .hero-title .highlight-orange,
.hero-photos-and-headline .hero-title .highlight-orange {
    color: #E4A960 !important;  /* FIGMA EXACT: Orange color extracted from composite image */
    font-size: 40px !important;  /* FIGMA EXACT: Same as base headline */
    font-weight: 800 !important;  /* FIGMA EXACT: Same as base headline */
    line-height: 49px !important;  /* FIGMA EXACT: Same as base headline */
    letter-spacing: 0 !important;  /* FIGMA EXACT: Same as base headline */
    display: block !important;  /* Keep as block to maintain line breaks */
}

/* ===== BOTTOM ROW: CTA + SUBHEADLINE (HORIZONTAL) ===== */
/* CRITICAL: Button at left (x=135), Subheadline at right (x=829) per Figma */
.hero-bottom-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;  /* Start from left, not space-between */
    align-items: flex-start;  /* Align to top */
    gap: 94px;  /* Gap between button end (135+600=735) and subheadline start (829) = 94px */
    width: 100%;
    max-width: var(--collage-width);
    margin-top: 45px;  /* VISUAL QA FIX: Increased from 30px to 45px for proper spacing (VQA analysis line 74) */
    margin-left: 47px;  /* EXACT: Figma node 50:8 (CTA) at x=135 relative to container 8:13 at x=88 = 47px offset */
}

/* ===== CTA BUTTON - EXACT FIGMA SPECS ===== */
.hero-cta-button {
    width: var(--cta-width);
    max-width: var(--cta-width);
    height: var(--cta-height);

    /* Background - EXACT Figma tan/beige #E5AA61 */
    background: var(--cta-bg);

    /* Typography - FIGMA EXACT from node 50:9 */
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 25px !important;  /* FIGMA EXACT: 25px (was 18px - CRITICAL FIX) */
    font-weight: 800 !important;  /* FIGMA EXACT: 800 (was 600 - CRITICAL FIX) */
    line-height: 17px !important;  /* FIGMA EXACT: 17px tight line-height */
    letter-spacing: 0 !important;  /* FIGMA EXACT: 0 */
    color: var(--cta-text);
    text-align: center;

    /* Styling */
    border: none;
    border-radius: 12px;  /* EXACT: Matches photo collage border-radius per Figma design system */
    cursor: pointer;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);

    /* Layout */
    flex-shrink: 0;
    padding: 0 24px;
}

.hero-cta-button:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(229, 170, 97, 0.4);  /* Tan/beige shadow */
    filter: brightness(1.05);
}

.hero-cta-button:active {
    transform: scale(0.98);
}

/* ===== SUBHEADLINE - EXACT FIGMA SPECS ===== */
.hero-subheadline {
    width: 449px !important;  /* FIGMA EXACT: Force 449px width for correct text wrapping */
    max-width: 449px !important;  /* FIGMA EXACT: Strict max to match Figma line break */
    min-width: 449px !important;  /* FIGMA EXACT: Prevent shrinking */
    height: auto;

    /* Typography - FIGMA EXACT from node 50:6 */
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 25px !important;  /* FIGMA EXACT: 25px (was 15px - CRITICAL FIX) */
    font-weight: 500 !important;  /* FIGMA EXACT: 500 (was 400 - CRITICAL FIX) */
    line-height: 30px !important;  /* FIGMA EXACT: 30px (was 1.4 ratio - CRITICAL FIX) */
    letter-spacing: 0 !important;  /* FIGMA EXACT: 0 */
    color: rgba(255, 255, 255, 0.7);  /* VISUAL QA FIX: Explicit opacity (VQA line 76) */

    /* Layout */
    margin: 0;
    margin-top: 12px;  /* FIGMA EXACT: Reduced from 16px - VQA Blocker #4 fix (subheadline 3-5px too low) */
    padding: 0;
    flex-shrink: 0;
    text-align: left;
    word-wrap: break-word;  /* CRITICAL: Allow text to wrap naturally */
    overflow-wrap: break-word;  /* CRITICAL: Modern CSS text wrapping */
    /* Allow wrapping for multi-line text per Figma (61px height container) */
}

/* ===== STATS BAR POSITIONING ===== */
/* CRITICAL: Stats are OUTSIDE .hero-content, directly in .hero-search */
.hero-search .property-statistics {
    margin-left: 149px;  /* EXACT: Figma node 8:23 at x=237 → 237-88 = 149px */
    margin-right: auto;  /* Keep right auto for layout */
    margin-top: 60px;
    max-width: none;  /* Override hero-master.css max-width constraint */
}

/* ===== FILTER SECTION - HORIZONTAL LAYOUT ===== */
/* CRITICAL FIX: First dropdown at x=136 (not container at x=116), so offset is 48px not 28px! */
.hero-content .search-form {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 36px;  /* FIX: Increased from 30px to 36px per VQA blocker #6 */
    margin-left: 48px;  /* EXACT: Figma first dropdown at x=136 → 136-88 = 48px (20px internal gap) */
}

.hero-content .filter-dropdowns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.hero-content .custom-dropdown {
    flex-shrink: 0;
}

/* VISUAL QA FIX: Filter dropdown font-weight (VQA line 86) */
.hero-content .custom-dropdown select,
.hero-content .custom-dropdown label,
.hero-content select {
    font-weight: 600 !important;
}

/* Search button - UNIFIED nav-cta-button style */
.hero-content .search-button,
.hero-content .search-btn,
.hero-content button[type="button"] {
    flex-shrink: 0;
    min-width: 144px;  /* Keep original size */
    width: 144px;
    height: 56px;  /* Keep original size */
    min-height: 56px;
    padding: 16px 20px;  /* Proper vertical padding for 56px total height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D4A574 !important;  /* UNIFIED: Solid gold like nav-cta-button (was gradient) */
    color: #000000 !important;  /* UNIFIED: Black text like nav-cta-button */
    border: none !important;
    border-radius: 12px;  /* Match design system */
    font-weight: 800 !important;  /* UNIFIED: Extra bold like nav-cta-button */
}

/* Global search button targeting for filters section - UNIFIED */
.search-btn {
    min-width: 144px;  /* Keep original size */
    width: 144px;
    height: 56px;  /* Keep original size */
    min-height: 56px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;  /* NO gap - remove spacing between text and icon */
    background: #D4A574 !important;  /* UNIFIED: Solid gold like nav-cta-button (was gradient) */
    color: #000000 !important;  /* UNIFIED: Black text like nav-cta-button */
    border: none !important;
    border-radius: 12px;
    font-family: 'Inter', -apple-system, sans-serif;  /* Match site typography */
    font-size: 16px;
    font-weight: 800 !important;  /* UNIFIED: Extra bold like nav-cta-button (was 600) */
}

/* Button text - EXACT black from Figma */
.search-btn span {
    color: #000000 !important;  /* EXACT: Figma node 8:142 is BLACK */
}

/* HIDE SVG ICON - Not in Figma design! */
.search-btn .search-icon,
.search-btn svg {
    display: none !important;  /* Figma node 8:111 has ONLY text "Найти", NO icon */
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet: 1024px */
@media (max-width: 1024px) {
    :root {
        --hero-container-width: 944px;
        --collage-width: 900px;
        --photo1-width: 145px;
        --photo2-width: 80px;
        --photo3-width: 220px;
        --photo4-width: 115px;
        --photo5-width: 173px;
        --photo6-width: 95px;
        --cta-width: 450px;
        --subheadline-width: 380px;
    }

    .hero-title {
        font-size: 38px;
    }

    .hero-title .highlight-orange {
        font-size: 38px;
    }

    .hero-bottom-row {
        gap: 20px;
    }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
    .hero-search {
        margin-top: -60px;  /* Smaller navbar on mobile */
    }

    .hero-main-container {
        padding: 0 20px;
    }

    .hero-photos-and-headline {
        height: auto;
    }

    /* Mobile: Stack photos in 2 columns */
    .hero-photo-collage {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 200px);
        gap: 12px;
        width: 100%;
    }

    .photo-1, .photo-2, .photo-3, .photo-4, .photo-5, .photo-6 {
        grid-row: auto;
        height: 200px;
    }

    .photo-1 { grid-column: 1; grid-row: 1; }
    .photo-2 { grid-column: 2; grid-row: 1; }
    .photo-3 { grid-column: 1; grid-row: 2; }
    .photo-4 { grid-column: 2; grid-row: 2; }
    .photo-5 { grid-column: 1; grid-row: 3; }
    .photo-6 { grid-column: 2; grid-row: 3; }

    /* Headline: static position below photos */
    .hero-title {
        position: static;
        width: 100%;
        margin-top: 24px;
        font-size: 32px;
    }

    .hero-title .highlight-orange {
        font-size: 32px;
    }

    /* Bottom row: vertical stack on mobile */
    .hero-bottom-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin-top: 24px;
    }

    .hero-cta-button {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        height: 60px;
    }

    .hero-subheadline {
        width: 100%;
        max-width: 100%;
        text-align: center;
        font-size: 16px;
    }
}

/* Small Mobile: 375px */
@media (max-width: 375px) {
    .hero-title {
        font-size: 28px;
    }

    .hero-title .highlight-orange {
        font-size: 28px;
    }

    .hero-cta-button {
        font-size: 15px;
        height: 56px;
    }

    .hero-subheadline {
        font-size: 14px;
    }
}


/* ===== ANIMATION FIX - FORCE FULL OPACITY ===== */
/* Fix for stuck fade-in-up animation causing opacity 0.715 */
.hero-search.visible .hero-title,
.hero-title {
    opacity: 1 !important;
    animation: none !important;
}

/* Ensure all hero title elements are fully visible */
.hero-title,
.hero-title * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override any animation-fill-mode issues */
.hero-photos-and-headline .hero-title {
    opacity: 1 !important;
    animation: none !important;
}