/* =========================
GALLERY PAGE
========================= */

/* GALLERY HERO */

.gallery-hero {

/* */
min-height: 75vh;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

padding: 120px 20px 70px;

background:
    linear-gradient(
        rgba(31, 26, 23, 0.7),
        rgba(31, 26, 23, 0.9)
    ),
    url("images/gallery-hero.jpg");

background-size: cover;

background-position: center;

color: white;
/* */

}

.gallery-hero-content {

/* */
max-width: 800px;
/* */

}

.gallery-hero h1 {

/* */
font-size:
    clamp(3rem, 7vw, 6rem);

line-height: 1.05;

color: white;

margin: 20px 0;
/* */

}

.gallery-hero p {

/* */
color: #e7e0da;

max-width: 650px;

margin: auto;

font-size: 1.1rem;
/* */

}

/* INTRO */

.gallery-intro {

/* */
padding: 110px 20px;

text-align: center;

background: var(--cream);
/* */

}

.gallery-intro .container {

/* */
max-width: 850px;
/* */

}

.gallery-intro h2 {

/* */
font-size:
    clamp(2.5rem, 6vw, 4.5rem);

color: var(--dark);

margin-bottom: 25px;
/* */

}

.gallery-intro p:last-child {

/* */
font-size: 1.05rem;

color: #665f59;
/* */

}

/* MEDIA SECTION */

.media-section {

/* */
padding: 110px 0;

background: white;
/* */

}

/* FILTERS */

.gallery-filters {

/* */
display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 10px;

margin-bottom: 50px;
/* */

}

.gallery-filter {

/* */
padding:
    10px 20px;

border:
    1px solid #ddd;

background: transparent;

font-family: inherit;

cursor: pointer;

transition: 0.3s;
/* */

}

.gallery-filter:hover,
.gallery-filter.active {

/* */
background: var(--primary);

color: white;

border-color:
    var(--primary);
/* */

}

/* GALLERY GRID */

.gallery-grid-large {

/* */
display: grid;

grid-template-columns:
    repeat(3, 1fr);

grid-auto-rows: 280px;

gap: 15px;
/* */

}

.gallery-item {

/* */
position: relative;

overflow: hidden;

cursor: pointer;

background: var(--dark);
/* */

}

.gallery-item.large {

/* */
grid-row:
    span 2;
/* */

}

.gallery-photo {

/* */
width: 100%;

height: 100%;

object-fit: cover;

transition:
    transform 0.5s ease;
/* */

}

.gallery-item:hover
.gallery-photo {

/* */
transform: scale(1.06);
/* */

}

/* CAPTION */

.gallery-caption {

/* */
position: absolute;

left: 0;

right: 0;

bottom: 0;

padding: 60px 25px 25px;

background:
    linear-gradient(
        transparent,
        rgba(0,0,0,0.85)
    );

color: white;

transform:
    translateY(15px);

opacity: 0;

transition: 0.3s;
/* */

}

.gallery-item:hover
.gallery-caption {

/* */
opacity: 1;

transform:
    translateY(0);
/* */

}

.gallery-caption span {

/* */
color: var(--gold);

font-size:
    0.7rem;

letter-spacing: 2px;

font-weight: 600;
/* */

}

.gallery-caption h3 {

/* */
font-size:
    1.5rem;

margin-top: 5px;
/* */

}

/* =========================
VIDEO SECTION
========================= */

.video-section {

/* */
padding: 110px 0;

background: var(--cream);
/* */

}

.video-grid {

/* */
display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 30px;
/* */

}

.video-card {

/* */
background: white;

box-shadow:
    0 15px 40px
    rgba(0,0,0,0.07);
/* */

}

.video-wrapper {

/* */
position: relative;

width: 100%;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;
/* */

}

.video-wrapper iframe {

/* */
position: absolute;

top: 0;
left: 0;

width: 100%;
height: 100%;

border: 0;
/* */

}

.video-info {

/* */
padding: 25px;
/* */

}

.video-info span {

/* */
color: var(--gold);

font-size:
    0.7rem;

letter-spacing: 2px;

font-weight: 600;
/* */

}

.video-info h3 {

/* */
color: var(--dark);

font-size:
    1.6rem;

margin: 8px 0;
/* */

}

.video-info p {

/* */
color: #777;

font-size:
    0.9rem;
/* */

}

/* MEDIA NOTE */

.media-note {

/* */
padding: 60px 0;

background: white;
/* */

}

.media-note-content {

/* */
max-width: 850px;

margin: auto;

padding: 30px;

display: flex;

align-items: center;

gap: 25px;

background: var(--dark);

color: white;
/* */

}

.note-icon {

/* */
min-width: 55px;

height: 55px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

background: var(--primary);

color: white;
/* */

}

.media-note h3 {

/* */
font-size:
    1.5rem;

margin-bottom: 5px;
/* */

}

.media-note p {

/* */
color: #bbb;

font-size:
    0.9rem;
/* */

}

/* CTA */

.gallery-cta {

/* */
padding: 120px 20px;

text-align: center;

background:
    linear-gradient(
        rgba(123, 30, 30, 0.94),
        rgba(75, 12, 12, 0.97)
    );
/* */

}

.gallery-cta h2 {

/* */
color: white;

font-size:
    clamp(2.5rem, 6vw, 4.5rem);

margin-bottom: 30px;
/* */

}

.gallery-cta .section-tag {

/* */
color: #e8c27c;
/* */

}

/* =========================
LIGHTBOX
========================= */

.lightbox {

/* */
position: fixed;

inset: 0;

background:
    rgba(0,0,0,0.92);

display: none;

align-items: center;

justify-content: center;

padding: 40px;

z-index: 2000;
/* */

}

.lightbox.active {

/* */
display: flex;
/* */

}

.lightbox img {

/* */
max-width: 90vw;

max-height: 85vh;

object-fit: contain;
/* */

}

.lightbox-close {

/* */
position: absolute;

top: 20px;

right: 30px;

background: none;

border: none;

color: white;

font-size: 3rem;

cursor: pointer;
/* */

}

/* =========================
MOBILE
========================= */

@media (max-width: 800px) {

/* */
.gallery-grid-large {

    grid-template-columns:
        repeat(2, 1fr);

    grid-auto-rows: 230px;
}

.video-grid {

    grid-template-columns: 1fr;
}
/* */

}

@media (max-width: 550px) {

/* */
.gallery-grid-large {

    grid-template-columns: 1fr;

    grid-auto-rows: 300px;
}

.gallery-item.large {

    grid-row:
        span 1;
}

.gallery-caption {

    opacity: 1;

    transform:
        translateY(0);
}

.media-note-content {

    align-items: flex-start;
}

}