/* MOBILE VIEW FIRST */

/* ############## TABLET UP ############## */
@media (width >= 768px) {
    /* #region ====== GENERAL ====== */
        :root {
            --max-page: 100%;
            --main-padding-x: 5rem;
            --section-padding-y: 7rem;
        }

        .title {
            font-size: 3rem;
        }
        .desc {
            font-size: 1.1rem;
        }
    /* #endregion ====================== */
    
    /* #region ====== NAVBAR ====== */
        .nav-brand {
            svg {
                height: 42px;
            }
            span:first-child {
                font-size: 1.5rem;
            }
            span:last-child {
                font-size: .75rem;
            }
        }
    /* #endregion ====================== */

    /* #region ====== FOOTER ====== */
        footer {
            .top {
                grid-template-columns: 1.5fr 1fr 1fr;
                grid-template-rows: repeat(3, -webkit-max-content);
                grid-template-rows: repeat(3, max-content);
                gap: 7%;
            }
            .profile {
                flex-direction: row;
                gap: 2rem;
            }
            .logo {
                min-width: 100px;
                width: 100px;
                padding-top: .5rem;
            }
            .social a:hover {
                color: var(--secondary);
            }
            .navigate ul {
                grid-template-columns: 1fr;
            }
        }
    /* #endregion ====================== */

    /* >>>>>>>>>>>>>>>>>>>>>>>>>  INDEX  <<<<<<<<<<<<<<<<<<<<<<<<< */

    /* #region ====== MAIN HEADER ====== */
        #mainHeader {
            .hero-footer {
                padding: 3rem var(--main-padding-x);
            }
            .rating {
                flex-direction: row;
                align-items: center;
                gap: 2rem;

                img {
                    width: 40px;
                }
            }

            .video-controls {
                flex-direction: row;
            }
        }
    /* #endregion ====================== */

    /* #region ====== ABOUT ====== */
        #about {
            padding: var(--section-padding-y) 0 var(--section-padding-y) var(--main-padding-x);

            .garnish {
                top: calc(var(--section-padding-y) * -1);
                left: calc(var(--main-padding-x) * -1);
                right: auto;
                width: 325px;
            }
            .wrapper {
                grid-template-columns: auto 48%;
            }
            .text {
                .cols {
                    grid-template-columns: repeat(3, 1fr);
                    gap: 1.75rem;
                    font-size: 1rem;
                    margin-top: 2.5rem;
                    
                    > div {
                        display: unset;
                        align-items: unset;
                        gap: 0;
                        padding-right: 1.75rem;
                    }
                    > div:not(:last-child) {
                        border-right: 1px solid var(--border);
                    }
                    p:nth-of-type(1) {
                        margin-bottom: .5rem;
                    }
                }
            }
            .img {
                position: relative;
                height: 100%;
                border-radius: 0;
                overflow: visible;

                span {
                    font-size: 1.65rem;
                    line-height: 1.3;
                    padding: 2rem;
                    padding-right: 25%;
                }
                img {
                    position: absolute;
                    right: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 2rem 0 0 2rem;
                }
            }
        }
    /* #endregion ====================== */

    /* #region ====== ESCAPE ====== */
        #escape {
            .garnish {
                top: -25px;
                width: 450px;

                img {
                    right: -175px;
                }
                img:first-child {
                    display: block;
                    width: 75%;
                    right: -150px;
                }
                img:last-child {
                    top: 50px;
                }
            }
            
            .top-head {
                max-width: 70%;
                margin: 0 auto;
            }

            .wrap-items {
                grid-template-columns: repeat(4, 1fr);
                gap: 1.5rem;
            }
        }
    /* #endregion ====================== */

    /* >>>>>>>>>>>>>>>>>>>>>>>>>  PAGES  <<<<<<<<<<<<<<<<<<<<<<<<< */

    /* #region ====== RESERVATION ====== */
        #reserveHeader {
            --paddingHead: 78px;

            height: calc(70vh + var(--paddingHead));

            &::before {
                background-position: center;
            }
            .wrapper {
                padding: 0 var(--main-padding-x);
            }
        }

        #reservationSearch {
            top: calc(var(--section-padding-y) * -1);
            
            .reservation-search-panel {
                width: 100%;
                padding: 1.25rem;
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
            }
            .reservation-item {
                .pick-dates,
                .qty {
                    i {
                        display: block;
                        margin-right: .75rem;
                    }
                }
            }
        }

        #reservationResults {
            padding: 1rem var(--main-padding-x) var(--section-padding-y) var(--main-padding-x);

            .reservation-result-head {
                margin-bottom: 1.75rem;

                P:first-child {
                    font-size: 2.25rem;
                }
                #reservationResultCount {
                    span {
                        display: inline-block;
                        margin-right: 1.5rem;
                        margin-bottom: 0;
                    }
                }
            }
            .reservation-room-card {
                grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr);
            }
            .room-media {
                width: 100%;
                padding: 1rem;
                padding-right: .25rem;
            }
            .room-desc {
                min-width: 0;
                padding: 1rem;
            }
            .room-action {
                grid-column: span 2;
                padding: 1rem;
                border-top: 1px solid var(--border);

                > p {
                    font-size: 1.25rem;
                }
                .summary {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    gap: 1rem;

                    span {
                        min-width: 100px;
                    }
                    .cr-btn {
                        width: fit-content;
                        margin-top: 0;
                    }
                }
            }
        }
    /* #endregion ====================== */

    
}

/* ############## DESKTOP UP ############## */
@media (width >= 1025px) {
  /* #region ====== GENERAL ====== */
        :root {
            --max-page: 2750px;
            --main-padding-x: 8rem;
        }
    /* #endregion ====================== */
    
    /* #region ====== NAVBAR ====== */
        #navbar {
            gap: 2rem;
        }
        .nav-menu {
            flex: 1;
            position: unset;
            inset: unset;
            display: unset;
            flex-direction: unset;
            gap: 0;
            padding: 0;
            background-color: transparent;
            opacity: 1;
            pointer-events: all;            
            container-type: inline-size;
            container-name: navmenu-container;

            &::before,
            &::after {
                display: none;
            }
        }
        .nav-menu ul {
            flex: unset;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .nav-menu ul li {
            width: fit-content;
            
            .nav-link {
                position: relative;
                display: inline-block;
                width: fit-content;
                color: var(--putih);
                font-size: 1rem;
                text-transform: capitalize;
                line-height: 1;
                vertical-align: middle;
                white-space: nowrap;
                padding: .5rem 1rem;
                background-color: transparent;
                border-radius: 3rem;

                &:is(:hover, :active, .active) {
                    color: var(--secondary) !important;
                }
                &::before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: -2px;
                    width: 50%;
                    height: 2px;
                    background-color: var(--primary);
                    border-radius: 3rem;
                    transform: translateX(-50%) scaleX(0);
                    transform-origin: center left;
                    transition: var(--anim);
                    -webkit-animation: changeBfrNav linear forwards;
                            animation: changeBfrNav linear forwards;
                    animation-timeline: scroll();
                    animation-range: var(--nav-scroll-range);
                }
                &.active::before {
                    transform: translateX(-50%) scaleX(1);
                }
                &::after {
                    display: none;
                }
            }
        }
        @-webkit-keyframes changeBfrNav {
            to {
                background-color: var(--secondary);
            }
        }
        @keyframes changeBfrNav {
            to {
                background-color: var(--secondary);
            }
        }

        label[for="nav-toggle"] {
            display: none;
        }

        .logo-nav-mobile,
        .cta-mobile {
            display: none;
        }
        .cta {
            display: inline-block;
        }
    /* #endregion ====================== */

    /* >>>>>>>>>>>>>>>>>>>>>>>>>  INDEX  <<<<<<<<<<<<<<<<<<<<<<<<< */

    /* #region ====== MAIN HEADER ====== */
        #mainHeader {
            .text {
                h1 {
                    font-size: 5rem;
                }
                p {
                    font-size: 1.25rem;
                }
            }
            .higlight {
                padding: .75rem 2rem;

                > div {
                    gap: 1rem;
                }
                i {
                    font-size: 2.25rem;
                }
                p {
                    font-size: .8rem;
                }
            }
        }
    /* #endregion ====================== */
    
    /* >>>>>>>>>>>>>>>>>>>>>>>>>  PAGES  <<<<<<<<<<<<<<<<<<<<<<<<< */

    /* #region ====== RESERVATION ====== */
        #reservationSearch {
            top: calc(var(--section-padding-y) * -0.65);
            display: flex;
            justify-content: center;
            
            .reservation-search-panel {
                grid-template-columns: max-content max-content max-content max-content;
                align-items: end;
                gap: 1rem;
                width: fit-content;
                padding: 1.5rem;
            }
            .reservation-item {
                &:first-of-type {
                    grid-column: span 1;
                    width: 330px;
                }
                &:not(:first-of-type) {
                    width: 190px;
                }
            }
            .cr-btn {
                grid-column: auto;
                width: 145px;
            }
        }

        #reservationResults {
            .reservation-room-card {
                grid-template-columns: minmax(360px, 1fr) minmax(430px, 1.18fr) minmax(210px, .55fr);
            }
            .room-action {
                grid-column: span 1;
                display: flex;
                flex-direction: column;
                gap: .5rem;
                height: 100%;
                margin-top: 0;
                border-top: none;
                border-left: 1px solid var(--border);

                .summary {
                    flex: 1;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 1rem;

                    div {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                    }
                    p {
                        font-weight: 600;
                        
                        span {
                            display: block;
                            min-width: unset;
                            font-size: .85rem;
                            font-weight: 400;
                            margin-bottom: .25rem;
                        }
                        &:nth-of-type(3) {
                            font-size: 1.25rem;

                            span {
                                font-size: 1rem;
                                margin-bottom: .15rem;
                            }
                        }
                    }
                    i {
                        display: none;
                    }
                    .cr-btn {
                        width: 100%;
                        margin-top: 0;
                    }
                }
            }
        }
    /* #endregion ====================== */
}