/*
Theme Name: Julia Molinari
Theme URI: https://example.invalid/
Author: Project
Description: Dark Venetian-inspired catalog theme for rental dresses and costumes.
Version: 1.0.13
Text Domain: julia-molinari-catalog
*/
:root{--bg:#090a0a;--bg2:#11110f;--card:#11110f;--text:#f1ede4;--muted:#a79e90;--gold:#b5904d;--gold2:#d7b46c;--line:#3b3020;--max:1520px}*{box-sizing:border-box}html{background:var(--bg);color:var(--text);scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -20%,#262017 0,#0d0e0d 35%,#080909 70%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.wrap{width:min(calc(100% - 48px),var(--max));margin-inline:auto}.site-header{position:sticky;top:0;z-index:30;background:rgba(7,8,8,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(181,144,77,.35)}.header-inner{min-height:82px;display:flex;align-items:center;gap:34px}.brand{display:block;white-space:nowrap}.brand-logo{width:clamp(180px,16vw,290px);flex:0 0 auto}.brand-logo img{width:100%;height:auto;display:block}.footer-brand{display:block;width:min(300px,85%);margin-bottom:18px}.footer-brand img{width:100%;height:auto;display:block}.main-nav{display:flex;gap:28px;margin-left:auto;font-size:13px;text-transform:uppercase;letter-spacing:.09em}.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--gold2)}.langs{display:flex;gap:9px;font-size:12px;color:var(--muted);text-transform:uppercase}.langs a.current{color:var(--gold2)}.catalog-intro{padding:74px 0 30px;border-bottom:1px solid rgba(181,144,77,.25);background:linear-gradient(90deg,rgba(181,144,77,.05),transparent 50%)}.eyebrow{font-size:12px;color:var(--gold2);letter-spacing:.2em;text-transform:uppercase}.catalog-intro h1,.single-title{font:400 clamp(44px,5.2vw,84px)/.95 Georgia,"Times New Roman",serif;letter-spacing:.02em;margin:12px 0 20px}.catalog-intro p{max-width:720px;color:var(--muted);font-size:17px}.catalog-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:22px 0}.filter-link,.filter-all{border:1px solid var(--line);padding:10px 14px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.filter-link:hover,.filter-link.active,.filter-all.active{border-color:var(--gold);color:var(--gold2)}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:8px;gap:24px;margin:14px 0 80px}.catalog-card{background:linear-gradient(180deg,#141412,#0d0e0d);border:1px solid rgba(181,144,77,.35);overflow:hidden;position:relative;transition:transform .22s ease,border-color .22s ease}.catalog-card:hover{transform:translateY(-3px);border-color:var(--gold)}.catalog-card-media{background:#090909;overflow:hidden}.catalog-card-media img{width:100%;height:auto;object-fit:contain;transition:transform .45s ease}.catalog-card:hover img{transform:scale(1.015)}.catalog-card-copy{padding:18px 18px 20px}.catalog-card h2{font:400 25px/1.1 Georgia,"Times New Roman",serif;color:var(--gold2);margin:0 0 7px}.catalog-card .cats{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#c8ab72}.catalog-card p{margin:8px 0 0;color:var(--muted);font-size:14px}.placeholder{aspect-ratio:4/5;background:linear-gradient(135deg,#24231f,#0b0c0c);display:grid;place-items:center;color:#7f6d4c;font-family:Georgia,serif;font-size:42px}.site-footer{border-top:1px solid rgba(181,144,77,.3);padding:46px 0 30px;background:#080909}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}.footer-title{font-family:Georgia,serif;color:var(--gold2);font-size:22px;letter-spacing:.14em}.footer-muted{color:var(--muted);font-size:13px}.single-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:54px;padding:54px 0 76px;align-items:start}.single-main-image{border:1px solid rgba(181,144,77,.35);background:#0b0c0b}.single-copy{position:sticky;top:118px}.single-copy .tax{color:var(--gold2);font-size:12px;letter-spacing:.14em;text-transform:uppercase}.single-copy .single-title{font-size:clamp(48px,5vw,76px)}.single-copy .entry{color:#c6bfb3;font-size:17px}.content-group{padding:76px 0;border-top:1px solid rgba(181,144,77,.25)}.group-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;margin-bottom:30px}.group-head h2{margin:0;font:400 clamp(34px,4vw,58px)/1 Georgia,serif;color:var(--text)}.group-head .desc{color:var(--muted)}.gallery-list{display:block}.gallery-tile{width:100%;min-width:0;background:transparent}.gallery-tile h3{font:400 28px Georgia,serif;color:var(--gold2);margin:0 0 8px}.gallery-tile p{color:var(--muted)}.text-link{display:inline-block;margin-top:18px;color:var(--gold2);font-size:12px;letter-spacing:.12em;text-transform:uppercase}.virtual-head{padding:55px 0 34px}.virtual-head h1{font:400 clamp(42px,5vw,72px)/1 Georgia,serif;margin:8px 0}.virtual-head p{max-width:760px;color:var(--muted)}.photo-flow{columns:3 320px;column-gap:22px;margin-bottom:80px}.photo-flow figure{break-inside:avoid;margin:0 0 22px;border:1px solid rgba(181,144,77,.28);background:#0e0f0e}.photo-flow img{width:100%;height:auto}.photo-flow figcaption{padding:12px 14px;color:var(--muted);font-size:13px}.article-wrap{max-width:900px;padding:60px 0 90px}.article-wrap h1{font:400 clamp(42px,5vw,68px) Georgia,serif}.article-wrap .entry{font-size:17px;color:#d4cec3}.article-wrap .entry a{color:var(--gold2);text-decoration:underline}.pagination{margin:-40px 0 80px;text-align:center}.pagination .page-numbers{display:inline-block;padding:7px 11px;border:1px solid var(--line);margin:3px}.pagination .current{color:var(--gold2);border-color:var(--gold)}@media(max-width:1000px){.main-nav{display:none}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.single-hero{grid-template-columns:1fr}.single-copy{position:static}.gallery-list{grid-template-columns:1fr}.group-head{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.wrap{width:min(calc(100% - 28px),var(--max))}.header-inner{min-height:68px}.brand-logo{width:160px}.catalog-intro{padding-top:48px}.catalog-grid{grid-template-columns:1fr;gap:16px}.footer-grid{grid-template-columns:1fr}.langs{margin-left:auto}}




/* ==========================================================
   Julia Molinari gallery v0.9
   Stable layout based on explicit attachment aspect ratios.
   No intrinsic image sizing is used for desktop card geometry.
   ========================================================== */

.gallery-list{
    display:block;
    width:100%;
    margin:0;
    padding:0;
}

.gallery-tile{
    width:100%;
    margin:0 0 56px;
    padding:0;
    border:0;
    overflow:visible;
    background:transparent;
}

.gallery-copy{
    margin-bottom:18px;
}

.gallery-tile h3{
    margin:0 0 8px;
    font:400 28px Georgia,serif;
    color:var(--gold2);
}

.gallery-tile p{
    color:var(--muted);
}

/* This element is already OUTSIDE .wrap in the PHP template.
   Therefore width:100% really means exact viewport/content width. */
.gallery-preview{
    display:flex;
    flex-flow:row nowrap;
    align-items:flex-start;
    gap:12px;
    width:100%;
    margin:0;
    padding:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.gallery-preview::-webkit-scrollbar{
    display:none;
}

/* Card geometry comes from explicit aspect-ratio set in PHP.
   Chrome's img contain-intrinsic-size can no longer stretch this element. */
.gallery-preview > .jm-lightbox-item{
    flex:0 0 auto;
    display:block;
    height:clamp(480px,64vh,720px);
    width:auto;
    padding:9px;
    border:1px solid var(--gold);
    box-sizing:border-box;
    background:#080908;
    line-height:0;
    cursor:zoom-in;
}

/* Image fills the known-ratio card. It does NOT define card width. */
.gallery-preview > .jm-lightbox-item > img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    margin:0;
    padding:0;
    border:0;
    object-fit:contain;
    object-position:center;
    background:transparent;
}

.gallery-link-wrap{
    margin-top:14px;
}

/* Lightbox */
.jm-lightbox{
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0,0,0,.95);
    display:none;
    align-items:center;
    justify-content:center;
    padding:28px;
}
.jm-lightbox.is-open{display:flex}
.jm-lightbox-stage{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center
}
.jm-lightbox-image{
    max-width:calc(100vw - 120px);
    max-height:calc(100vh - 100px);
    width:auto;
    height:auto;
    object-fit:contain;
    box-shadow:0 0 0 1px rgba(181,144,77,.28)
}
.jm-lightbox-close,.jm-lightbox-prev,.jm-lightbox-next{
    position:absolute;
    border:1px solid rgba(215,180,108,.5);
    background:rgba(8,9,9,.78);
    color:var(--gold2);
    cursor:pointer;
    font:400 28px/1 Georgia,serif;
    display:grid;
    place-items:center;
    z-index:2
}
.jm-lightbox-close{right:20px;top:18px;width:48px;height:48px;font-size:30px}
.jm-lightbox-prev,.jm-lightbox-next{top:50%;transform:translateY(-50%);width:54px;height:70px}
.jm-lightbox-prev{left:18px}
.jm-lightbox-next{right:18px}
.jm-lightbox-caption{
    position:absolute;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    max-width:min(900px,80vw);
    color:#d6cec0;
    text-align:center;
    font-size:14px;
    background:rgba(0,0,0,.55);
    padding:8px 12px
}
body.jm-lightbox-open{overflow:hidden}

/* Mobile: normal grid, no horizontal scrolling.
   Preserve each image's original proportions. */
@media (max-width:640px){
    .gallery-preview{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        width:100%;
        padding:0 10px;
        overflow:visible;
        box-sizing:border-box;
    }

    .gallery-preview > .jm-lightbox-item{
        width:100%;
        height:auto;
        aspect-ratio:auto !important;
        padding:7px;
    }

    .gallery-preview > .jm-lightbox-item > img{
        width:100%;
        height:auto;
    }

    .jm-lightbox{
        padding:10px
    }
    .jm-lightbox-image{
        max-width:100%;
        max-height:calc(100vh - 80px)
    }
    .jm-lightbox-prev,.jm-lightbox-next{
        width:44px;
        height:58px;
        background:rgba(8,9,9,.58)
    }
    .jm-lightbox-prev{left:4px}
    .jm-lightbox-next{right:4px}
    .jm-lightbox-close{right:8px;top:8px}
}

@media (max-width:420px){
    .gallery-preview{
        grid-template-columns:1fr;
    }
}

/* Mobile menu and clean language separators */
.langs{display:flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0}
.langs a,.langs span{list-style:none}
.langs .lang-divider{color:var(--gold);opacity:.75}
.langs a.current,.langs span.current{color:var(--gold2)}
.jm-menu-toggle{display:none;background:transparent;border:1px solid rgba(181,144,77,.55);color:var(--gold2);width:42px;height:40px;padding:10px;cursor:pointer;flex-direction:column;justify-content:space-between;align-items:stretch}
.jm-menu-toggle span{display:block;height:2px;background:currentColor;width:100%}
@media(max-width:1000px){
 .header-inner{gap:14px;flex-wrap:nowrap}
 .brand-logo{margin-right:auto}
 .jm-menu-toggle{display:flex;order:3;flex:0 0 42px}
 .langs{order:2;margin-left:0;font-size:12px}
 .main-nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:16px max(18px,calc((100vw - var(--max))/2));background:#090a0a;border-bottom:1px solid var(--gold);box-shadow:0 14px 28px rgba(0,0,0,.55);z-index:31}
 .main-nav.is-open{display:flex;flex-direction:column;gap:0}
 .main-nav a,.main-nav li a{display:block;padding:13px 0}
 .main-nav li{list-style:none}
}
@media(max-width:420px){
 .header-inner{gap:9px}
 .brand-logo{width:145px}
 .langs{gap:5px;font-size:11px}
 .jm-menu-toggle{width:38px;flex-basis:38px}
}
