/* ===================================================================
   Project      : Point Zone Resort Website
   File         : responsive.css
   Description  : Mobile and Small Screen Responsiveness
   Author       : CHRISTOPHER PETER MSUBI
   Version      : 1.0.0
   =================================================================== */


/*==================================================
    LAYOUT BREAKPOINT
==================================================*/


@media screen and (max-width: 1080px){

    /*==================================================
        01. HEADER
    ==================================================*/

    /*----------------------------------------------
      Header Collapse at Layout Breakpoint to avoid
      nav Text Wraps
    ----------------------------------------------*/

    .header-container .desktop-nav,
    .header-container > .btn-book{

        display:none;

    }    

    .header-container .mobile-toggle{

        display:inline-flex;

    }


    /*==================================================
        FACILITIES SECTION 
    ==================================================*/

    /*----------------------------------------------
      Stack Cards when 540px Columns No Longer Fits
    ----------------------------------------------*/

    .facilities .facility-card,
    .facilities .facility-card.reverse{

        grid-template-columns:minmax(520px, 540px);

        grid-template-areas:
            "media"
            "content";

        justify-content:center;
    }

    .facility-content .discover-link{
        justify-content:center;
    }

    /*==================================================
        FIND US SECTION 
    ==================================================*/

    /*----------------------------------------------
      Stack Columns to Rows at 1080px
    ----------------------------------------------*/


    .location .location-grid{

        grid-template-columns:1fr;
        gap:40px;
        justify-content:center;

        padding-inline: 10px;
    }

    .location .contact-card{

        flex-direction: row;
        gap:30px;

        justify-content: space-around;
    }    

    .contact-card .airport-card{

        margin-top:0;
        padding-top:0;
        border:none;
    }

    .airport-card .discover-link{
        justify-content:center;
    }



    /*==================================================
        SITE FOOTER 
    ==================================================*/

    /*----------------------------------------------
      At layout breakpoint First row take whole row
      and remaining two take the second row in two
      columns
    ----------------------------------------------*/


    .site-footer .footer-grid{

        display:flex;
        flex-wrap:wrap;
        gap:20px 40px;

    }

    .description{
        padding-right: 0;
    }

    .footer-grid .footer-column:first-child{
        flex:0 0 100%;
    }

    .footer-grid .footer-column:nth-child(2),
    .footer-column:nth-child(3){
        flex:0 0 250px;
    }

    

    .footer-column .footer-description{
        max-width:100%;
    }

    .site-footer .footer-bottom{

        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
        gap:12px;

    }

    .footer-bottom .footer-bottom-developer,
    .footer-bottom .footer-bottom-links{

        justify-content:center;

    }



    /*==================================================
        PAGES:  
    ==================================================*/

    /*----------------------------------------------
      Rooms and Suites Page
    ----------------------------------------------*/

    .rooms-showcase .room-showcase-card,
    .rooms-showcase .room-showcase-card.reverse{

        grid-template-columns:minmax(520px, 540px);

        grid-template-areas:
            "media"
            "content";

        justify-content:center;
    }


    
    /*----------------------------------------------
      Individual Room Pages and Conference Halls
    ----------------------------------------------*/

    .room-details .room-details-grid,
    .conference-details .conference-details-grid,
    .restaurant-details .restaurant-details-grid {

        grid-template-columns: 1fr;
        justify-content:center;

        gap: 50px;
    }

    .about-details .about-details-grid{

        grid-template-columns: 1fr;
        justify-content:center;

        gap: 0;
    }

    .room-details-grid .room-description,
    .conference-details-grid .conference-description,
    .restaurant-details-grid .restaurant-description,
    .about-details-grid .about-description {

        max-width: 100%;
    }


    .room-details-grid .room-summary,
    .conference-details-grid .conference-summary,
    .restaurant-details-grid .restaurant-summary {

        max-width:400px;
        margin: 0 auto;
    }

    .about-summary {
        padding-top: 0;
    }

    .about-details-grid .story-images {

        max-width:580px;
        margin: 0 auto;       

        
    }


    .restaurant-menu-panels .menu-panel{

        grid-template-columns: 1fr;
        gap: 0;
    }


    /*----------------------------------------------
      Gallery
    ----------------------------------------------*/

    .gallery-track .gallery-slide{

        flex:0 0 calc((100% - 30px) / 2);

    }

    /* ==================================================
       GALLERY LIGHTBOX
    ================================================== */



    .room-gallery .gallery-lightbox{

        padding:25px;

    }

    .gallery-lightbox-dialog .gallery-lightbox-prev{

        left:15px;

    }

    .gallery-lightbox-dialog .gallery-lightbox-next{

        right:15px;

    }

    .gallery-lightbox-dialog .gallery-lightbox-close{

        top:-40px;
        right:20px;

    }

    .gallery-lightbox-figure .gallery-lightbox-image{

        max-width:80%;

        max-height:70vh;
    }

}


/*==================================================
    MOBILE DEVICE BREAKPOINT
==================================================*/

@media screen and (max-width: 768px) {


    /*==================================================
        GLOBAL COMPONENTS
    ==================================================*/

    /*----------------------------------------------
      SVG
    ----------------------------------------------*/

    body .svg-icon{

        width:26px;
        height:26px;

        /*stroke-width:1.8;*/
    }

    /*----------------------------------------------
      Primary Button
    ----------------------------------------------*/

    body .btn-primary{

        height: 56px;
        padding: 0 15px;
        font-size: .89rem;
        letter-spacing: .4px;
    }
    

    /*----------------------------------------------
      Discover Link
    ----------------------------------------------*/

    body .discover-link{

        gap:12px;

        font-size:.89rem;

        /*letter-spacing:.04em;*/
    }

    body .discover-arrow{

        width:32px;
        height:32px;
    }    


    /*==================================================
        02. HERO
    ==================================================*/

    main .hero{

        min-height:100svh;

    }

    .hero-slide{

        justify-content:center;

        align-items:center;

    }

    /*----------------------------------------------
      Hero Content
    ----------------------------------------------*/

    .hero .hero-content,
    .page-hero .page-hero-content{

        width:min(92%,470px);

        margin-inline:auto;

        padding: 20px;

        margin-top:0;

        text-align:center;

        align-items:center;

    }

    .hero-content .hero-intro{

        display:none;

    }

    .hero-content .hero-title,
    .page-hero-content .hero-title{

        font-size: clamp(1.7rem, 4vw, 1.9rem);
        line-height:1.15;

    }

    .hero-content .hero-description,
    .page-hero-content .hero-description{

        max-width:38ch;

        font-size:.89rem;
        
        line-height:1.5;

        margin-inline:auto;

    }

    .page-hero-content .hero-description{
        max-width:40ch;
    }

    /*----------------------------------------------
      Hero Actions
    ----------------------------------------------*/

    .hero-content .hero-actions{

        justify-content:center;

        flex-wrap:wrap;

        gap:12px;

    }

    .hero-content .hero-actions .btn{

        flex:1 1 100px;
        max-width:100px;

        padding:20px;
        font-size: .89rem;
        letter-spacing: .4px;

    }

    /*----------------------------------------------
      Hero Pagination
    ----------------------------------------------*/

    .hero .hero-pagination{

        left:50%;

        bottom:95px;

        transform:translateX(-50%);

    }

    /*----------------------------------------------
      Hero Controls
    ----------------------------------------------*/

    .hero .hero-controls{

        right: 50%;
        bottom:35px;

        transform:translateX(50%);

    }

    .hero .hero-scroll{

        bottom: 38px;
    }

    .hero .hero-control{

        width: 40px;
        height: 40px;
    }



/*==================================================
    04. AVAILABILITY SEARCH
==================================================*/

    /*----------------------------------------------
      Availability Section
    ----------------------------------------------*/

    main .availability{

        margin-bottom:70px;

    }

    .availability .availability-card{

        padding:36px 24px;

    }

    /* BEGIN: SECTION HEADER USED GLOBALY */

    main .section-header{
        margin-bottom:35px;
    }

    main .section-title{

        font-size: clamp(1.7rem, 4vw, 1.9rem);
        margin-bottom:20px;
    }

    main .section-text{

        max-width:100%;

        font-size:.89rem;
        
        line-height:1.5;
    }

    /* END: SECTION HEADER USED GLOBALY */

    /*----------------------------------------------
      Section Header
    ----------------------------------------------*/    

    .availability .availability-card .section-text{

        /*max-width:34ch;*/
        max-width:90%;
        margin-inline:auto;
    }

    /*----------------------------------------------
      Availability Form
    ----------------------------------------------*/

    .availability-card .availability-form{

        grid-template-columns:1fr;

        justify-items:center;

        gap:10px;

    }

    .availability-form .form-group{

        width:min(100%,220px);
        gap:8px; 
    }

    .availability-form .form-group input,
    .availability-form .form-group select{

        height:52px;
        padding:0 15px;
        font-size:.90rem;
    }

    .availability-form .form-action{

        width:min(100%,220px);

        justify-content:center;

    }

    .availability-form .form-action .btn{

        width:100%;

    }



/*==================================================
    05. ABOUT SECTION
==================================================*/

    /*----------------------------------------------
      About Section
    ----------------------------------------------*/

    main .about{
        padding:20px 0 50px;
    }
    
    /*----------------------------------------------
      About Grid
    ----------------------------------------------*/

    .about .about-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .about-content {

        width:100%;
    }

    /*.about .section-text{
        max-width:100%;
        margin-inline:auto;
    }*/    

    /*----------------------------------------------
      About Images
    ----------------------------------------------*/

    .about-grid .about-images{

        width:min(100%,520px);
        min-height:520px;        

    }

    .about-images .about-image-large{

        width:72%;
        height:390px;

    }

    .about-images .about-image-small{

        width:48%;
        height:220px;

        border-width:8px;

    }

    /*----------------------------------------------
      Decorative Shape
    ----------------------------------------------*/

    .about-grid .about-images::after{

        top:0;
        right:0;

        width:60px;
        height:60px;
    }


    /*----------------------------------------------
      Entrance Animation
    ----------------------------------------------*/

    .about.reveal.is-visible .about-image-large{
        transform:translateY(0px);
    }

    .about.reveal.is-visible .about-image-small{
        transform:translateY(0px);
    }



/*==================================================
    06. ROOMS & SUITES SECTION
==================================================*/


    /*----------------------------------------------
      Rooms Section
    ----------------------------------------------*/

    main .rooms .section-header{

       margin-bottom:40px;

    }


    /*----------------------------------------------
      Rooms Grid
    ----------------------------------------------*/

    .rooms .rooms-grid{

        grid-template-columns:1fr;

        justify-items:center;

        gap:26px;

    }

    .rooms-grid .room-card{

        width:min(100%,420px);

    }

    /*----------------------------------------------
      Room Title
    ----------------------------------------------*/

    .room-content .room-title{

        font-size:1.25rem;
    }

    

/*==================================================
    07. AMENITIES
==================================================*/

    /*----------------------------------------------
      Section
    ----------------------------------------------*/    

    main .amenities .section-header{
        margin-bottom:40px;
    }


    /*----------------------------------------------
      Grid
    ----------------------------------------------*/

    .amenities .amenities-grid{

        grid-template-columns:1fr;
        justify-items:center;
    }

    /*----------------------------------------------
      Card
    ----------------------------------------------*/

    .amenities-grid .amenity-card{

        width:min(100%,420px);
        padding:36px 28px;

    }



/*==================================================
    08. FACILITIES
==================================================*/


    /*----------------------------------------------
      Section
    ----------------------------------------------*/

    
    main .facilities .container{

        padding-inline:50px;

    }

    main .facilities .section-header{

        margin-bottom:40px;

    }


    /*----------------------------------------------
      Cards
    ----------------------------------------------*/

    .facilities-grid .facility-card{

        padding-inline:50px;

    }


    .facilities-grid .facility-card,
    .facilities-grid .facility-card.reverse{

        /*grid-template-columns:minmax(520px, 1fr); Later to fix min-width*/
        grid-template-columns:1fr;
        gap:0;

    }

    /*----------------------------------------------
      Media
    ----------------------------------------------*/

    .facilities-grid .facility-media{

        max-height:320px;

    }

    .facilities-grid .facility-category{

        left:20px;
        bottom:20px;

    }

    /*----------------------------------------------
      Content
    ----------------------------------------------*/

    .facilities-grid .facility-content{

        max-height:none;
        padding:30px;

    }

    .facility-content .facility-title{
        text-align:center;
    }


    /*----------------------------------------------
      Feature List
    ----------------------------------------------*/

    .facility-content .facility-features{

        grid-template-columns:1fr;
        gap:8px;

        margin-bottom:32px;

    }

    /*----------------------------------------------
      CTA
    ----------------------------------------------*/

    .facility-content .discover-link{
        justify-content:center;
    }



/*==================================================
    09. NEWS & SPECIAL OFFERS
==================================================*/

    /*----------------------------------------------
      Section
    ----------------------------------------------*/

    
    main .news .section-header{

        margin-bottom:40px;

    }


    /*----------------------------------------------
      Grid
    ----------------------------------------------*/

    .news .news-grid{

        grid-template-columns:1fr;
        justify-items:center;
        gap:26px;

    }

    .news-grid .news-card{

        width:min(100%,420px);

    }

    /*----------------------------------------------
      Image
    ----------------------------------------------*/

    .news-media .news-badge{

        top:18px;
        left:18px;

    }

        
    /*----------------------------------------------
      CTA
    ----------------------------------------------*/

    .news-content .discover-link{

        justify-content:center;

    }


/*==================================================
    10. FIND US
==================================================*/

    /*----------------------------------------------
      Section
    ----------------------------------------------*/

    main .location .section-header{

        margin-bottom:40px;

    }


    /*----------------------------------------------
      Grid
    ----------------------------------------------*/

    .location .location-grid{

        grid-template-columns:1fr;

        gap:30px;

        /*padding-inline:0;*/

    }

    /*----------------------------------------------
      Map
    ----------------------------------------------*/

    .location-map .map-wrapper{

        min-height:360px;
        border-radius:14px;

    }

    .map-wrapper .map-fullscreen{

        top:16px;

        right:16px;

    }

    /*----------------------------------------------
      Contact Card
    ----------------------------------------------*/

    .location-grid .contact-card{

        flex-direction:column;

        gap:28px;

        padding:30px 24px;

    }

    .contact-card .contacts{

        gap:20px;

    }

    /*----------------------------------------------
      Contact Groups
    ----------------------------------------------*/

    .contacts .contact-group{

        align-items:flex-start;

    }

    /*----------------------------------------------
      Airport Card
    ----------------------------------------------*/

    .contact-card .airport-card{

        margin-top:0;

        padding-top:28px;

        border-top:1px solid rgba(0,0,0,.08);

        gap:18px;

    }

    .airport-card .airport-item{

        align-items:flex-start;

    }

    /*----------------------------------------------
      CTA
    ----------------------------------------------*/

    .airport-card .discover-link{

        justify-content:center;

    }


/*==================================================
    11. SITE FOOTER
==================================================*/

    /*----------------------------------------------
      Footer Section
    ----------------------------------------------*/

    .site-footer .container{

        padding-inline:30px;

    }

    /*----------------------------------------------
      Back To Top
    ----------------------------------------------*/

    .site-footer .back-to-top{

        top:18px;
        right:18px;

        width:48px;
        height:48px;

    }

    /*----------------------------------------------
      Footer Grid
    ----------------------------------------------*/

    .site-footer .footer-grid{

        display:flex;
        flex-direction:column;
        gap:40px;

    }

    .footer-grid .footer-column,
    .footer-grid .footer-column:first-child,
    .footer-grid .footer-column:nth-child(2),
    .footer-grid .footer-column:nth-child(3){

        flex:0 0 auto;

        width:100%;

    }

    /*----------------------------------------------
      Brand
    ----------------------------------------------*/

    .footer-column .footer-description{

        max-width:100%;

    }

    .footer-column .footer-social{
        margin:20px 0 0;
    }

    /*----------------------------------------------
      Links
    ----------------------------------------------*/

    .footer-column .footer-links{

        gap:12px;

    }

    /*----------------------------------------------
      Contact
    ----------------------------------------------*/

    .footer-column .contact-group{

        margin-bottom:20px;

    }

    /*----------------------------------------------
      Footer Bottom
    ----------------------------------------------*/

    .site-footer .footer-bottom{

        flex-direction:column;

        /*align-items:flex-start;

        text-align:left;

        gap:14px;*/

    }

    .footer-bottom .footer-bottom-developer,

    .footer-bottom .footer-bottom-links{

        /*justify-content:flex-start;*/

    }



    /*==================================================
        PAGES
    ==================================================*/


    /*----------------------------------------------
      Rooms and Suites
    ----------------------------------------------*/

    
    main .rooms-showcase .container{

        padding-inline:50px;

    }

    .rooms-showcase .room-showcase-card,
    .rooms-showcase .room-showcase-card.reverse{

        grid-template-columns:1fr;
        gap:0;

    }

    /*----------------------------------------------
      Media
    ----------------------------------------------*/

    .rooms-showcase-grid .room-showcase-media{

        max-height:320px;

    }

    /*----------------------------------------------
      Content
    ----------------------------------------------*/

    .rooms-showcase-grid .room-showcase-content{

        /*max-height:none;*/
        padding:30px 20px;

    }

    .room-showcase-content .room-meta{

        justify-content:center;
    }

    /*----------------------------------------------
      Amenities
    ----------------------------------------------*/

    .room-showcase-content .room-amenities{

        grid-template-columns:1fr;
        gap:5px;

        margin-bottom:20px;

    }


/*==================================================
    BOOKING MODAL
==================================================*/

    main .booking-modal{

        padding:30px;

        align-items:flex-start;

        overflow-y:auto;

    }

    .booking-modal .booking-dialog{

        width:min(100%,480px);

        margin-top:30px;

        max-height:none;

    }

    .booking-dialog .booking-header{

        padding:20px 26px;

    }

    .booking-dialog .booking-header .booking-title{

        font-size:1.25rem;
    }

    .booking-dialog .booking-form{

        padding:30px;

    }

    .booking-dialog .booking-grid{

        display:flex;
        flex-wrap: wrap;

        gap:20px;

    }
    
    .booking-grid .form-group{

        flex: 1;

    }

    .booking-dialog .booking-form .form-action .btn{
        white-space: wrap;
    }


    .booking-dialog .booking-alert{

        padding:10px 20px;
        font-size:.85rem;
        line-height:1.5;
    }

    .booking-dialog .booking-alert  h3{

        font-size:1.05rem;
        margin-bottom:10px;
    }

    .booking-dialog .booking-error  h3{

        font-size:.90rem;
    }

    .booking-dialog .booking-alert p{
        margin-bottom:8px;
    }

    .booking-dialog .booking-alert .btn{
        height: 50px;
    }



    /*----------------------------------------------
      Individual Room Pages and Conference Halls
    ----------------------------------------------*/

    main .room-details .container,
    main .conference-details .container,
    main .restaurant-details .container,
    main .about-details .container{

        padding-inline:50px;
    }

    main .room-description .section-header,
    main .conference-description .section-header,
    main .restaurant-description .section-header,
    main .about-description .section-header{

        margin-bottom:10px;

    }

    .room-details .room-details-grid,
    .conference-details .conference-details-grid{

        grid-template-columns:1fr;
        
    }

    .room-policies .policy-grid,
    .conference-halls .conference-halls-grid,
    .about-facilities .about-facilities-grid {

        grid-template-columns: 1fr;
        gap: 10px;

        margin-bottom:18px;
    }

    .policy-grid .room-policies-title,
    .conference-halls-grid .conference-section-title,
    .conference-contact .conference-section-title,
    .restaurant-hours .restaurant-section-title,
    .restaurant-contact .restaurant-section-title,
    .about-facilities .about-section-title{

        font-size:1.25rem;

    }

    .policy-section .room-policies-description,
    .policy-grid .room-policies-list,

    .conference-halls-grid .conference-hall-card-list,
    .conference-contact .conference-contact-description,

    .restaurant-hours-grid .restaurant-hours-card-list,
    .restaurant-contact .restaurant-contact-description,
    .about-details-grid .section-text,
    .about-facilities .about-facilities-card-list {

        font-size:.89rem;
        line-height:1.5;
    }



    .restaurant-details .restaurant-menu-header .restaurant-section-title{

        font-size:1.45rem;
        margin-bottom:10px;
    }

    .restaurant-details .restaurant-menu-header .restaurant-section-description{

        font-size:.89rem;
        line-height:1.5;
    }



    .restaurant-menu-tabs .menu-tab,
    .restaurant-menu-panels .menu-item-description{

        font-size:.89rem;
    }






    /*----------------------------------------------
      Gallery
    ----------------------------------------------*/    

    main .room-gallery .container{

        padding-inline:20px;

    }

    .gallery-viewport .gallery-track{

        gap:20px;

    }

    .gallery-track .gallery-slide{

        flex:0 0 100%;

    }

    .gallery .gallery-prev,
    .gallery .gallery-next{

        width:46px;
        height:46px;

    }


    /* ==================================================
       GALLERY LIGHTBOX
    ================================================== */

    .gallery-lightbox-dialog .gallery-lightbox-prev,
    .gallery-lightbox-dialog .gallery-lightbox-next,
    .gallery-lightbox-dialog .gallery-lightbox-close{

        width:44px;
        height:44px;

    }

    .gallery-lightbox-dialog .gallery-lightbox-counter{

        bottom:-45px;

    }


    /*==================================================
        NEWS AND SPECIAL OFFERS PAGE
    ==================================================*/

    .news-page{

        padding:50px 0;
    }

    .news-page .container{
        padding-inline:30px;
    }

    .news-page-image img{
        max-height: 320px;
    }

    .news-header{

        margin-bottom:14px;
    }

    .news-meta{

        gap:15px;
        margin-bottom:16px;
    }


    .news-page-label{

        font-size:.86rem;
        letter-spacing:.05em;
    }

    .news-meta time{
        font-size:.86rem;
    }


    .news-page-title{

        font-size:1.3rem;
        line-height:1.05;
    }

    .news-summary{
        margin-bottom:10px;
    }


    .news-full-content{
        gap:8px;
    }


    .read-more-toggle{
        gap:6px;
        font-size:.86rem;
    }








}