/* ============================================
   LARGE SCREENS OPTIMIZATION (2560x1600+)
   Strategy: Proportional Root Scaling + Structural Overrides
   Target: Pixel-perfect scaling of the 1920x1080 "ideal" layout.
   ============================================ */

/* Mobile/Base Reset */
@media (max-width: 768px) {
    :root {
        font-size: 16px !important;
    }
}

/* 
   2560px Screen Optimization 
   Base Factor: 1.25x scaling (16px -> 20px)
*/


/* Medium-Large screens (1400px - 1919px) - Chat compact */
@media (min-width: 1400px) and (max-width: 1919px) {
    .ai-guide-chat {
        width: 28rem !important;
        height: 38rem !important;
        max-height: calc(100vh - 120px) !important;
    }

    .chat-message.bot .message-bubble p {
        margin-bottom: 0.75rem !important;
    }

    .chat-message.bot .message-bubble p+p {
        margin-top: 0.75rem !important;
        padding-top: 0.4rem !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
}

/* News Cards Spacing Fix (1400px+) - Reduce vertical gaps & increase font size */
@media (min-width: 1400px) {

    /* Remove min-height that creates excessive spacing + 25% larger fonts */
    /* NOTE: featured-side-cards handled separately in 2000px+ media query */
    .homepage-news-card .card-title,
    .news-container .card-title {
        min-height: 0 !important;
        margin-bottom: 0.25rem !important;
        font-size: 1.375rem !important;
        /* 1.1rem * 1.25 = 25% larger */
    }

    .homepage-news-card .card-text,
    .news-container .card-text {
        min-height: 0 !important;
        font-size: 1rem !important;
        /* ~0.8rem * 1.25 = 25% larger */
    }
}

/* Large screens (1920px+) */
@media (min-width: 1920px) {
    .ai-guide-chat {
        width: 30rem !important;
        height: 40rem !important;
        max-height: calc(100vh - 80px) !important;
    }

    .chat-message.bot .message-bubble p {
        margin-bottom: 0.85rem !important;
    }

    .chat-message.bot .message-bubble p+p {
        margin-top: 0.85rem !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    /* News Card Typography - 25% larger titles, 20% larger descriptions on 1920px+ screens */
    /* NOTE: featured-side-cards are handled separately in 2000px+ media query */
    body .homepage-news-card .card-title,
    body .news-container .card-title {
        font-size: 1.5rem !important;
        /* 1.2rem * 1.25 = 1.5rem (25% increase) */
    }

    body .homepage-news-card .card-text,
    body .news-container .card-text {
        font-size: 1.14rem !important;
        /* 0.95rem * 1.2 = 1.14rem (20% increase) */
        line-height: 1.5 !important;
    }
}

@media (min-width: 2000px) {


    /* 1. Global Proportional Scaling - Inherit from style.css */

    /* 2. Container Constraints (Prevent "blown apart" widths) */
    .nav-container,
    .container,
    .page-header-context .container,
    .promo-banners-section .container,
    .rental-container,
    .news-container,
    .tours-container,
    .services-container,
    .hero .container,
    .footer-content {
        max-width: 1750px !important;
        /* Scaled from 1400px (1.25x) */
        padding-left: var(--container-px) !important;
        padding-right: var(--container-px) !important;
    }

    /* 3. Navigation & Header Fixed Heights (Override px values) */
    .nav-container {
        height: var(--header-h) !important;
    }

    /* Navigation Menu Text - 10% larger */
    .nav-link {
        font-size: 0.9625rem !important;
        /* 0.875rem * 1.1 = 0.9625rem (10% increase) */
    }

    /* Hero section - Inherit from style.css */
    .hero {
        /* Intentionally Empty */
    }


    .category-tabs-wrapper {
        top: var(--header-h) !important;
        /* Sticky below taller header */
    }

    /* Hero Content Width - Inherit from style.css */

    /* 4. Search Bar Scaling */
    .hero-search {
        max-width: 1300px !important;
        /* Significantly wider as requested (approx 25% wider) */
    }

    /* Search Bar Scaling - Inherit from style.css */

    .btn-lg.search-icon-btn {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important;
        /* Absolute Geometric Lock - Force perfect circle even on 4K */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        min-width: 80px !important;
        min-height: 80px !important;
        flex-shrink: 0 !important;
    }

    .search-icon-btn svg {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        display: block !important;
    }

    /* 5. Card & Image Optimization */

    /* Force compact images for PC */
    body .services-grid .card-image,
    body .card .card-image,
    .card-image {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
    }

    /* =========================================================
       FEATURED SERVICE CARDS: PRECISE HEIGHT TUNING (2000px+)
       Target: ~15% Height Reduction vs default scaling
       ========================================================= */

    /* 1. Card Container (Natural Height) */
    body .services-grid .card,
    body .card:not(.homepage-news-card):not(.contact-card) {
        height: auto !important;
        min-height: 440px !important;
        /* Adjusted for shorter images */
        display: flex;
        flex-direction: column;
    }

    /* 2. Image: 4:3 aspect ratio (reduced height) */
    body .services-grid .card .card-image,
    body .card:not(.homepage-news-card):not(.contact-card) .card-image {
        aspect-ratio: 4 / 3 !important;
        /* 25% shorter as requested */
        width: 100% !important;
        object-fit: cover !important;
    }

    /* 3. Padding Compression & Alignment (reduced by 50% top/bottom) */
    body .card:not(.homepage-news-card):not(.contact-card) .card-content {
        padding: 0.625rem 1.5rem 0.75rem 1.5rem !important;
        /* Half of previous 1.25rem/1.5rem values */
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* 4. Text & Gap Tightening */
    body .card:not(.homepage-news-card):not(.contact-card) .card-title {
        margin-bottom: 0.5rem !important;
    }

    body .card:not(.homepage-news-card):not(.contact-card) .card-text {
        margin-bottom: 0.75rem !important;
        line-height: 1.4 !important;
    }

    /* 5. Footer & Button Spacing - Force Bottom Alignment */
    body .card:not(.homepage-news-card):not(.contact-card) .card-footer {
        margin-top: auto !important;
        /* Pushes footer (and button) to bottom */
        padding-top: 1.5vh !important;
        padding-bottom: 0 !important;
    }

    body .card:not(.homepage-news-card):not(.contact-card) .btn {
        margin-top: 1rem !important;
        margin-bottom: 0 !important;
        min-height: 48px !important;
    }

    /* News Cards Images - Reduced from 180px -> 140px */
    .homepage-news-card .card-image-wrapper,
    .news-container .card-image-wrapper {
        height: 140px !important;
        /* Scaled from 160px for better fit */
    }

    .homepage-news-card .card-image,
    .news-container .card-image {
        height: 100% !important;
        min-height: 100% !important;
    }

    /* Fix: Restore Flex Layout for News Cards on Large Screens */
    body .homepage-news-card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    body .homepage-news-card .card-content {
        display: flex !important;
        flex-direction: column !important;
        padding: 1.25rem 1.5rem !important;
        flex: 1 !important;
    }

    body .homepage-news-card .card-text {
        margin-bottom: 2rem !important;
        /* Space for date */
    }

    body .homepage-news-card .news-date {
        margin-top: auto !important;
        display: block !important;
    }

    /* News Card Typography - 25% larger titles, 20% larger descriptions */
    body .homepage-news-card .card-title,
    body .news-container .card-title {
        font-size: 1.5rem !important;
        /* 1.2rem * 1.25 = 1.5rem (25% increase) */
    }

    body .homepage-news-card .card-text,
    body .news-container .card-text {
        font-size: 1.14rem !important;
        /* 0.95rem * 1.2 = 1.14rem (20% increase) */
        line-height: 1.5 !important;
    }

    /* Featured Side Cards - Compact Layout Override */
    body .featured-side-cards .homepage-news-card .card-content {
        padding: 0 0.5rem !important;
        gap: 0 !important;
        justify-content: flex-start !important;
    }

    html body .featured-side-cards .homepage-news-card .card-title,
    html body .featured-side-cards .card-title {
        font-size: 1rem !important;
        /* 0.8rem * 1.25 = 25% larger */
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    html body .featured-side-cards .homepage-news-card .card-text,
    html body .featured-side-cards .card-text {
        font-size: 0.8125rem !important;
        /* 0.65rem * 1.25 = 25% larger */
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    body .featured-side-cards .homepage-news-card .news-date {
        font-size: 0.6rem !important;
        margin: 0 !important;
    }

    /* 6. Form Elements & Buttons */
    .country-select {
        min-width: 180px !important;
        /* Scaled from 144px */
        height: 45px !important;
    }

    .btn {
        /* Ensure minimal touch target size increases */
        min-height: 48px;
    }

    footer,
    .footer {
        padding-top: var(--section-gap-v) !important;
    }

    .footer-content {
        gap: 60px !important;
        /* Scaled width between columns */
    }

    /* Footer Typography - Readable Sizes */
    .footer h4 {
        font-size: 1em !important;
    }

    .footer p {
        font-size: 1em !important;
    }

    .footer-links {
        font-size: 1em !important;
    }

    .footer-links a {
        font-size: 1em !important;
    }

    .footer-bottom {
        font-size: 0.9em !important;
    }

    /* 8. Auth Pages (Login/Register) */
    .auth-container {
        min-height: calc(100vh - 80px) !important;
        padding-top: 4rem !important;
    }

    .auth-card {
        max-width: 540px !important;
        /* Scaled from 420px */
    }

    .auth-header h1 {
        font-size: 2.2rem !important;
    }

    /* 9. Narrow Layout Scaling (Contacts, AI Search) */
    .container-narrow {
        max-width: 1200px !important;
        /* Scaled from 900px */
    }

    .profile-form-container {
        max-width: 800px !important;
        /* Scaled from 600px */
    }

    /* 10. Profile Layout Overrides */
    .profile-container {
        max-width: 1600px !important;
        /* Scaled from 1200px (template override) */
        padding-top: 100px !important;
    }

    .profile-layout {
        grid-template-columns: 320px 1fr !important;
        /* Scaled sidebar */
        gap: 40px !important;
    }

    .profile-sidebar {
        top: 100px !important;
        /* Below thicker header */
    }

    .avatar-circle {
        width: 100px !important;
        height: 100px !important;
        font-size: 2.5rem !important;
    }

    /* 11. Form Controls Scaling */
    input.form-control,
    select.form-control,
    textarea.form-control {
        padding: 1rem 1.25rem !important;
        /* Increased padding */
        font-size: 1.1rem !important;
        min-height: 56px !important;
        /* Ensure touch target size */
    }

    textarea.form-control {
        height: auto !important;
    }

    .btn-lg {
        font-size: 1.25rem !important;
        padding: 1.25rem 2.5rem !important;
    }

    /* 12. Category Tabs & Filters - 15% Larger for Better Readability */
    .category-tabs-wrapper {
        padding: 0 !important;
    }

    .category-tabs-container {
        padding: 0.6rem var(--container-px) !important;
        /* Balanced vertical padding + horizontal container alignment */
        gap: 0.25rem !important;
        /* Synced tight gap for 2-row layout */
    }

    .category-tab {
        font-size: 0.75rem !important;
        /* Increased from 0.65rem (+15%) */
        padding: 0.2rem 0.5rem !important;
        /* Increased padding (+33% for better touch targets) */
        min-height: 28px !important;
        /* Increased from 24px (+17%) */
        gap: 0.25rem !important;
        /* Increased from 0.2rem (+25%) */
    }

    .category-tab .count {
        font-size: 0.69rem !important;
        /* Increased from 0.6rem (+15%) */
    }

    /* Filter Controls - Increased Sizes \u0026 Centering */
    .filter-controls {
        gap: 2rem !important;
        justify-content: flex-start !important;
        /* Aligned to the left as requested */
        padding: 0 !important;
        /* Removed redundant vertical spacing for row compactness */
    }

    .filter-group-inline label {
        font-size: 0.86rem !important;
        /* Increased from 0.75rem (+15%) */
    }

    .filter-select {
        height: 37px !important;
        /* Increased from 32px (+16%) */
        padding: 0 0.86rem !important;
        /* Increased from 0.75rem (+15%) */
        font-size: 0.86rem !important;
        /* Increased from 0.75rem (+15%) */
    }

    /* 13. Maintain "Ideal" Layout Proportions (Fix Deformations) */

    /* Force 4-column grid to match 1920x1080 layout */
    /* Absolute edge-to-edge alignment with the global container */
    .category-grid,
    .services-grid,
    .promo-banners-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: clamp(1rem, 2vw, 2.5rem) !important;
        /* Proportional gap that scales with screen width */
        width: 100% !important;
        max-width: none !important;
        /* Allow to fill the parent container (1750px / 2400px) */
    }

    .promo-banners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Stabilize Services Card Heights to align all footers precisely */
    .services-grid .card {
        height: auto !important;
        min-height: 320px !important;
        /* Significantly reduced from 480px to prevent "huge" look */
        display: flex !important;
        flex-direction: column !important;
    }

    .services-grid .card-image {
        aspect-ratio: 16 / 9 !important;
        /* Horizontal proportions for large displays */
        width: 100% !important;
        height: auto !important;
    }

    .services-grid .card-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .services-grid .card-footer {
        margin-top: auto !important;
        padding-top: 1.5rem !important;
    }

    /* Hero Stats Scaling/Spacing */
    .hero-stats {
        gap: 60px !important;
        /* Increase gap to prevent clumping */
    }

    .stat-item {
        /* Inherit Majestic Proportions from style.css */
    }

    .stat-number {
        /* Inherit 1.35rem from style.css */
    }

    /* Ensure Category Cards have balanced whitespace and height */
    .category-card {
        padding: 1.5rem !important;
        padding-bottom: 0 !important;
        min-height: 450px !important;
        /* Optimized from 480px for balanced height */
    }

    .category-icon {
        width: 120px !important;
        /* Scaled from 90px */
        height: 120px !important;
        margin-top: 2.5rem !important;
        margin-bottom: 2rem !important;
    }

    /* Fix Filter Panel Width on Large Screens (Match 1750px grid) */
    .category-tabs-container {
        max-width: 1750px !important;
        /* Scaled from 1400px to match all other containers */
    }

    /* Chat for Large Screens — compact */
    .ai-guide-chat {
        width: 30rem !important;
        height: 40rem !important;
        max-height: calc(100vh - 120px) !important;
    }
}

/* Ultra-Wide / 2560px+ Optimization */
@media (min-width: 2560px) {

    /* News Card Typography - 25% larger titles, 20% larger descriptions */
    body .homepage-news-card .card-title,
    body .news-container .card-title {
        font-size: 1.65rem !important;
        /* 1.32rem * 1.25 = 1.65rem (25% increase from 1920px base) */
    }

    body .homepage-news-card .card-text,
    body .news-container .card-text {
        font-size: 1.3rem !important;
        /* 1.08rem * 1.2 = 1.3rem (20% increase from 1920px base) */
        line-height: 1.55 !important;
    }

    /* Featured Side Cards - Proportionally larger */
    html body .featured-side-cards .homepage-news-card .card-title,
    html body .featured-side-cards .card-title {
        font-size: 1.25rem !important;
        /* 1rem * 1.25 = 25% larger */
    }

    html body .featured-side-cards .homepage-news-card .card-text,
    html body .featured-side-cards .card-text {
        font-size: 0.975rem !important;
        /* 0.8125rem * 1.2 = 20% larger */
    }
}

/* 4K Optimization (3840px+) */
@media (min-width: 3800px) {
    /* Container constraints - Inherit scaling from style.css */

    .nav-container,
    .container,
    .category-tabs-container {
        max-width: 2400px !important;
    }

    .nav-container {
        height: 100px !important;
    }

    .hero {
        /* Inherit from style.css */
    }

    .category-tabs-wrapper {
        top: 100px !important;
    }
}