/* ===================================================================
   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
    ----------------------------------------------*/
    .page-details .page-details-grid {

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

    .about-grid{
        gap: 0;
    }

    .page-details-grid .page-description {
        max-width: 100%;
    }


    .page-details-grid .page-summary {
        
        width: min(400px, 100%);
        margin: 0 auto;
    }

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

    .about-summary .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
    ================================================== */
    .gallery-lightbox{
        padding:10px;
    }

    .gallery-lightbox-dialog .gallery-lightbox-prev{
        left:10px;
    }

    .gallery-lightbox-dialog .gallery-lightbox-next{
        right:10px;
    }

    .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;
    }
    
    /* ==========================
         01. HEADER
    ========================== */
    
    .site-header {
        
        height:80px;        
        background:
        linear-gradient(
            90deg,
            rgba(20,20,20, 0.48),
            10%, /* Forces the mathematical midpoint to happen at 10% instead of 50% */
            rgba(20,20,20, 0)
        );
        
        /*background:
        linear-gradient(
            90deg,
            rgba(20,20,20,.78) 0%,
            rgba(20,20,20,.58) 28%,
            rgba(20,20,20,.32) 55%,
            rgba(20,20,20,.12) 75%,
            rgba(20,20,20,.05) 100%
        );*/
    }
    
    .logo img {
        width:60px;
        height:60px;
        
        
    }
    
    .logo span {        
        text-shadow: 0 1px 3px rgba(0, 0, 0, .5);        
        
    }

    .site-header.is-scrolled .logo span{
        text-shadow: none;
    }

    /*==================================================
        02. HERO
    ==================================================*/
    main .hero{
        min-height:85svh;
    }

    .hero-slide{
        justify-content:center;
        align-items:center;

    }
    
    main .hero-overlay,
    .page-hero .hero-overlay {
        background: transparent;
    }    

    /*----------------------------------------------
      Hero Content
    ----------------------------------------------*/
    .hero .hero-content,
    .page-hero .page-hero-content{

        width:min(92%,470px);
        margin-inline:auto;
        padding: 15px 10px;        
        border-radius: var(--radius-md);
        margin-top:0;
        text-align:center;
        align-items:center;        
        text-shadow: 0 1px 3px rgba(0, 0, 0, .5);        
        background: rgba(20,20,20,.20);        
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);

    }

    .hero-content .hero-intro,
    .hero-content .hero-actions{
        display:none;
    }

    .hero-content .hero-title,
    .page-hero-content .hero-title{
        
        font-size: clamp(1.5rem, 4vw, 1.7rem);
        line-height:1.03;
        margin-bottom: 18px;

    }
    
    .page-hero-content .section-label{        
        display:none;
    }

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

        font-size:.89rem;        
        line-height:1.5;
        margin-inline:auto;        
        margin-bottom: 0px;

    }

    /*----------------------------------------------
      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:40px;
        transform:translateX(-50%);

    }

    /*----------------------------------------------
      Hero Controls
    ----------------------------------------------*/
    .hero .hero-controls{
        
        display:none;
        /*right: 50%;
        bottom:35px;
        transform:translateX(50%);*/

    }

    /*----------------------------------------------
      HERO SCROLL
    ----------------------------------------------*/    
    .hero .hero-scroll{
        
        right: 5px;
        bottom: 20px;        
        width: auto;
        height: auto;        
        gap: 4px;        
        background: transparent;
        
    }
    
    .hero-scroll-text{
        
        letter-spacing: 2px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    }
    
    .hero-scroll-line{
        
        height: 46px;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
        
    }


/*==================================================
    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:30px;
    }
    
    main .section-label{
        margin-bottom:13px;
    }

    main .section-title{

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

    main .section-text{

        max-width:100%;
        font-size:.89rem;        
        line-height:1.5;        
        margin-bottom:11px;
    }

    /* END: SECTION HEADER USED GLOBALY */

    /*----------------------------------------------
      Section Header
    ----------------------------------------------*/    
    .availability .section-label{
        margin-bottom:12px;
    }
    
    .availability .section-label::before{
        margin:0 auto 15px;
    }
    
    .availability .section-title{
        margin-bottom:15px;
    }
    
    .availability .section-text{
        
        line-height:1.5;
        /*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;
    }
    
    main .about .container{
        padding-inline:20px;
    }
    
    /*----------------------------------------------
      About Grid
    ----------------------------------------------*/
    .about .about-grid{

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

    }

    .about-content {
        width:100%;
    }


    /*----------------------------------------------
      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{
        padding:50px 0;
    }

    main .rooms .container{
        padding-inline:20px;
        
    }

    /*----------------------------------------------
      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
==================================================*/

    .amenities{
        padding:50px 0;
        
    }
    
    main .amenities .container{
        padding-inline:20px;
    }

    /*----------------------------------------------
      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
    ----------------------------------------------*/    
    .facilities{
        padding:50px 0;
    }
    
    main .facilities .container{
        padding-inline:20px;
    }

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


    /*----------------------------------------------
      Cards
    ----------------------------------------------*/
    .facilities-grid .facility-card{
        padding-inline:0px;
    }


    .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
==================================================*/    
    .news{
        padding:50px 0;
    }
    
    main .news .container{
        padding-inline:20px;
    }

    /*----------------------------------------------
      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
==================================================*/    
    .location{
        padding:50px 0;        
    }
    
    main .location .container{
        padding-inline:20px;
    }

    /*----------------------------------------------
      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:10px;
    }

    /*----------------------------------------------
      Contact Groups
    ----------------------------------------------*/
    .contacts .contact-group{
        gap:12px;

    }
    
    .contact-title{
        font-size:1rem;
        
    }

    /*----------------------------------------------
      Airport Card
    ----------------------------------------------*/
    .contact-card .airport-card{

        margin-top:0;
        padding-top:28px;
        border-top:1px solid rgba(0,0,0,.08);
        gap:15px;

    }

    .airport-card .airport-item{

        align-items:flex-start;
        gap:12px;

    }
    
    .airport-details h4{        
        font-size:.90rem;        
    }
    
    .airport-card .discover-link{
        justify-content:center;

    }
    
/* ==================================================
   FOOTER CALL TO ACTION SECTION
================================================== */    
    .footer-cta{
        padding:50px 0;        
    }
    
    .footer-cta-content .section-title{
        margin-bottom:20px;
        font-size:clamp(1.7rem,4vw,1.9rem);        
    }


.footer-cta-actions{

    gap:24px;
    margin-top:30px;

}


/*==================================================
    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:30px;

    }

    .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:10px;
    }

    /*----------------------------------------------
      Contact
    ----------------------------------------------*/
    .footer-column .contact-group{
        margin-bottom:10px;
    }

    /*----------------------------------------------
      Footer Bottom
    ----------------------------------------------*/
    .site-footer .footer-bottom{
        flex-direction:column;
        gap:12px;

    }

    /*==================================================
        PAGES
    ==================================================*/
    /*----------------------------------------------
      Rooms and Suites
    ----------------------------------------------*/    
    .rooms-showcase{
        padding:50px 0;        
    }
    
    main .rooms-showcase .container{
        padding-inline:20px;
    }

    .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{
        gap:15px;
        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
    ----------------------------------------------*/    
    .page-details {
        padding:50px 0;        
    }

    main .page-details .container {

        padding-inline:30px;
    }

    main .page-description .section-header {

        margin-bottom:10px;

    }

    .page-details .page-details-grid {

        grid-template-columns:1fr;
        
    }

    .page-grid {

        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom:18px;
    }

    .page-grid .page-section-title,
    .page-minor-section .page-section-title {

        font-size:1.25rem;

    }

    .page-description .section-text,
    .page-grid .page-section-list {

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

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

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

    .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
    ----------------------------------------------*/    
    .page-gallery {
        padding:50px 0;
        
    }
    
    .page-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;
    }

}