/*-- -------------------------- -->
<---     Venue Hero             -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em){
    #venue-hero{
        padding: clamp(2rem, 5vw, 3.5rem) 1rem clamp(2rem, 5vw, 3rem);
        background-color: var(--blush);
    }
    #venue-hero.venue-hero-featured{
        background-color: var(--featured);
    }
    #venue-hero.has-gallery{
        padding-bottom: 0;
        background: linear-gradient(180deg, var(--blush) 0%, var(--blush) 55%, var(--white) 55%);
    }
    #venue-hero.venue-hero-featured.has-gallery{
        background: linear-gradient(180deg, var(--featured) 0%, var(--featured) 55%, var(--white) 55%);
    }
    .venue-hero-container{
        max-width: 80rem;
        margin: auto;
    }
    .venue-heading{
        margin: 1.25rem 0 1.75rem;
    }
    .venue-tags{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 1rem;
    }
    .venue-location{
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.75rem;
        color: var(--muted);
        font-size: 1.05rem;
    }
    .venue-location svg{
        flex: none;
        width: 1.2rem;
        height: 1.2rem;
        fill: none;
        stroke: var(--berry);
        stroke-width: 1.8;
    }
    .top-choice-note{
        margin-top: 1rem;
        color: var(--plum);
        font-weight: 600;
    }
}

/*-- -------------------------- -->
<---     Gallery                -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em){
    .venue-gallery{
        position: relative;
        overflow: hidden;
        border-radius: var(--radius);
        background-color: var(--plum);
        box-shadow: var(--shadow);
    }
    .gallery-track{
        position: relative;
        aspect-ratio: 3 / 2;
    }
    .gallery-slide{
        position: absolute;
        inset: 0;
        margin: 0;
        opacity: 0;
        transition: opacity 0.45s ease;
    }
    .gallery-slide.is-active{
        opacity: 1;
    }
    .gallery-slide img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .gallery-arrow{
        position: absolute;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.92);
        cursor: pointer;
        transform: translateY(-50%);
        box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.5);
        transition: background-color 0.2s;
    }
    .gallery-arrow:hover{
        background-color: var(--white);
    }
    .gallery-arrow img{
        width: 1.1rem;
        height: 1.1rem;
    }
    .gallery-prev{
        left: 0.85rem;
    }
    .gallery-next{
        right: 0.85rem;
    }
    .gallery-count{
        position: absolute;
        right: 0.85rem;
        bottom: 0.85rem;
        padding: 0.25rem 0.75rem;
        border-radius: 999px;
        background-color: rgba(37, 14, 30, 0.7);
        color: var(--white);
        font-size: 0.8rem;
        font-weight: 700;
    }
}
@media only screen and (min-width: 64rem){
    .venue-gallery{
        overflow: visible;
        background: none;
        box-shadow: none;
    }
    .gallery-track{
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: repeat(2, 14rem);
        gap: 0.75rem;
        aspect-ratio: auto;
    }
    .gallery-slide{
        position: relative;
        inset: auto;
        overflow: hidden;
        border-radius: 1rem;
        opacity: 1;
    }
    .gallery-slide:first-child{
        grid-row: span 2;
    }
    .gallery-slide:nth-child(n+6){
        display: none;
    }
    .gallery-size-1 .gallery-track{
        grid-template-columns: minmax(0, 46rem);
        grid-template-rows: 28.75rem;
    }
    .gallery-size-1 .gallery-slide:first-child,
    .gallery-size-2 .gallery-slide:first-child{
        grid-row: auto;
    }
    .gallery-size-2 .gallery-track{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 26rem;
    }
    .gallery-size-3 .gallery-track{
        grid-template-columns: 2fr 1fr;
    }
    .gallery-size-4 .gallery-slide:nth-child(4){
        grid-column: span 2;
    }
    .gallery-arrow,
    .gallery-count{
        display: none;
    }
}

/*-- -------------------------- -->
<---     Quick Facts            -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em){
    .venue-facts{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 1.5rem 0 0;
    }
    .venue-facts div{
        padding: 1rem 1.25rem;
        border: 1px solid var(--line);
        border-radius: 1rem;
        background-color: var(--white);
    }
    .venue-facts dt{
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
    .venue-facts dd{
        margin: 0.2rem 0 0;
        color: var(--berry);
        font-family: var(--bodyFont);
        font-size: clamp(1.3rem, 2.6vw, 1.65rem);
        font-weight: 800;
        line-height: 1.15;
    }
    .venue-facts small{
        color: var(--muted);
        font-family: var(--bodyFont);
        font-size: 0.8rem;
        font-weight: 600;
    }
}
@media only screen and (min-width: 48rem){
    .venue-facts{
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}

/*-- -------------------------- -->
<---     Main Content           -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em){
    #venue-main{
        padding: clamp(2.5rem, 6vw, 4rem) 1rem clamp(3.5rem, 7vw, 5rem);
    }
    .venue-main-container{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        max-width: 80rem;
        margin: auto;
    }
    .venue-content{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        min-width: 0;
    }
    .venue-block h2{
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--line);
        font-size: clamp(1.5rem, 3vw, 1.9rem);
    }
    .venue-about{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
    .venue-about h2{
        margin-bottom: 0.25rem;
    }
    .venue-about p{
        font-size: 1.05rem;
    }
}
@media only screen and (min-width: 64rem){
    .venue-main-container{
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
        gap: 3.5rem;
    }
}

/*-- -------------------------- -->
<---     Packages               -->
<--- -------------------------- -*/
@media only screen and (min-width: 40rem){
    .package-grid:not(.package-count-1){
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media only screen and (min-width: 64rem){
    .package-grid.package-count-3,
    .package-grid.package-count-5{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media only screen and (min-width: 0em){
    .package-grid{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
    .package-card{
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1.5rem;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background-color: var(--cream);
    }
    .package-card::before{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: var(--berry);
        content: "";
    }
    .package-card h3{
        font-size: 1.3rem;
    }
    .package-price{
        color: var(--berry);
        font-size: 1.35rem;
        font-weight: 700;
    }
    .package-price small{
        color: var(--muted);
        font-size: 0.85rem;
        font-weight: 600;
    }
    .package-guests{
        color: var(--muted);
        font-size: 0.9rem;
        font-weight: 600;
    }
    .package-includes{
        display: grid;
        gap: 0.4rem;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px dashed var(--blushDeep);
    }
    .package-includes li{
        position: relative;
        padding-left: 1.25rem;
        font-size: 0.925rem;
    }
    .package-includes li::before{
        position: absolute;
        top: 0.5rem;
        left: 0;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: var(--gold);
        content: "";
    }
}

/*-- -------------------------- -->
<---     Pricing                -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em){
    .price-group + .price-group{
        margin-top: 1.5rem;
    }
    .price-group h3{
        margin-bottom: 0.5rem;
        font-size: 1.15rem;
    }
    .price-list li{
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.8rem 0;
        border-bottom: 1px dashed var(--line);
    }
    .price-name{
        color: var(--ink);
    }
    .price-value{
        flex: none;
        color: var(--plum);
        font-weight: 700;
        text-align: right;
    }
}

/*-- -------------------------- -->
<---     Rooms                  -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em){
    .table-scroll{
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: 1rem;
    }
    .rooms-table{
        width: 100%;
        min-width: 28rem;
        border-collapse: collapse;
    }
    .rooms-table th,
    .rooms-table td{
        padding: 0.85rem 1.1rem;
        border-bottom: 1px solid var(--line);
        text-align: left;
    }
    .rooms-table thead th{
        background-color: var(--blush);
        color: var(--plum);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .rooms-table tbody tr:last-child th,
    .rooms-table tbody tr:last-child td{
        border-bottom: none;
    }
    .rooms-table tbody th{
        color: var(--plum);
    }
}

/*-- -------------------------- -->
<---     Amenities & Policies   -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em){
    .amenity-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
        gap: 0.75rem;
    }
    .amenity-grid li{
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.75rem 1rem;
        border-radius: 0.85rem;
        background-color: var(--cream);
        font-size: 0.95rem;
        font-weight: 600;
    }
    .amenity-grid svg{
        flex: none;
        width: 1.25rem;
        height: 1.25rem;
        padding: 0.15rem;
        border-radius: 50%;
        background-color: var(--berry);
        fill: none;
        stroke: var(--white);
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .policy-list{
        display: grid;
        margin: 0;
    }
    .policy-list div{
        display: grid;
        gap: 0.2rem;
        padding: 0.9rem 0;
        border-bottom: 1px dashed var(--line);
    }
    .policy-list dt{
        color: var(--plum);
        font-weight: 700;
    }
    .policy-list dd{
        margin: 0;
        color: var(--ink);
    }
}
@media only screen and (min-width: 48rem){
    .policy-list div{
        grid-template-columns: 12rem 1fr;
        gap: 1.5rem;
    }
}

/*-- -------------------------- -->
<---     Sidebar                -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em){
    .venue-sidebar{
        display: grid;
        gap: 1.25rem;
    }
    .contact-card{
        display: grid;
        gap: 0.75rem;
        padding: 1.75rem;
        border-radius: var(--radius);
        background-color: var(--plum);
        color: var(--white);
        text-align: center;
    }
    .contact-card h2{
        margin-bottom: 0.5rem;
        color: var(--white);
        font-size: 1.5rem;
    }
    .contact-card .btn{
        width: 100%;
    }
    .contact-card .btn-outline{
        border-color: rgba(255, 255, 255, 0.6);
        color: var(--white);
    }
    .contact-card .btn-outline:hover{
        border-color: var(--white);
        background-color: var(--white);
        color: var(--plum);
    }
    .contact-phone img{
        width: 1.2rem;
        height: 1.2rem;
        filter: brightness(0) invert(1);
    }
    .contact-details{
        display: grid;
        gap: 0.9rem;
        margin-top: 0.75rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        text-align: left;
    }
    .contact-details li{
        display: grid;
        gap: 0.1rem;
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.95rem;
    }
    .contact-label{
        color: var(--goldSoft);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
    .map-card{
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }
    .map-card iframe{
        display: block;
        width: 100%;
        height: 16rem;
        border: 0;
    }
}
@media only screen and (min-width: 64rem){
    .venue-sidebar{
        position: sticky;
        top: calc(var(--headerHeight) + 1.5rem);
    }
}

/*-- -------------------------- -->
<---     Similar Venues         -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em){
    #similar-venues{
        padding: var(--sectionPadding);
        background-color: var(--cream);
    }
    .similar-venues-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 80rem;
        margin: auto;
    }
    .similar-venues-container h2{
        margin-bottom: 1.75rem;
        text-align: center;
    }
    .similar-grid{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        width: 100%;
        margin-bottom: 2rem;
    }
    .similar-card{
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background-color: var(--white);
    }
    .similar-image{
        text-decoration: none;
        display: block;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: linear-gradient(135deg, var(--blushDeep), var(--goldSoft));
    }
    .similar-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
    .similar-card:hover .similar-image img{
        transform: scale(1.05);
    }
    .similar-body{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1.25rem;
    }
    .similar-body h3 a{
        color: var(--plum);
        font-size: 1.25rem;
        text-decoration: none;
    }
    .similar-body h3 a:hover{
        color: var(--berry);
    }
    .similar-body p{
        color: var(--muted);
        font-size: 0.925rem;
    }
}
@media only screen and (min-width: 48rem){
    .similar-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}