.mod-innerfrontpage{--ifp-gap:1.25rem;--ifp-cols:3}

/* ---------- GRID MODE ---------- */
.mod-innerfrontpage.ifp-grid{display:grid;gap:var(--ifp-gap)}
.mod-innerfrontpage.ifp-grid.columns-1{grid-template-columns:1fr}
.mod-innerfrontpage.ifp-grid.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mod-innerfrontpage.ifp-grid.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mod-innerfrontpage.ifp-grid.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mod-innerfrontpage.ifp-grid.columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- CAROUSEL MODE ---------- */
.mod-innerfrontpage.ifp-carousel.columns-1{--ifp-cols:1}
.mod-innerfrontpage.ifp-carousel.columns-2{--ifp-cols:2}
.mod-innerfrontpage.ifp-carousel.columns-3{--ifp-cols:3}
.mod-innerfrontpage.ifp-carousel.columns-4{--ifp-cols:4}
.mod-innerfrontpage.ifp-carousel.columns-5{--ifp-cols:5}

.ifp-viewport{position:relative}
.ifp-carousel .ifp-track{
    display:flex;
    gap:var(--ifp-gap);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:.25rem;
}
.ifp-carousel .ifp-track::-webkit-scrollbar{display:none}
.ifp-carousel .ifp-card{
    scroll-snap-align:start;
    flex:0 0 calc((100% - (var(--ifp-cols) - 1) * var(--ifp-gap)) / var(--ifp-cols));
    min-width:0;
}

/* Arrows */
.ifp-arrow{
    position:absolute;top:var(--ifp-arrow-top,28%);transform:translateY(-50%);
    z-index:2;width:2.75rem;height:2.75rem;border-radius:50%;
    border:1px solid rgba(0,0,0,.15);background:#fff;color:#222;
    font-size:1.5rem;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.15);transition:opacity .2s,background .2s;
}
.ifp-arrow:hover{background:#f0f0f0}
.ifp-arrow:disabled{opacity:.35;cursor:default}
.ifp-arrow[hidden]{display:none}
.ifp-prev{left:-.5rem}
.ifp-next{right:-.5rem}

/* Dots */
.ifp-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.9rem}
.ifp-dots[hidden]{display:none}
.ifp-dot{
    width:.7rem;height:.7rem;border-radius:50%;border:none;padding:0;cursor:pointer;
    background:rgba(0,0,0,.25);transition:background .2s,transform .2s;
}
.ifp-dot.is-active{background:#497bd1;transform:scale(1.2)}

/* ---------- SHARED CARD STYLES ---------- */
.ifp-card{border:1px solid rgba(0,0,0,.12);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.ifp-image{display:block;aspect-ratio:16/9;overflow:hidden;background:#eee}
.ifp-image img{width:100%;height:100%;object-fit:cover;display:block}
.ifp-body{padding:1rem;display:flex;flex-direction:column;flex:1}
.ifp-category{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;opacity:.7;margin-bottom:.35rem}
.ifp-title{font-size:1.1rem;line-height:1.25;margin:.15rem 0 .5rem}
.ifp-title a{text-decoration:none}
.ifp-meta{font-size:.85rem;opacity:.75;display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:.6rem}
.ifp-intro{margin:.4rem 0 .8rem}
.ifp-readmore{font-weight:600;margin-top:auto}
.ifp-empty,.ifp-debug{padding:1rem;border:1px solid #ccc;background:#f8f8f8;font-size:.95rem}
.ifp-grid .ifp-empty,.ifp-grid .ifp-debug{grid-column:1/-1}
.ifp-debug{border-color:#497bd1;background:#eef4ff}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
    .mod-innerfrontpage.ifp-grid.columns-3,
    .mod-innerfrontpage.ifp-grid.columns-4,
    .mod-innerfrontpage.ifp-grid.columns-5{grid-template-columns:repeat(2,minmax(0,1fr))}
    .mod-innerfrontpage.ifp-carousel.columns-3,
    .mod-innerfrontpage.ifp-carousel.columns-4,
    .mod-innerfrontpage.ifp-carousel.columns-5{--ifp-cols:2}
}
@media (max-width:600px){
    .mod-innerfrontpage.ifp-grid{grid-template-columns:1fr!important}
    .mod-innerfrontpage.ifp-carousel{--ifp-cols:1}
    .ifp-prev{left:0}
    .ifp-next{right:0}
}

/* ---------- TITLE ON IMAGE ---------- */
.ifp-image-titled{position:relative;display:block}
.ifp-image-titled .ifp-image-title{
    position:absolute;left:0;right:0;bottom:0;
    padding:1.5rem .9rem .8rem;
    color:#fff;font-size:1.1rem;font-weight:700;line-height:1.25;
    background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,0) 100%);
    text-shadow:0 1px 3px rgba(0,0,0,.6);
}