/* ============================================================
   ILD BLOG GRID — Shortcode
   Percorso: /wp-content/themes/ILoveDisco/assets/css/ild-blog-grid.css
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   FILTRI CATEGORIA
══════════════════════════════════════════════════════════ */
.ild-blog-filters {
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
    margin-bottom: 40px;
}

.ild-blog-filter-btn {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding:        8px 18px;
    background:     transparent;
    color:          var(--ild-grey, #8a8070);
    border:         1px solid rgba(201, 168, 76, 0.20);
    cursor:         pointer;
    transition:     border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
    line-height:    1;
}

.ild-blog-filter-btn:hover {
    border-color: var(--ild-gold, #c9a84c);
    color:        var(--ild-gold, #c9a84c);
}

.ild-blog-filter-btn.is-active {
    background:   rgba(201, 168, 76, 0.08);
    border-color: var(--ild-gold, #c9a84c);
    color:        var(--ild-gold, #c9a84c);
}

/* ══════════════════════════════════════════════════════════
   LAYOUT GRID (3 colonne uniforme)
══════════════════════════════════════════════════════════ */
.ild-blog-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   40px;
    width:                 100%;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT FEATURED (primo articolo grande)
══════════════════════════════════════════════════════════ */
.ild-blog-layout--featured {
    grid-template-columns: repeat(3, 1fr);
}

.ild-blog-layout--featured .ild-blog-card--featured {
    grid-column: span 3;
    display:     grid;
    grid-template-columns: 1.4fr 1fr;
    gap:         0;
}

.ild-blog-layout--featured .ild-blog-card--featured .ild-blog-card__thumb-link {
    display: block;
}

.ild-blog-layout--featured .ild-blog-card--featured .ild-blog-card__thumb {
    height: 100%;
    min-height: 420px;
}

.ild-blog-layout--featured .ild-blog-card--featured .ild-blog-card__body {
    background:    var(--ild-card, #111008);
    border:        1px solid rgba(201, 168, 76, 0.10);
    border-left:   none;
    padding:       48px 44px;
    display:       flex;
    flex-direction: column;
    justify-content: center;
}

.ild-blog-layout--featured .ild-blog-card--featured .ild-blog-card__title {
    font-size: clamp(24px, 3vw, 36px);
}

.ild-blog-layout--featured .ild-blog-card--featured .ild-blog-card__excerpt {
    display: block; /* sempre visibile nella featured */
}

/* ══════════════════════════════════════════════════════════
   CARD STANDARD
══════════════════════════════════════════════════════════ */
.ild-blog-card {
    display:        flex;
    flex-direction: column;
    cursor:         pointer;
    transition:     transform 0.3s ease;
}

.ild-blog-card:hover {
    transform: translateY(-4px);
}

/* ── Thumbnail ── */
.ild-blog-card__thumb-link {
    display:  block;
    overflow: hidden;
}

.ild-blog-card__thumb {
    position:     relative;
    aspect-ratio: 16 / 10;
    overflow:     hidden;
    background:   linear-gradient(135deg, #1a1209, #0d0d0d);
}

.ild-blog-card__thumb img {
    width:      100%;
    height:     100% !important;
    object-fit: cover;
    display:    block;
    transition: transform 0.55s ease;
}

.ild-blog-card:hover .ild-blog-card__thumb img {
    transform: scale(1.05);
}

.ild-blog-card__thumb-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
    transition: opacity 0.3s ease;
}

.ild-blog-card:hover .ild-blog-card__thumb-overlay {
    opacity: 0.5;
}

/* Placeholder senza immagine */
.ild-blog-card__placeholder {
    width:           100%;
    height:          100%;
    background:      linear-gradient(135deg, #1a1209, #0d0d0d);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       52px;
}

/* ── Corpo ── */
.ild-blog-card__body {
    padding:        22px 0 0;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* ── Categoria ── */
.ild-blog-card__cat {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--ild-magenta, #ff00ff);
    line-height:    1;
    display:        block;
}

/* ── Titolo ── */
.ild-blog-card__title {
    font-family: var(--ild-font-serif, 'Playfair Display', serif);
    font-size:   clamp(17px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    margin:      0;
    color:       var(--ild-white, #f5f0e8);
    transition:  color 0.25s ease;
}

.ild-blog-card__title a {
    color:           inherit;
    text-decoration: none;
}

.ild-blog-card:hover .ild-blog-card__title,
.ild-blog-card__title a:hover {
    color: var(--ild-gold, #c9a84c);
}

/* ── Excerpt ── */
.ild-blog-card__excerpt {
    font-family: var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:   13px;
    font-weight: 300;
    color:       var(--ild-grey-light, rgba(245,240,232,0.65));
    line-height: 1.65;
    margin:      0;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* ── Footer (meta + cta) ── */
.ild-blog-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    margin-top:      auto;
    padding-top:     12px;
    border-top:      1px solid rgba(201, 168, 76, 0.12);
    flex-wrap:       wrap;
}

.ild-blog-card__meta {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.ild-blog-card__date,
.ild-blog-card__read,
.ild-blog-card__sep {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      11px;
    color:          var(--ild-grey-muted, rgba(138,128,112,0.55));
    letter-spacing: 0.5px;
    white-space:    nowrap;
}

/* ── CTA ── */
.ild-blog-card__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  2px;
    text-transform:  uppercase;
    color:           var(--ild-gold, #c9a84c);
    text-decoration: none;
    white-space:     nowrap;
    transition:      gap 0.25s ease, color 0.25s ease;
}

.ild-blog-card__cta:hover {
    color: var(--ild-gold-light, #f0d080);
    gap:   10px;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT MINI (lista con bordo oro superiore)
══════════════════════════════════════════════════════════ */
.ild-blog-layout--mini {
    grid-template-columns: repeat(3, 1fr);
    gap:                   0;
}

.ild-blog-mini-card {
    border-top:  1px solid rgba(201, 168, 76, 0.20);
    padding:     22px 0 22px;
    cursor:      pointer;
    transition:  border-top-color 0.25s ease;
    display:     flex;
    flex-direction: column;
    gap:         8px;
}

/* Gap laterale tra colonne mini */
.ild-blog-layout--mini .ild-blog-mini-card:nth-child(3n+2) {
    padding-left:  24px;
    padding-right: 24px;
}

.ild-blog-mini-card:hover {
    border-top-color: var(--ild-magenta, #ff00ff);
}

.ild-blog-mini-card__top {
    min-height: 16px;
}

.ild-blog-mini-card__cat {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--ild-gold, #c9a84c);
    line-height:    1;
}

.ild-blog-mini-card__title {
    font-family: var(--ild-font-serif, 'Playfair Display', serif);
    font-size:   clamp(16px, 1.8vw, 20px);
    font-weight: 700;
    line-height: 1.25;
    margin:      0;
    color:       var(--ild-white, #f5f0e8);
    transition:  color 0.25s ease;
}

.ild-blog-mini-card__title a {
    color:           inherit;
    text-decoration: none;
}

.ild-blog-mini-card:hover .ild-blog-mini-card__title {
    color: var(--ild-gold, #c9a84c);
}

.ild-blog-mini-card__excerpt {
    font-family: var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:   13px;
    font-weight: 300;
    color:       var(--ild-grey-light, rgba(245,240,232,0.60));
    line-height: 1.6;
    margin:      0;
}

.ild-blog-mini-card__footer {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  4px;
}

.ild-blog-mini-card__date,
.ild-blog-mini-card__read {
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      11px;
    color:          var(--ild-grey-muted, rgba(138,128,112,0.55));
    letter-spacing: 0.5px;
}

.ild-blog-mini-card__read::before {
    content: '· ';
}

/* ══════════════════════════════════════════════════════════
   BOTTONE "VEDI TUTTI"
══════════════════════════════════════════════════════════ */
.ild-blog-cta-wrap {
    margin-top: 40px;
    text-align: left;
}

/* ══════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════ */
.ild-blog-empty {
    font-family: var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:   14px;
    color:       var(--ild-grey, #8a8070);
    padding:     40px;
    text-align:  center;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ild-blog-grid,
    .ild-blog-layout--featured,
    .ild-blog-layout--mini {
        grid-template-columns: repeat(2, 1fr);
    }

    .ild-blog-layout--featured .ild-blog-card--featured {
        grid-column: span 2;
        grid-template-columns: 1fr;
    }

    .ild-blog-layout--featured .ild-blog-card--featured .ild-blog-card__thumb {
        min-height: 280px;
    }

    .ild-blog-layout--featured .ild-blog-card--featured .ild-blog-card__body {
        border-left: 1px solid rgba(201, 168, 76, 0.10);
        border-top:  none;
        padding:     32px 28px;
    }

    .ild-blog-layout--mini .ild-blog-mini-card:nth-child(3n+2) {
        padding-left:  0;
        padding-right: 0;
    }
    .ild-blog-layout--mini .ild-blog-mini-card:nth-child(even) {
        padding-left: 20px;
    }
}

@media (max-width: 640px) {
    .ild-blog-grid,
    .ild-blog-layout--featured,
    .ild-blog-layout--mini {
        grid-template-columns: 1fr;
        gap:                   32px;
    }

    .ild-blog-layout--featured .ild-blog-card--featured {
        grid-column: span 1;
    }

    .ild-blog-layout--mini .ild-blog-mini-card:nth-child(even) {
        padding-left: 0;
    }

    .ild-blog-filters {
        gap: 6px;
    }

    .ild-blog-card__footer {
        flex-direction: column;
        align-items:    flex-start;
    }
}