body.media-page{
background:#0f2c38;
color:white;
}


/* HERO */

.media-hero{
margin-top:80px;
height:40vh;
background:linear-gradient(rgba(19,47,61,.85),rgba(19,47,61,.85)),
url('https://images.unsplash.com/photo-1503387762-592deb58ef4e') center/cover no-repeat;

display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.hero-overlay h1{
font-size:46px;
color:var(--gold);
}

.hero-overlay p{
margin-top:5px;
max-width:650px;
margin:auto;
opacity:.9;
}


/* HERO OVERLAY LAYOUT */
.hero-overlay{
max-width:900px;
margin:auto;
padding-top:30px;
}

.breadcrumb{
margin-bottom:10px;
font-size:14px;
letter-spacing:.5px;
}

.breadcrumb a{
color:var(--gold);
text-decoration:none;
}

.breadcrumb span{
margin:0 6px;
color:rgba(255,255,255,.6);
}

.breadcrumb .current{
color:white;
}


/* FILTER */

.media-filter{
padding:40px 0 0px;
text-align:center;
}

.filter-btn{
background:transparent;
border:1px solid rgba(255,255,255,0.2);
color:white;
padding:10px 25px;
border-radius:30px;
margin:0 10px;
cursor:pointer;
transition:.3s;
}

.filter-btn.active{
background:var(--gold);
color:#132F3D;
}


/* GALLERY */

.media-gallery{
padding:40px 0 100px;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.gallery-item{
margin-bottom:30px;
position:relative;
overflow:hidden;
border-radius:12px;
cursor:pointer;
background:#132F3D;
}


/* MEDIA */
.gallery-item img,
.gallery-item video{
width:100%;
height:auto;
display:block;
border-radius:12px;
transition:.5s;
object-fit:cover;
}

.gallery-item video{
aspect-ratio:16/9;
height:auto;
}

.gallery-item video{
max-height:260px;
}

.gallery-item img{
max-height:260px;
}

.gallery-item:hover img{
transform:scale(1.08);
}


/* ================= HOVER OVERLAY ================= */

.gallery-item::after{

position:absolute;
inset:0;

display:flex;
align-items:center;
justify-content:center;

font-size:18px;
color:var(--gold);
letter-spacing:1px;

background:linear-gradient(
to top,
rgba(10,30,39,.85),
rgba(10,30,39,.35)
);

opacity:0;
transition:.35s ease;

pointer-events:none;

}

/* IMAGE LABEL */

.gallery-item.image::after{
content:"View Image";
}

.gallery-item:hover::after{
opacity:1;
}


/* ================= VIDEO PLAY ICON ================= */

.gallery-item.video::before{

content:"\f04b";

font-family:"Font Awesome 6 Free";
font-weight:900;

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:65px;
height:65px;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,.55);

border-radius:50%;

color:var(--gold);
font-size:24px;

z-index:2;

transition:.3s;

}

.gallery-item.video:hover::before{
transform:translate(-50%,-50%) scale(1.1);
}


/* ================= LIGHTBOX ================= */

.lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,0.92);

display:flex;
align-items:center;
justify-content:center;

z-index:9999;

opacity:0;
visibility:hidden;

transition:opacity .35s ease;
}

.lightbox.active{
opacity:1;
visibility:visible;
}

.lightbox img,
.lightbox video,
.lightbox iframe{
max-width:92%;
max-height:80vh;
width:auto;
height:auto;
border-radius:8px;
object-fit:contain;
box-shadow:0 25px 80px rgba(0,0,0,.7);
animation:mediaZoom .35s ease;
}

@media(max-width:768px){
.lightbox img,
.lightbox video,
.lightbox iframe{
max-width:95vw;
max-height:75vh;
}

.close-lightbox{
top:15px;
right:20px;
font-size:28px;
}
}

/* CLOSE BUTTON */
.close-lightbox{
position:absolute;
top:25px;
right:35px;
font-size:34px;
color:white;
cursor:pointer;
transition:.3s;
}

.close-lightbox:hover{
color:var(--gold);
}


/* LIGHTBOX ANIMATION */

@keyframes mediaZoom{

from{
transform:scale(.9);
opacity:.6;
}

to{
transform:scale(1);
opacity:1;
}

}


/* RESPONSIVE */

@media(max-width:1000px){
.gallery-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:768px){

.hero-overlay h1{
font-size:32px;
margin-bottom:10px;
}

.gallery-item img,
.gallery-item video{
max-height:220px;
}

}

@media(max-width:600px){
.gallery-grid{
grid-template-columns:1fr;
}
}


.gallery-pagination{
text-align:center;
margin-top:50px;
}

.gallery-pagination button{

background:transparent;
border:1px solid rgba(255,255,255,.2);

color:white;

padding:8px 15px;
margin:0 5px;

border-radius:6px;

cursor:pointer;
transition:.3s;

}

.gallery-pagination button.active{
background:var(--gold);
color:#132F3D;
}


/* PHOTO SLIDER */

.photo-slider{
width:min(1100px, calc(100% - 48px));
max-width:1100px;
margin:60px auto;
position:relative;
}

.photo-slider-wrapper{
position:relative;
width:100%;
height:420px;
overflow:hidden;
border-radius:12px;
box-shadow:0 30px 80px rgba(0,0,0,.4);
}

.photo-slide{
position:absolute;
inset:0;
width:100%;
height:100%;
opacity:1;
transition:opacity .7s ease;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}

.photo-slide:not(.active){
opacity:0;
}

.photo-slide img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.photo-caption{
position:absolute;
left:0;
right:0;
bottom:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:42px clamp(18px, 3vw, 30px) 20px;
background:linear-gradient(transparent, rgba(8,26,34,.86));
color:#fff;
}

.photo-caption p{
margin:0;
font-size:clamp(17px, 2vw, 21px);
font-weight:600;
}

.photo-caption span{
font-size:12px;
font-weight:700;
text-transform:uppercase;
color:#e1c885;
}

.photo-dots{
display:flex;
justify-content:center;
gap:9px;
margin-top:18px;
}

.photo-dot{
width:10px;
height:10px;
padding:0;
border:1px solid rgba(225,200,133,.7);
border-radius:50%;
background:transparent;
cursor:pointer;
transition:background .2s ease, transform .2s ease;
}

.photo-dot.active{
background:var(--gold);
transform:scale(1.15);
}

/* arrows */

.photo-prev,
.photo-next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(10,30,39,.85);
border:none;
width:42px;
height:42px;
border-radius:50%;
color:var(--gold);
cursor:pointer;
font-size:16px;
}

.photo-prev{ left:15px; }
.photo-next{ right:15px; }

.photo-prev:hover,
.photo-next:hover{
background:var(--gold);
color:#132F3D;
}

/* responsive */

@media(max-width:768px){

.photo-slider{
width:calc(100% - 32px);
margin:36px auto;
}

.photo-slider-wrapper{
height:260px;
}

.photo-caption{
padding:36px 15px 14px;
}

.photo-caption p{
font-size:16px;
}

}

.gallery-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255,255,255,0.7);
    padding: 42px 0;
}

/* ===== FULL WIDTH FEATURED CAROUSEL ===== */
.media-page .photo-slider {
    display: block !important;
    width: min(1120px, calc(100% - 48px)) !important;
    max-width: 1120px !important;
    min-width: 0 !important;
    margin: clamp(34px, 5vw, 52px) auto !important;
}

.media-page .photo-slider-wrapper {
    display: block !important;
    width: 100% !important;
    height: clamp(300px, 34vw, 438px) !important;
    min-height: 300px !important;
}

.media-page .photo-slide {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 768px) {
    .media-page .photo-slider {
        width: calc(100% - 28px) !important;
    }

    .media-page .photo-slider-wrapper {
        height: clamp(220px, 63vw, 290px) !important;
        min-height: 220px !important;
    }
}

/* ===== Gallery media fallback polish - 20260723 ===== */
.photo-slide,
.gallery-item {
    background: linear-gradient(135deg, rgba(225, 200, 133, .08), rgba(255, 255, 255, .03)), #0b2631;
}

.gallery-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.photo-slide img[src=""],
.gallery-item img[src=""] {
    display: none;
}
