/* =========================================================
   NXA.CO CATEGORIES — FOUR-COLUMN EDITORIAL WALL
========================================================= */

.categories-editorial-page{
    background-color:#fffdf8;
    background-image:url("assets/bg.texture.jpg");
    background-position:center top;
    background-repeat:repeat;
    background-size:900px auto;
}

/* HERO */
.categories-editorial-hero{
    position:relative;
    min-height:72vh;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    background:#111;
}

.categories-editorial-hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(1);
}

.categories-editorial-hero-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.16) 0%,
        rgba(0,0,0,.12) 42%,
        rgba(0,0,0,.58) 100%
    );
}

.categories-editorial-hero-copy{
    position:relative;
    z-index:2;
    width:min(1100px,90vw);
    padding:0 0 68px;
    text-align:center;
    color:#fff;
}

.categories-editorial-hero-copy span{
    display:block;
    margin-bottom:16px;
    font-family:"Red Hat Display",sans-serif;
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.72);
}

.categories-editorial-hero-copy h1{
    margin:0;
    font-family:"Lora",serif;
    font-size:clamp(54px,7vw,80px);
    font-weight:350;
    line-height:.91;
    letter-spacing:-.05em;
    color:#fff;
}

/* PHOTO WALL */
.categories-columns-wrap{
    padding:14px;
    background-color:#fffdf8;
    background-image:url("assets/bg.texture.jpg");
    background-position:center top;
    background-repeat:repeat;
    background-size:900px auto;
}

.categories-columns{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    align-items:start;
}

.categories-column{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/*
Different heights create the same editorial rhythm as your reference.
Because each column has multiple images stacked vertically, there will
not be the large empty areas you had before.
*/
.category-photo{
    position:relative;
    display:block;
    width:100%;
    overflow:hidden;
    background:#ddd;
}

.category-photo.short{height:280px;}
.category-photo.medium{height:430px;}
.category-photo.tall{height:600px;}

.category-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
}

.category-photo-hover{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    padding:20px;
    opacity:0;
    background:linear-gradient(to top,rgba(0,0,0,.5),transparent 58%);
    transition:opacity .3s ease;
}

.category-photo-hover span{
    color:#fff;
    font-family:"Lora",serif;
    font-size:20px;
}

.category-photo:hover img{
    transform:scale(1.025);
}

.category-photo:hover .category-photo-hover{
    opacity:1;
}

@media(max-width:1100px){
    .categories-columns{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:760px){
    .categories-editorial-hero{
        min-height:60vh;
    }

    .categories-editorial-hero-copy{
        padding-bottom:46px;
    }

    .categories-columns-wrap{
        padding:8px;
    }

    .categories-columns{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .categories-column{
        gap:8px;
    }

    .category-photo.short{height:190px;}
    .category-photo.medium{height:280px;}
    .category-photo.tall{height:390px;}

    .category-photo-hover{
        display:none;
    }
}


/* =========================================================
   FINAL VENEMA-STYLE FIX
   Keep the varied editorial rhythm above.
   Only the final image in each column uses the same size.
========================================================= */

.categories-columns{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
    align-items:stretch !important;
}

.categories-column{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    min-width:0 !important;
}

/* keep the irregular layout */
.category-photo.short{height:280px !important;}
.category-photo.medium{height:430px !important;}
.category-photo.tall{height:600px !important;}

/* same-size last image across all four columns */
.category-photo.bottom{
    height:460px !important;
    margin-top:auto !important;
}

/*
Make each column stretch to the same overall height.
The last fixed-size image stays aligned at the bottom,
so the gallery ends cleanly without a blank patch.
*/
.categories-column{
    height:100% !important;
}

.category-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
}

@media(max-width:1100px){
    .categories-columns{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .category-photo.short{height:230px !important;}
    .category-photo.medium{height:350px !important;}
    .category-photo.tall{height:480px !important;}
    .category-photo.bottom{height:360px !important;}
}

@media(max-width:760px){
    .categories-columns{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .categories-column{
        gap:8px !important;
    }

    .category-photo.short{height:180px !important;}
    .category-photo.medium{height:260px !important;}
    .category-photo.tall{height:350px !important;}
    .category-photo.bottom{height:280px !important;}
}


/* Admin-managed video support */
.category-photo video{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.category-photo:hover video{
    transform:scale(1.025);
}