/*==================================================
RESPONSIVE.CSS
HIGHFIELD HOLIDAY HOME
==================================================*/

/*==================================================
LARGE DESKTOP
==================================================*/
@media (min-width:1400px){
    .container{max-width:1360px;}
}

/*==================================================
LAPTOP
==================================================*/
@media (max-width:1200px){
    .section-padding{padding:110px 0;}
    .hero-title{font-size:4.8rem;}
    .weather-card{right:30px;}
    .room-content{padding-left:30px;}
    .dining-content{padding-right:30px;}
    .booking-box{padding:60px;}
}

/*==================================================
TABLET LANDSCAPE & MOBILE (991px and down)
==================================================*/
@media (max-width:991px){
    .section-padding{padding:60px 0;} /* Reduced section padding for tighter spacing */

    /*====================
    HEADER
    ====================*/
    .header nav{position:fixed;top:0;right:-100%;width:320px;height:100vh;background:var(--wine);flex-direction:column;justify-content:center;gap:28px;transition:.4s;z-index:999;}
    .header nav.open{right:0;}
    .menu-toggle{display:flex;align-items:center;justify-content:center;}
    .btn-book{display:none;}
    
    .header .btn-primary, 
    .header .btn-book {
        padding: 10px 20px;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    .header .logo img {
        height: 48px;
    }

    /*====================
    HERO & FOOTER BLOCK
    ====================*/
    .hero {
        min-height: auto; 
        padding-top: 110px;
        padding-bottom: 40px; /* Reduced to bring content closer */
        display: block; 
    }
    .hero .container {
        display: flex;
        flex-direction: column; 
        align-items: center;
        width: 100%;
    }
    .sontent {
        padding-bottom: 20px; /* Reduced text container baseline spacing */
        width: 100%;
        text-align: center;
        margin: auto;
    }
    .hero-buttons{justify-content:center;}
    .hero-rating{justify-content:center;}
    .weather-card{display:none;}
    
    .hero-footer {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
        margin: 24px auto 0 auto; /* Compact spacing above stats block */
        width: 100%;
        max-width: 540px; 
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 Columns on Tablet */
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    .hero-footer div {
        padding: 16px 12px; /* Tightened internal padding to save height */
        border-right: 1px solid rgba(0,0,0,0.08);
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .hero-footer div:nth-child(2n) {
        border-right: none;
    }
    .hero-footer div:nth-child(3),
    .hero-footer div:nth-child(4) {
        border-bottom: none;
    }
    .hero-footer strong {
        font-size: 1.8rem; /* Scaled down numerical typography slightly */
    }

    /*====================
    ABOUT
    ====================*/
    .editorial-content{padding-left:0;margin-top:40px;}
    .image-large{width:100%;}
    .image-small{display:none;}

    /*====================
    ROOMS
    ====================*/
    .room-content{padding-left:0;margin-top:40px;}
    .room-image img{height:460px;}

    /*====================
    DINING
    ====================*/
    .dining-content{padding-right:0;margin-bottom:40px;}

    /*====================
    BOOKING
    ====================*/
    .booking-box{padding:40px 30px;}
}

/*==================================================
SMALL MOBILE DEVICES (576px and down)
==================================================*/
@media (max-width:576px){
    .hero-footer {
        grid-template-columns: repeat(2, 1fr); /* Maintained 2-Column grid pattern on tiny screens */
        max-width: 100%;
    }
    
    /* Ensure header fit */
    .header .btn-primary,
    .header .btn-book {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
    .logo img {
        height: 40px !important;
    }
}/*==================================================
RESPONSIVE.CSS
HIGHFIELD HOLIDAY HOME
==================================================*/

/*==================================================
LARGE DESKTOP
==================================================*/
@media (min-width:1400px){
    .container{max-width:1360px;}
}

/*==================================================
LAPTOP
==================================================*/
@media (max-width:1200px){
    .section-padding{padding:110px 0;}
    .hero-title{font-size:4.8rem;}
    .weather-card{right:30px;}
    .room-content{padding-left:30px;}
    .dining-content{padding-right:30px;}
    .booking-box{padding:60px;}
}

/*==================================================
TABLET LANDSCAPE & MOBILE (991px and down)
==================================================*/
@media (max-width:991px){
    .section-padding{padding:60px 0;} /* Reduced section padding for tighter spacing */

    /*====================
    HEADER
    ====================*/
    .header nav{position:fixed;top:0;right:-100%;width:320px;height:100vh;background:var(--wine);flex-direction:column;justify-content:center;gap:28px;transition:.4s;z-index:999;}
    .header nav.open{right:0;}
    .menu-toggle{display:flex;align-items:center;justify-content:center;}
    .btn-book{display:none;}
    
    .header .btn-primary, 
    .header .btn-book {
        padding: 10px 20px;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    .header .logo img {
        height: 48px;
    }

    /*====================
    HERO & FOOTER BLOCK
    ====================*/
    .hero {
        min-height: auto; 
        padding-top: 110px;
        padding-bottom: 40px; /* Reduced to bring content closer */
        display: block; 
    }
    .hero .container {
        display: flex;
        flex-direction: column; 
        align-items: center;
        width: 100%;
    }
    .sontent {
        padding-bottom: 20px; /* Reduced text container baseline spacing */
        width: 100%;
        text-align: center;
        margin: auto;
    }
    .hero-buttons{justify-content:center;}
    .hero-rating{justify-content:center;}
    .weather-card{display:none;}
    
    .hero-footer {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
        margin: 24px auto 0 auto; /* Compact spacing above stats block */
        width: 100%;
        max-width: 540px; 
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 Columns on Tablet */
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    .hero-footer div {
        padding: 16px 12px; /* Tightened internal padding to save height */
        border-right: 1px solid rgba(0,0,0,0.08);
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .hero-footer div:nth-child(2n) {
        border-right: none;
    }
    .hero-footer div:nth-child(3),
    .hero-footer div:nth-child(4) {
        border-bottom: none;
    }
    .hero-footer strong {
        font-size: 1.8rem; /* Scaled down numerical typography slightly */
    }

    /*====================
    ABOUT
    ====================*/
    .editorial-content{padding-left:0;margin-top:40px;}
    .image-large{width:100%;}
    .image-small{display:none;}

    /*====================
    ROOMS
    ====================*/
    .room-content{padding-left:0;margin-top:40px;}
    .room-image img{height:460px;}

    /*====================
    DINING
    ====================*/
    .dining-content{padding-right:0;margin-bottom:40px;}

    /*====================
    BOOKING
    ====================*/
    .booking-box{padding:40px 30px;}
}

/*==================================================
SMALL MOBILE DEVICES (576px and down)
==================================================*/
@media (max-width:576px){
    .hero-footer {
        grid-template-columns: repeat(2, 1fr); /* Maintained 2-Column grid pattern on tiny screens */
        max-width: 100%;
    }
    
    /* Ensure header fit */
    .header .btn-primary,
    .header .btn-book {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
    .logo img {
        height: 40px !important;
    }
}