/* ══════════════════════════════════════════════════
   SINAC — Blog Visitor (Bento Grid)
   Used in: home/Blog.html.twig
   ══════════════════════════════════════════════════ */

/* ── Sections ── */
.bn-section-head { padding: 2.5rem 0 0; }
.bn-grid-section { padding: 1.8rem 0 3rem; }

/* ── Filtres ── */
.bn-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.bn-filters__btn {
    background:#fff; border:1.5px solid #e5e7eb; color:#6b7280;
    padding:.45rem 1.2rem; border-radius:50px; font-size:.78rem; font-weight:600;
    cursor:pointer; transition:all .25s ease; font-family:var(--ff-body,'Inter',sans-serif);
}
.bn-filters__btn:hover { border-color:var(--c-primary); color:var(--c-primary); }
.bn-filters__btn--active {
    background:var(--c-primary); border-color:var(--c-primary); color:#fff;
}

/* ══════════════════════════════════════════════════
   RANGÉE HAUTE — bento 60/40
   ══════════════════════════════════════════════════ */
.bn-row-top {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:1rem;
    margin-bottom:1rem;
}
.bn-col-right {
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:1rem;
}

/* ══════════════════════════════════════════════════
   RANGÉE BASSE — 3 colonnes égales
   ══════════════════════════════════════════════════ */
.bn-row-bottom {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1rem;
}

/* ══════════════════════════════════════════════════
   CARTE GÉNÉRIQUE — overlay sur image
   ══════════════════════════════════════════════════ */
.bn-card {
    position:relative;
    display:block;
    border-radius:1rem;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
}
.bn-card:hover { color:#fff; }

/* Image */
.bn-card__img {
    position:absolute; inset:0;
}
.bn-card__img img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.bn-card:hover .bn-card__img img { transform:scale(1.06); }

/* Gradient overlay */
.bn-card__overlay {
    position:absolute; inset:0;
    background:linear-gradient(
        0deg,
        rgba(0,0,0,.85) 0%,
        rgba(0,0,0,.55) 35%,
        rgba(0,0,0,.2) 65%,
        rgba(0,0,0,.08) 100%
    );
    transition:background .3s;
}
.bn-card:hover .bn-card__overlay {
    background:linear-gradient(
        0deg,
        rgba(0,0,0,.9) 0%,
        rgba(0,0,0,.6) 40%,
        rgba(0,0,0,.25) 70%,
        rgba(0,0,0,.1) 100%
    );
}

/* Contenu texte (en bas) */
.bn-card__content {
    position:relative;
    display:flex; flex-direction:column; justify-content:flex-end;
    height:100%;
    padding:1.4rem 1.3rem;
    z-index:2;
}

/* Meta : date + tags */
.bn-card__meta {
    display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
    margin-bottom:.55rem;
}
.bn-card__date {
    display:inline-flex; align-items:center; gap:.25rem;
    font-size:.75rem; font-weight:600; color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.bn-card__date i { font-size:.85rem; color:var(--c-primary, #0d9488); }
.bn-card__tag {
    background:var(--c-primary, #0d9488);
    color:#fff;
    padding:.2rem .7rem; border-radius:50px;
    font-size:.68rem; font-weight:700;
    text-transform:capitalize; letter-spacing:.02em;
}

/* Titre */
.bn-card__title {
    margin:0;
    font-family:var(--ff-body,'Inter',sans-serif);
    font-weight:700; color:#fff;
    line-height:1.3;
    text-shadow:0 2px 8px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4);
}

/* ── Variantes de taille ── */
.bn-card--lg {
    min-height:420px;
}
.bn-card--lg .bn-card__title {
    font-size:clamp(1.15rem, 2vw, 1.45rem);
}
.bn-card--lg .bn-card__content {
    padding:1.8rem 1.6rem;
}

.bn-card--md {
    min-height:0;
}
.bn-card--md .bn-card__title {
    font-size:.92rem;
}

.bn-card--sm {
    min-height:280px;
}
.bn-card--sm .bn-card__title {
    font-size:.95rem;
}

/* Quand peu de cartes : plus grandes */
.bn-row-bottom--few {
    grid-template-columns:repeat(2, 1fr);
}
.bn-row-bottom--single {
    grid-template-columns:1fr;
    max-width:600px;
}
.bn-row-bottom--single .bn-card--sm,
.bn-row-bottom--few .bn-card--sm {
    min-height:340px;
}
.bn-row-bottom--single .bn-card--sm .bn-card__title,
.bn-row-bottom--few .bn-card--sm .bn-card__title {
    font-size:1.15rem;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media(max-width:991px){
    .bn-row-top {
        grid-template-columns:1fr;
    }
    .bn-card--lg { min-height:320px; }
    .bn-col-right {
        grid-template-rows:auto;
        grid-template-columns:1fr 1fr;
    }
    .bn-card--md { min-height:240px; }
    .bn-row-bottom {
        grid-template-columns:repeat(2, 1fr);
    }
}
@media(max-width:575px){
    .bn-row-top { gap:.75rem; }
    .bn-card--lg { min-height:260px; }
    .bn-col-right {
        grid-template-columns:1fr;
    }
    .bn-card--md { min-height:220px; }
    .bn-row-bottom {
        grid-template-columns:1fr;
        gap:.75rem;
    }
    .bn-card--sm { min-height:220px; }
    .bn-card__content { padding:1.1rem 1rem; }
    .bn-filters__btn { padding:.35rem .9rem; font-size:.72rem; }
}