/* ─── Jefolio Front-end v1.2.1 ─── */

.jefolio-grid-wrap{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:0;box-sizing:border-box;overflow:hidden}

/* Grid */
.jefolio-grid{display:grid;grid-template-columns:repeat(var(--jf-cols-d,3),1fr);gap:var(--jf-gap,16px);width:100%;box-sizing:border-box;padding:var(--jf-gap,16px)}
.jefolio-grid.jefolio-masonry{display:block;column-count:var(--jf-cols-d,3);column-gap:var(--jf-gap,16px)}
.jefolio-masonry .jefolio-card{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--jf-gap,16px);display:inline-block;width:100%}
@media(max-width:1024px){.jefolio-grid{grid-template-columns:repeat(var(--jf-cols-t,2),1fr)}.jefolio-grid.jefolio-masonry{column-count:var(--jf-cols-t,2)}}
@media(max-width:640px){.jefolio-grid{grid-template-columns:repeat(var(--jf-cols-m,1),1fr)}.jefolio-grid.jefolio-masonry{column-count:var(--jf-cols-m,1)}}

/* Card */
.jefolio-card{display:flex;flex-direction:column;background:var(--jf-card-bg,#2a2a2a);border-radius:var(--jf-radius,8px);overflow:hidden;text-decoration:none!important;color:var(--jf-text,#fff);transition:transform .3s ease,box-shadow .3s ease;cursor:default;position:relative}
a.jefolio-card{cursor:pointer}
a.jefolio-card:hover{transform:translateY(-3px)}
a.jefolio-card:focus{outline:2px solid var(--jf-accent,#1ebfbf);outline-offset:2px}

/* Hover Shadow */
.jf-hover-shadow a.jefolio-card:hover,
.jf-hover-shadow .jefolio-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.4)}

/* Hover Zoom */
.jf-hover-zoom .jefolio-card-media{transition:transform .4s ease}
.jf-hover-zoom .jefolio-card:hover .jefolio-card-media{transform:scale(1.03)}

/* Media */
.jefolio-card-media{width:100%;overflow:hidden;position:relative;background:#1e1e1e;height:var(--jf-card-h-item,var(--jf-card-h,380px));flex-shrink:0}
.jefolio-card-scroll-wrap{width:100%;height:100%;overflow:hidden;position:relative}
.jefolio-card-img{display:block;width:100%;height:auto;position:absolute;top:0;left:0;will-change:transform}
.jefolio-card-video{width:100%;height:100%;object-fit:cover;display:block}
.jefolio-card-empty{width:100%;height:100%;min-height:200px;background:#222}

/* Gradient Overlay */
.jefolio-card-gradient{position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 100%);pointer-events:none;z-index:1}

/* ═══════════════════════════════════
   Footer (title bar) — centred
   ═══════════════════════════════════ */
.jefolio-card-footer{
    display:flex;align-items:center;justify-content:center;
    padding:14px 18px;gap:16px;text-align:center;
    position:relative;z-index:2;
    background:var(--jf-card-bg,#2a2a2a);
}
.jefolio-card-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--jf-text,#fff);line-height:1.4}
.jefolio-card-date{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;color:rgba(255,255,255,.5);white-space:nowrap;flex-shrink:0;line-height:1.4}

/* ═══════════════════════════════════
   Button wrap
   ═══════════════════════════════════ */
.jefolio-card-button-wrap{
    border-top:1px solid rgba(255,255,255,.08);text-align:center;
    padding:12px 18px;position:relative;z-index:2;
    background:var(--jf-card-bg,#2a2a2a);
}
.jefolio-card-btn{display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:600;color:var(--jf-text,#fff);text-decoration:none!important;cursor:pointer;transition:color .2s;letter-spacing:.3px}
.jefolio-card-btn:hover{color:var(--jf-accent,#1ebfbf)}

/* ═══════════════════════════════════
   TITLE MODE: HOVER
   Bar collapses to 0 height, expands on hover
   ═══════════════════════════════════ */
.jf-title-hover .jefolio-card-footer{
    max-height:0;
    padding-top:0;
    padding-bottom:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s ease,padding .35s ease,opacity .3s ease;
}
.jf-title-hover .jefolio-card:hover .jefolio-card-footer{
    max-height:80px;
    padding-top:14px;
    padding-bottom:14px;
    opacity:1;
}

/* TITLE MODE: HIDDEN */
.jf-title-hidden .jefolio-card-footer{display:none!important}

/* ═══════════════════════════════════
   BUTTON MODE: HOVER
   Bar collapses to 0 height, expands on hover
   ═══════════════════════════════════ */
.jf-btn-hover .jefolio-card-button-wrap{
    max-height:0;
    padding-top:0;
    padding-bottom:0;
    border-top-width:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s ease,padding .35s ease,opacity .3s ease,border-top-width .35s ease;
}
.jf-btn-hover .jefolio-card:hover .jefolio-card-button-wrap{
    max-height:60px;
    padding-top:12px;
    padding-bottom:12px;
    border-top-width:1px;
    opacity:1;
}