/* =========================================================
   BLUSH STUDIO WORK - PUBLIC GALLERY
   FINAL GRID RULES
   Mobile      = 5 photos per row
   Tablet      = 7 photos per row
   PC          = 9 photos per row
   Large PC    = 9 photos per row
   Applies to Home + Category + Offers + Photos/Videos pages
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#0f0d0e;
    color:#f8f3f4;
    font-family:Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

/* =========================
   HEADER
========================= */

.topbar{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    background:rgba(15,13,14,.94);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.brand{
    display:flex;
    gap:9px;
    align-items:center;
}

.brand-mark{
    width:38px;
    height:38px;
    border-radius:13px;
    background:#f3d7dd;
    color:#251b1d;
    display:grid;
    place-items:center;
    font:700 23px Georgia,serif;
}

.brand strong{
    display:block;
    font-size:12px;
    letter-spacing:.17em;
}

.brand small{
    display:block;
    font-size:9px;
    color:#9f9295;
}

.contact-pill{
    font-size:11px;
    font-weight:700;
    padding:10px 13px;
    border-radius:999px;
    background:#f3d7dd;
    color:#251b1d;
}

/* =========================
   CATEGORY NAV
========================= */

.category-strip{
    position:sticky;
    top:63px;
    z-index:25;
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:10px 12px;
    background:rgba(15,13,14,.96);
    scrollbar-width:none;
}

.category-strip::-webkit-scrollbar{
    display:none;
}

.category-strip a{
    flex:0 0 auto;
    white-space:nowrap;
    padding:9px 12px;
    border:1px solid #312a2d;
    border-radius:999px;
    font-size:11px;
    color:#baaeb1;
}

.category-strip a.active{
    background:#f3d7dd;
    color:#251b1d;
}

/* =========================
   HERO
========================= */

.hero{
    min-height:42vh;
    padding:50px 18px 34px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:
        radial-gradient(circle at 75% 20%,rgba(201,145,157,.18),transparent 34%),
        linear-gradient(180deg,#151113 0%,#0f0d0e 100%);
}

.hero h1,
.category-hero h1{
    font:600 clamp(38px,10vw,64px)/.95 Georgia,serif;
    margin:12px 0;
}

.hero p,
.category-hero p{
    color:#a79a9d;
    line-height:1.6;
}

.hero-badge,
.eyebrow{
    font-size:10px;
    letter-spacing:.18em;
    color:#d7aab3;
}

.hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.primary-btn,
.ghost-btn{
    padding:12px 15px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
}

.primary-btn{
    background:#f3d7dd;
    color:#251b1d;
}

.ghost-btn{
    border:1px solid #3b3336;
}

.category-hero{
    padding:34px 16px 18px;
}

/* =========================
   SECTION HEADER
========================= */

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:10px;
    padding:22px 10px 12px;
}

.section-head h2{
    margin:4px 0;
    font:600 26px Georgia,serif;
}

.media-tabs{
    display:flex;
    gap:4px;
    background:#181416;
    padding:4px;
    border-radius:11px;
    flex:0 0 auto;
}

.media-tabs a{
    font-size:10px;
    padding:8px 9px;
    border-radius:8px;
}

.media-tabs a.active{
    background:#f3d7dd;
    color:#251b1d;
}

/* =========================================================
   GALLERY - FORCE GRID ON EVERY PUBLIC PAGE
   ========================================================= */

/* MOBILE = 5 per row */
.masonry,
.gallery-grid,
.media-grid-public{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:4px !important;
    column-count:unset !important;
    columns:unset !important;
    padding:0 4px 24px !important;
    max-width:1800px;
    width:100%;
    margin:0 auto !important;
}

.masonry > .media-card,
.gallery-grid > .media-card,
.media-grid-public > .media-card{
    break-inside:auto !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
}

.media-card{
    position:relative;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    aspect-ratio:4/5;
    border:0;
    padding:0;
    margin:0 !important;
    border-radius:5px;
    overflow:hidden;
    background:#181416;
    color:#fff;
    cursor:pointer;
}

.media-card img,
.media-card .video-thumb{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-width:none !important;
    object-fit:cover !important;
    background:#211b1d;
}

.video-thumb{
    position:relative;
}

.play-badge{
    position:absolute;
    inset:0;
    margin:auto;
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(0,0,0,.66);
    display:grid;
    place-items:center;
    font-size:9px;
}

.card-gradient{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:32%;
    background:linear-gradient(transparent,rgba(0,0,0,.78));
    pointer-events:none;
}

.card-meta{
    position:absolute;
    left:4px;
    right:4px;
    bottom:4px;
    text-align:left;
    z-index:2;
}

.card-meta strong{
    display:block;
    font:600 7px Georgia,serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.card-meta small{
    display:none;
}

/* =========================
   FULLSCREEN VIEWER
========================= */

.viewer{
    position:fixed;
    inset:0;
    background:#050505;
    z-index:100;
    display:grid;
    grid-template-rows:auto 1fr auto;
}

.viewer[hidden]{
    display:none !important;
}

.viewer-top,
.viewer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    z-index:3;
}

.viewer-stage{
    display:grid;
    place-items:center;
    min-height:0;
    overflow:hidden;
    touch-action:pan-y;
}

.viewer-stage img,
.viewer-stage video{
    max-width:100%;
    max-height:100%;
    width:100%;
    height:100%;
    object-fit:contain;
}

.icon-btn{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#161314;
    color:#fff;
    border:1px solid #393134;
    cursor:pointer;
}

.nav-btn{
    display:none;
}

/* =========================
   FOOTER
========================= */

.footer{
    text-align:center;
    padding:32px 16px 42px;
    color:#928589;
    font-size:10px;
    line-height:1.8;
    border-top:1px solid #282225;
}

.footer-logo{
    font:700 18px Georgia,serif;
    color:#dcb5bf;
    letter-spacing:.15em;
    margin-bottom:6px;
}

/* =========================================================
   TABLET = 7 PER ROW
   ========================================================= */

@media(min-width:650px){

    .masonry,
    .gallery-grid,
    .media-grid-public{
        grid-template-columns:repeat(7,minmax(0,1fr)) !important;
        gap:5px !important;
        padding:0 6px 30px !important;
    }

    .media-card{
        border-radius:6px;
    }

    .card-meta strong{
        font-size:8px;
    }

    .play-badge{
        width:28px;
        height:28px;
        font-size:10px;
    }
}

/* =========================================================
   PC = 9 PER ROW
   ========================================================= */

@media(min-width:1000px){

    .hero{
        min-height:38vh;
        padding-left:18px;
    }

    .masonry,
    .gallery-grid,
    .media-grid-public{
        grid-template-columns:repeat(9,minmax(0,1fr)) !important;
        gap:6px !important;
        padding:0 8px 36px !important;
    }

    .media-card{
        border-radius:7px;
    }

    .card-meta strong{
        font-size:9px;
    }

    .play-badge{
        width:32px;
        height:32px;
        font-size:11px;
    }

    .nav-btn{
        display:block;
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        z-index:4;
        width:48px;
        height:60px;
        border:0;
        border-radius:12px;
        background:rgba(24,20,22,.82);
        color:#fff;
        font-size:34px;
        cursor:pointer;
    }

    .nav-btn.prev{
        left:12px;
    }

    .nav-btn.next{
        right:12px;
    }
}

/* =========================================================
   LARGE PC = 9 PER ROW
   ========================================================= */

@media(min-width:1400px){

    .masonry,
    .gallery-grid,
    .media-grid-public{
        grid-template-columns:repeat(9,minmax(0,1fr)) !important;
        gap:7px !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }
}