/*
 * Responsive Styles - Stackly Luxury Villas
 * Target Resolutions Requested by Client
 */

/* ==========================================================================
   DESKTOP RESOLUTIONS
   ========================================================================== */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
    /* Adjustments for Full HD if necessary */
}

@media screen and (max-width: 1536px) and (max-height: 864px) {
    /* Adjustments for typical 15" laptops */
}

@media screen and (max-width: 1366px) and (max-height: 768px) {
    /* Adjustments for standard 13" laptops */
    :root {
        --section-padding: 80px 0; /* Slightly tighter padding on smaller desktops */
    }
}

@media screen and (max-width: 1280px) and (max-height: 720px) {
    /* Adjustments for compact desktops/HD */
}

/* ==========================================================================
   TABLET RESOLUTIONS
   ========================================================================== */
/* Landscape Tablets */
@media screen and (max-width: 1280px) and (max-height: 800px),
       screen and (max-width: 1180px) and (max-height: 820px) {
    
    h1 { font-size: 42px; }
    h2 { font-size: 32px; }
    
    :root {
        --section-padding: 70px 0;
    }
}

/* Portrait Tablets */
@media screen and (max-width: 1024px) and (max-height: 768px),
       screen and (max-width: 820px) and (max-height: 1180px),
       screen and (max-width: 800px) and (max-height: 1280px),
       screen and (max-width: 768px) and (max-height: 1024px) {
    
    h1 { font-size: 38px; }
    h2 { font-size: 30px; }
    h3 { font-size: 22px; }
    
    :root {
        --section-padding: 60px 0;
    }
    
    .container {
        padding: 0 15px;
    }
}

/* ==========================================================================
   MOBILE RESOLUTIONS
   ========================================================================== */
@media screen and (max-width: 412px) and (max-height: 915px),
       screen and (max-width: 393px) and (max-height: 873px),
       screen and (max-width: 390px) and (max-height: 844px),
       screen and (max-width: 360px) and (max-height: 800px),
       screen and (max-width: 480px) /* Fallback for general mobile */ {
    
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 20px; }
    p { font-size: 15px; }
    
    :root {
        --section-padding: 50px 0;
    }
    
    .container {
        padding: 0 15px;
    }
}