/* ============================================================
   HOMEPAGE SPECIFIC STYLES
   Moved from inline styles in index.php for clean SEO
   ============================================================ */

/* Body overflow prevention */
html, body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

/* Site showcase - keep hero visible (do NOT collapse) */
.site-showcase {
    min-height: 450px;
    display: block !important;
    visibility: visible !important;
}

/* Desktop: 570px (per design spec) */
@media (min-width: 992px) {
    .site-showcase,
    .site-showcase .hero-slider.hidden-xs,
    body.home .site-showcase .hero-slider {
        min-height: 570px !important;
        height: 570px !important;
    }
}

/* Mobile/tablet */
@media (max-width: 991px) {
    .site-showcase .hero-slider.hidden-xs {
        min-height: 450px !important;
        height: 450px !important;
    }
}

.site-showcase .hero-slider.hidden-xs {
    display: block !important;
}

/* Hide site-showcase only when slides are truly empty */
.site-showcase .hero-slider.hidden-xs ul.slides:empty {
    display: none !important;
}

/* Main content - search overlay on hero (Belek layout via akkus.css) */
.main {
    margin-top: 20px;
    display: block !important;
    visibility: visible !important;
}
@media (max-width: 992px) {
    .main { margin-top: 10px; }
}

/* Ensure main content is visible */
#content,
.featured-blocks,
.editors-picks-wrapper,
#featured-properties {
    display: block !important;
    visibility: visible !important;
}

/* Mobile styles - Match Buying Guide layout for News and Blog sections */
@media (max-width: 767px) {
    /* Make News and Blog columns full width on mobile (stack vertically) */
    .page-section .container .row .col-md-6.posts-archive {
        width: 100% !important;
        margin-bottom: 30px;
        float: none !important;
        clear: both;
    }
    
    /* News and Blog sections - match Buying Guide layout on mobile */
    .posts-archive .post {
        margin-bottom: 20px;
        border: none;
    }
    
    /* Ensure articles in News/Blog have same structure as Buying Guide */
    .posts-archive .post .row {
        margin: 0;
    }
    
    /* Image column styling to match Buying Guide exactly */
    .posts-archive .post .col-md-3.col-sm-4.col-xs-6 {
        width: 50% !important;
        float: left;
        padding-left: 0 !important;
        padding-right: 10px !important;
        margin-bottom: 10px;
    }
    
    /* Text column styling to match Buying Guide exactly */
    .posts-archive .post .col-md-9.col-sm-8.col-xs-6 {
        width: 50% !important;
        float: left;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Image styling to match Buying Guide - prevent stretching, maintain aspect ratio */
    .posts-archive .post img.img-rounded.img-responsive,
    .posts-archive .post img.lozad,
    .posts-archive .post a img {
        width: 100% !important;
        height: auto !important;
        border-radius: 4px !important;
        display: block !important;
        object-fit: cover !important;
        max-width: 100% !important;
        max-height: 120px !important;
    }
    
    /* Image container to match Buying Guide */
    .posts-archive .post .col-md-3.col-sm-4.col-xs-6 a {
        display: block;
        overflow: hidden;
        border-radius: 4px;
    }
    
    /* Limit article header to 2 lines on mobile for consistency */
    .posts-archive .post h3 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 2.6em;
    }
    
    .posts-archive .post h3 a {
        display: block;
    }
    
    /* Text styling */
    .posts-archive .post p {
        margin-bottom: 0;
        line-height: 1.5;
        font-size: 13px;
    }
    
    /* Clear floats */
    .posts-archive .post .col-md-12:after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Match Buying Guide article wrapper styling */
    .posts-archive .post .col-md-12.col-sm-12 {
        padding: 0;
    }
}