/* =========================================================
   media.css — Property Photography & Videography
   ========================================================= */

.page-media{
    --accent:#FF6B6B;
    --glow:rgba(222,170,76,.12);
}

.page-media .glass-card::before{
    width:220px;
    height:220px;
    opacity:.08;
}

/* ---------- Photo grid ---------- */

.photo-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    width:75%;
    margin:20px auto 0;
}

.photo-item{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    border:0;
    overflow:hidden;
    cursor:zoom-in;
    background:#1b1b1b;
    aspect-ratio:1 / 1;
    transition:transform .35s ease, background .3s ease;
    animation:cardFade .6s ease both;
}

.photo-item:nth-child(2){ animation-duration:.75s; }
.photo-item:nth-child(3){ animation-duration:.9s; }

.photo-item:hover{
    transform:translateY(-5px);
}

.gallery-image{
    width:100%;
    height:100%;
    object-fit:cover;
    background:#1b1b1b;
    transition:transform .45s ease;
    user-select:none;
    -webkit-user-drag:none;
}

.photo-item:hover .gallery-image{
    transform:scale(1.08);
}

.all-media{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-family:inherit;
}

.all-media:hover{
    background:var(--accent);
}

.all-media span{
    font-size:1rem;
    font-weight:600;
    transition:color .3s ease;
}

.all-media:hover span{
    color:#111;
}

@keyframes cardFade{
    from{ opacity:0; transform:translateY(30px); }
    to{ opacity:1; transform:translateY(0); }
}

/* ---------- Featured photographer ---------- */

.featured-photographer{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    max-width:920px;
    margin:35px auto 18px;
    padding:0 18px;
}

.featured-photographer span{
    color:#ddd;
    font-size:.85rem;
}

.photographer-btn{
    padding:0;
    border:0;
    background:none;
    border-radius:50%;
    cursor:pointer;
}

.photographer-btn img{
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.2);
    transition:transform .3s ease, border-color .3s ease;
}

.photographer-btn:hover img{
    transform:scale(1.08);
    border-color:var(--accent);
}

.photographer-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:9999;
}

.photographer-popup.active{
    opacity:1;
    visibility:visible;
}

.popup-card{
    position:relative;
    width:300px;
    max-width:calc(100vw - 30px);
    padding:30px 28px;
    background:rgba(25,25,25,.88);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06);
}

.photographer-popup.active .popup-card{
    animation:popupShow .35s ease;
}

.popup-close{
    position:absolute;
    top:8px;
    right:10px;
    width:34px;
    height:34px;
    border:0;
    background:none;
    color:#fff;
    font-size:26px;
    line-height:1;
    cursor:pointer;
    transition:color .25s ease;
}

.popup-close:hover{
    color:var(--accent);
}

.popup-avatar{
    width:95px;
    height:95px;
    margin:0 auto 18px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid var(--accent);
    box-shadow:0 10px 30px rgba(255,107,107,.35);
}

.popup-card h2{
    font-size:1.3rem;
    font-weight:600;
    color:#fff;
    margin-bottom:22px;
}

.popup-contacts{
    display:flex;
    justify-content:center;
    gap:20px;
}

.popup-contacts a{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    transition:background .3s ease, transform .3s ease;
}

.popup-contacts img{
    width:28px;
    height:28px;
}

.popup-contacts a:hover{
    background:var(--accent);
    transform:translateY(-4px) scale(1.08);
}

@keyframes popupShow{
    from{ opacity:0; transform:translateY(18px) scale(.92); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

@media (max-width:768px){

    .project-header{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .project-header h2{
        font-size:1.2rem;
    }

    .photo-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .all-media span{
        font-size:.92rem;
    }
}

@media (max-width:520px){

    .photo-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .hero-content h1{
        font-size:1.35rem;
    }
}