@import url("variables.css");

@import url("base.css");

@import url("typography.css");

@import url("layout.css");

@import url("navigation.css");

@import url("hero.css");

@import url("buttons.css");

@import url("cards.css");

@import url("sections.css");

@import url("footer.css");

@import url("animations.css");

@import url("stay-modal.css");

@import url("responsive.css");

/* ==========================================================
   Homepage Luxury Gallery
========================================================== */

.gallery-video{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:transform .8s ease;

}

.video-card:hover .gallery-video{

transform:scale(1.05);

}

.gallery-overlay{

display:flex;

flex-direction:column;

justify-content:flex-end;

}

.gallery-tag{

display:inline-block;

width:max-content;

padding:6px 14px;

margin-bottom:12px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(10px);

border-radius:30px;

font-size:.8rem;

color:#fff;

letter-spacing:1px;

text-transform:uppercase;

}

.gallery-link{

margin-top:10px;

color:#fff;

font-size:.9rem;

font-weight:600;

opacity:.9;

transition:.3s;

}

.gallery-item:hover .gallery-link{

transform:translateX(6px);

}


.gallery-item{

    transition:
    opacity .35s ease,
    transform .35s ease;

}

.gallery-item.hover{

    box-shadow:
    0 18px 45px rgba(0,0,0,.22);

}

.gallery-section{

    padding:120px 0;

    background:#faf8f3;

}

.gallery-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin:50px 0;

}

.gallery-filter button{

    background:transparent;

    border:none;

    padding:12px 24px;

    font-weight:600;

    font-size:15px;

    border-radius:10px;

    cursor:pointer;

    transition:.35s;

    color:#1d3d2f;

}

.gallery-filter button.active{

    background:#1d3d2f;

    color:#fff;

}

.gallery-filter button:hover{

    background:#c89b3c;

    color:#fff;

}

/* =============================
Gallery Layout
============================= */

.gallery-collage{

    display:grid;

    grid-template-columns:2fr 1.15fr;

    grid-template-rows:220px 220px 230px 230px;

    gap:18px;

}

/* =============================
Gallery Items
============================= */

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    display:block;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/* =============================
Overlay
============================= */

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:24px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.70),
        rgba(0,0,0,.08),
        rgba(0,0,0,0)
    );

}

.gallery-overlay h3{

    color:#fff;

    font-size:1.4rem;

    font-family:"Cormorant Garamond", serif;

    font-weight:700;

    margin:0;

}

/* =============================
Grid Positioning
============================= */

.gallery-item.large{

    grid-column:1;

    grid-row:1 / span 2;

}

.gallery-item:nth-child(2){

    grid-column:2;

    grid-row:1;

}

.gallery-item:nth-child(3){

    grid-column:2;

    grid-row:2;

}

.gallery-item:nth-child(4){

    grid-column:1;

    grid-row:3;

}

.gallery-item.wide{

    grid-column:2;

    grid-row:3;

}

.gallery-item.full{

    grid-column:1 / span 2;

    grid-row:4;

}

/* =============================
Footer
============================= */

.gallery-footer{

    margin-top:60px;

    text-align:center;

}

/* =============================
Responsive
============================= */

@media (max-width:991px){

.gallery-collage{

grid-template-columns:1fr;

grid-template-rows:auto;

}

/* .gallery-item,

.gallery-item.large,

.gallery-item.wide,

.gallery-item.full{

grid-column:auto;

grid-row:auto;

height:320px;

} */

}

@media (max-width:768px){

.gallery-filter{

display:none;
}

.gallery-filter button{

padding:10px 18px;

font-size:14px;

}

.gallery-overlay h3{

font-size:1.2rem;

}

.gallery-collage{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}

.gallery-item.large
{	
	grid-column:1 / -1;
	height:320px;
	width:100%;
}

/* Pool */
.gallery-item:nth-child(2){
	grid-row:3;
	grid-column:1;
	height:170px;
}

/* Campfire */
.gallery-item:nth-child(3){
	grid-row:4;
	grid-column:1;
	height:170px;
}

/* Cottage */
.gallery-item:nth-child(4){
	grid-row:5;
	grid-column:1;
	height:170px;
}

/* Rafting */
.gallery-item.wide{	
	grid-row:3 / span 3;
	grid-column:2;
	height:540px;
}

/* Wildlife */
.gallery-item.full{	
	grid-row:auto;
	height:320px;
}

.scroll-indicator{

    bottom:18px;

}

.scroll-text{

    font-size:10px;

    letter-spacing:3px;

}

.scroll-mouse{

    width:24px;

    height:40px;

}

}