/**********************************************---***********************
    File name: page-property.css
    Site: villasbysilvia

    Copyright 2024 Michael J. Miller, All rights reserved

    Purpose: property page formatting

    required    villa - villa record
                pictures - array of pictures belonging to villa

    Revision History:
    Date        Version     Details
    --------    --------    --------------------------------------------
    4/29/24     3.0a        Created.

************************************************************************/

@layer page {
    #page-content {
    /*    height: calc(100% - 16px);*/
        padding: 4px;
    }
    /************************************************************************
        PROPERTY PHOTOS
    *************************************************************************/
    #property-photos {
    /*    height: 38%;*/
        min-height: 126px;
    /*    background-color: white;*/
        margin-top: 6px;
    }
    #photo-viewer {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        column-gap: 6px;
    /*    border: thin dotted red;*/
    }
    #photo-static {
        display: none;
    }

    #photo-viewer > div, #photo-viewer > picture {
        scroll-snap-align: start;
    /*    background-color: lightgray;*/
    /*    border: thin solid black; */
        height: 100%;
        position: relative;
    }

    #photo-viewer img {
        height: 40vh;
        max-width: calc(100vw - 6px);
        max-height: calc(100vh - 6px);
        object-fit: cover;
        min-width: 100vw;
    }

    #property-photos .caption {
        position: absolute;
        bottom: .75lh;
        width: 100%;
        text-align: center;
    }
    #property-photos .caption > span {
        padding: 2px 1.5rem;
        background-color: rgba(251,245,245,0.7);
        border-radius: 4px;
        /*font-size: smaller;*/
        margin: 0 auto;

        font-size: clamp(.5rem, 1.5vw, 12px);
        overflow: hidden;
        white-space: nowrap;
    }
    /************************************************************
                PROPERTY TITLE
    *************************************************************/
    #villa-title p {
        font-size: small;
/*        text-indent: 1em;*/
        margin: 0 0 0 12px;
    }
    #villa-title > div {
        display: flex;
        width: 100%;
/*        justify-content: space-between;*/
        align-items: baseline;
/*        font-weight: lighter;*/
    }
    #property-summary {
        font-size: .75rem;
        text-align: center;
        margin-top: 0;
    }

    h1 {
        font-size: 1.25rem;
        margin: 6px 6px 0;
    }
    /************************************************************
                main body
    *************************************************************/
    .disclosure-control {
        margin: 0;
    }
    #property-details {
            display: grid;
    /*        grid-template-columns: 1fr 216px minmax(180px, 1fr);*/
            grid-template-columns: 1fr;
            grid-row-gap: 8px;
    }

    .disclosure-panel > li {
        line-height: 2em;
    }
    .accordion-panel > li {
        line-height: 1.4em;
    }
    /************************************************************************
                                DEMO CARD DIALOG
    *************************************************************************/
    #demo-cards {
        z-index: 11;
        max-width: 80vw;
        max-height: 75vh;
        width: 50%;
        margin-left: 4em;
        margin-top: 1em;
        overflow: auto;
        calc(100vh - 12lh);    
        
    }
    #demo-card-frame {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: thin solid gray;
        line-height: 2em;
        
        max-width: 360px;
        margin: 0 auto;
        padding: .5em;
        background-color: white;
    }
    /************************************************************
                REVIEWS
    *************************************************************/
    #reviews-dialog {
        border-radius: 8px;
        border: medium solid black;
        background-color: #ffffff;
        width: 90vw;
    }

    #reviews-wrapper {
/*        display: grid;*/
        grid-template-columns: minmax(300px, 1fr) 330px;
/*            margin-top: 2em;*/
    }
    #reviews-wrapper > div:first-child {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #reviews-wrapper h4 {
        margin-bottom: .5em;
    }
    #review-list {
        overflow: auto;
        max-height: 70vh;
        min-height: 330px;
        height: 530px;        
    }
/*
    #review-summary {
        border: thin dotted red;
    }
*/
    #review-overall {
        font-size: 24px; 
        font-weight: bold;
        padding-left:6px;
    }
    .overall-review-ratings{
/*        display: grid;*/
/*        grid-template-columns: 35px 1fr;*/
        row-gap: .25em;

        display: flex;
        flex-flow: column nowrap;
    }
    .overall-review-ratings > div{
        display: flex;
        width: 90%;
        justify-content: space-between;
    }
    .overall-review-ratings span {
        text-align: center;
        width: 35px;
/*            margin-right: 6px;*/
    }
    .overall-review-ratings meter {
        width: 85%;
        border-radius: 6px;
    }

    .review-averages {
        display: grid;
        grid-template-columns: 48px 1fr 48px;
/*        grid-auto-rows: 2em;*/
        align-items: center;
/*            margin-top: 2em;*/
/*        width: 80%;*/
/*        margin: 2em auto;            */
        column-gap: 4px;
    }


    /************************************************************************
                                CALENDAR
    *************************************************************************/

    /************************************************************************
                                LINKS
    *************************************************************************/
    #links {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        align-items: center;
        column-gap: 1em;
        row-gap: 1em;
        white-space: nowrap;
        margin-top: .5em;
    }
    /************************************************************
                amenities
    *************************************************************/
    #amenities {
        max-width: 95%;
        margin: .5rem auto 0;
    }
    #amenities .accordion-control {
        background-color: var(--background-highlighted);
    /*    font-size: 1rem;*/
    /*    display: block;*/
        margin: 3px auto;
        padding: .5rem;
        width: 95%; /* prevents horizontal scroll bar from showing up */
        max-width: 400px;
        border: thin solid;
        border-radius: 4px;
        text-align: left;
/*        font-size: clamp(.6rem, 1.5vw, 1rem);*/
        font-size: 1em;
    }
    .accordion-control:hover {
        background-color: var(--background-hover) ;
        cursor: ns-resize;
    }
    .accordion-panel {
        display: none;
        font-size: smaller;
    }
    #amenities .acordion-panel li {
        width: 98%;
        margin-right: 6px;
    }

    /************************************************************
                        AVAILABILITY
    *************************************************************/
    #availability-wrapper {
        order: 1;
    }
    #description, #amenities, #map-container {
        order: 2;
    }

    #availability {
        /*max-width: 320px;*/
        border-radius: 8px;
        box-shadow: 0 0 8px 0px rgba(150, 150, 150, 1.0);
        border-left: thin groove lightgray;
        border-right: thin groove lightgray;
        width: 100vw;
        max-width: 400px;
        margin: 0 auto;
        height: min-content;
        box-sizing: border-box;
    /*    border-radius: 8px;*/
        border-top: thin groove lightgray;
        border-bottom: thin groove lightgray;
        background-color: #fff;
        padding: 6px;
/*        padding-bottom: 12px;*/
        color: rgb(85, 26,139);
        font-size: .85rem;
    /*    line-height: 1.5rem;*/
    }
    .availability-header {
    /*    font-size: 1.2rem;*/
        font-weight: bold;
        padding-left: .25em;
        margin-top: .5rem;
        margin-bottom: 0;

        display: grid;
        grid-template-columns: 1fr 65px;
    }
    #availability-banner {
        text-indent: 12px;
        font-size: smaller;
        margin-top: .25em;
        margin-bottom: .25em;
    }
    .totals {
        display: grid;
        grid-template-columns: 60% 40%;
        line-height: 1.25rem;
    }
    .subtext {
        font-size: x-small;
/*        text-align: right;*/
        grid-column: 1 / -1;
        line-height: 1.25em;
    }
    .is-discounted {
        text-decoration-line: line-through;
        color: #6C757D;
        margin-right: .5rem;
    }
    #nights-menu {
        width: 80px;
        font-size: 1em;
    }
    #bottom-banner, #change-banner {
        margin-top: 1.5em;
/*        margin-bottom: 1em;*/
        display: flex;
        flex-direction: column;    
    }
    #bottom-banner button, #payment-buttons button, #change-banner button {
        width: 80%;
        margin: 0 auto 1em;
    }
    #payment-method p {
        border: thin solid gray;
        margin: 6px;
        padding: 6px;
        font-size: small;
        background-color: var(--list-background-color);
        border-radius: 8px;
    }

    #date-block {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        column-gap: 6px;
        margin: .5em .5em;
        font-size: smaller;
    }
    #date-block > div {
    /*    width: 99vw;*/
        width: 40%;
        max-width: 120px;
        padding: .25em .5em;
        border: thin solid gray;
        border-radius: 6px;
    }
    .calendar-opener > input {
        text-align: center;
        margin-bottom: 2px;
        width: 100%;
    }
    .calendar-opener > span{
        text-transform: lowercase;
        font-variant-caps: small-caps;
        font-weight: 600;
        margin-bottom: 4px;
    }
    #guests {
        font-size: 1em;
        max-width: 65px;
    }
    #payment-buttons{
        text-align: center;
    }
    #payment-plan {
        border-top: thin solid lightgray;
        border-bottom: thin solid lightgray;
        margin-top: .5em;
        margin-bottom: .5em;
        padding: 6px;
    }
    #payment-select {
        display: flex;
        flex-flow: column nowrap;
        row-gap: .5em;
    }
    #payment-select h4 {
        margin-top: .5em;
        margin-bottom: 0;
    }
    #payment-select .pay-amount {
        padding-left: 1em;
    }
    /************************************************************
                weather
    *************************************************************/

    .weather{
    /*    grid-column: 3;*/
        max-width: 320px;
    /*    min-width: 100%;*/
    /*    height: min-content;*/
    /*    border: thin solid;*/
        border-radius: 8px;
        background-image: url("../images/Tropical Sky-thumb3.jpg");
    /*    background-repeat: no-repeat;*/
        background-repeat: round;
    /*    text-align: center;*/
    /*    margin: .5rem auto;*/
        color: rgba(63, 63, 63, 1.00);
        padding: .5rem;
        display: none;
        flex-direction: column;
        margin: 1rem auto;
    }
    .weather h4 {
        font-size: 1.5rem;
    /*    letter-spacing: .1em;*/
        margin-bottom: 0;
        text-align: center;
    /*    padding-top: 1em;*/
    }
    .wx-main-temp {
        font-size: 3rem;
        color: rgba(63, 63, 63, 1.00);
    /*    margin-top: 2rem;*/
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .wx-main-temp select {
        font-size: .5em;
        width: 76px;
    /*    margin-top: .5em;*/
        display: inline;
    /*    margin-left: .75em;*/
        transform: translateY(-.55em);
    /*    color: rgba(63, 63, 63, 1.00);*/
    /*    margin-top: 2rem;*/
        margin-left: 6px;
    /*    margin-bottom: 0 auto;*/
    /*    text-align: center;*/
    }
    .weather img {
        margin-top: -1.8rem;
        margin-bottom: -1rem;
        border-radius: 8px;
    }
    .wx-description {
        font-size: small;
    /*    margin-top: 1.25em;*/
    /*    line-height: 0rem;*/
        text-transform: capitalize;    
    /*    transform: translateY(-1em);*/

    }
    .wx-hilo {
        display: flex;
        justify-content: space-between;
        margin-top: 1em;
        padding: 6px;
    /*    padding-left: 15px;*/
    /*    padding-right: 15px;*/
        font-weight: bold;
        margin-bottom: 1em;
    }
    .wx-time {
        font-size: small;
        margin-top: 0;
        margin-bottom: 0;
    }
    .wx-promise {
        font-size: small;
    /*    margin-bottom: 0;*/
    /*    margin-top: 22px;*/
        margin: 1rem auto 1rem;
    }
    .wx-sunrise {
        text-align: left;
        line-height: 1rem;
        margin-bottom: 0;
        margin-top: 0rem;
        margin-left: 5px;
    }
    .wx-sunset {
        margin-bottom: 0;
        margin-right: 5px;
        text-align: right;
        line-height: 1.7;
        margin-top: -1.2rem;
    }
    /************************************************************
                #map-container
    *************************************************************/
    #map-container {
        border-radius: 6px;
    /*    display: flex;*/
        flex-flow: column nowrap;
        text-align: center;
    }
    .map, #google-map {
        max-width: 90vw;
        width: 320px;
        height: 236px;
        border-radius: 6px;
        border: thin solid lightgray;
        margin: .5rem auto;
    }
    .map-directions {
        margin: 0 auto;
    }

    /*// default layout is for phones and switches to wide screen here */
    /*@media (min-width: 450px) {*/
    @media (min-width: 620px) {
        #villa-title > div {
            width: 50%;
        }
        #availability-wrapper {
            order: 0;
        }
        #description, #amenities {
            order: 0;
        }
        #map-container {
            display: flex;
        }
        #map-container {
/*            max-width: 300px;*/
        }

        .weather {
            display: flex;
        }
        /************************************************************
                    property photos
        *************************************************************/
        #photo-viewer {
            display: none;
        }
        #property-photos {
            height: 40vw;
            max-height: 380px;
            margin: 16px 6px 0;
        }
        #photo-static {
            height: 100%;
            column-gap: 8px;
            display: flex;
    /*        border: thin dotted red;*/
        }
        #main-picture {
            width: 50%;
            position: relative;
        }
        #photo-static img {
            max-width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }
        .property-photo-grid2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(2, 1fr);
            gap: 8px;
            width: 50%;
            position: relative;
        }
        .property-photo-grid2 > picture {
            overflow: hidden;
            position: relative;
        }

        #more-pictures {
            position: absolute;
            bottom: -2.75em;
            right: 4px;
        }
        /*************************************************************** 
            this is for positioning the detail elements on large 
            screens - does nothing on small screeens 
        ***************************************************************/
        #property-details {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            grid-column-gap: 8px;
        }
        #description {
            grid-column: 1;
            grid-row: 1 / -1;
        }
        #amenities {
            grid-column: 2;
            grid-row: 1 / -1;
            min-width: 140px;
            width: 100%;
        }
        #amenities > hr {
            display: none;
        }

        #amenities > h3 {
            margin-top: -.5em;
            margin-bottom: 0;;
        }

        #description > h3 {
            margin-top: 0em;
            margin-bottom: 0;;
        }
        #description > h3 > p {
            margin-top: -2px;
            margin-bottom: 0;;
        }
        #section-wrapper {
            grid-column: 3;
            grid-row: 1 / -1;
        }
        /************************************************************
                    REVIEWS
        *************************************************************/
        #reviews-dialog {
            width: fit-content;
            overflow: clip;
        }

        #reviews-wrapper {
            display: grid;
            grid-template-columns: minmax(300px, 1fr) 330px;
/*            margin-top: 2em;*/
        }
        #reviews-wrapper > div:first-child {
            display: block;
            grid-template-columns: 1fr 1fr;
        }
        #review-wrapper > div {
/*            display: block;*/
        }
        #reviews-wrapper h4 {
            margin-bottom: .5em;
            font-size: 24px;
            margin-top: .85em;
        }
        #review-list {
            overflow: auto;
            max-height: 70vh;
            min-height: 330px;
            height: 530px;        
        }
        #review-overall {
            font-size: 24px; 
            font-weight: bold;
            padding-left:6px;
        }
        .overall-review-ratings{
            /*display: grid;*/
            grid-template-columns: 35px 1fr;
            row-gap: .25em;
            
            display: flex;
            flex-flow: column nowrap;
        }
        .overall-review-ratings > div{
            display: flex;
            width: 90%;
            justify-content: space-between;
        }
        .overall-review-ratings span {
            text-align: center;
            width: 35px;
/*            margin-right: 6px;*/
        }
        .overall-review-ratings meter {
            width: 85%;
            border-radius: 6px;
        }
        
        .review-averages {
            display: grid;
            grid-template-columns: 48px 1fr 48px;
            grid-auto-rows: 2em;
            align-items: center;
/*            margin-top: 2em;*/
            width: 80%;
            margin: 2em auto;            
        }

        /************************************************************
                            AVAILABILITY
        *************************************************************/
        #availability {
            max-width: 320px;
        }

        #weather {
            width: 96%;
            border: thin solid gray;
            border-radius: 6px;
        }

        .condense1,  #more-pictures {
            display: unset;
        }
        #map {
            width: 96%;
        }
        #confirmation {
            width: 96%;
            margin-left: auto;
            margin-right: auto;
        }
        #wx-main-temp select {
            font-size: 3rem;
            width: 70px;
            margin-left: .25em;
            transform: translateY(-.25em);
        }
        .wx-promise {
            margin: 0 auto .5em;
        }
        .wx-hilo {
            margin: 0;
        }
        
    }
}