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

/* ── GRIGLIA ─────────────────────────────────────────────── */
.ild-events-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2px;
    width:                 100%;
}

/* ── CARD BASE ───────────────────────────────────────────── */
.ild-event-card {
    position:   relative;
    overflow:   hidden;
    background: var(--ild-card, #111008);
    cursor:     pointer;
    display:    block;
}

/* Sizer: unico elemento in flusso normale, fissa l'altezza */
.ild-event-card__sizer {
    display:        block;
    width:          100%;
    pointer-events: none;
}

/* Card grande: occupa 2 colonne */
.ild-event-card--featured {
    grid-column: span 2;
}

.ild-event-card--featured .ild-event-card__sizer {
    /*  padding-top: 56.25%;    ratio 16:9 */
}

/* ── LINK WRAPPER (copre tutta la card) ──────────────────── */
.ild-event-card__link {
    display:  block;
    position: absolute;
    inset:    0;
    z-index:  1;
}

/* ── MEDIA (immagine o placeholder) ─────────────────────── */
.ild-event-card__media {
    position: absolute;
    inset:    0;
    overflow: hidden;
    z-index:  1;
}
.ild-event-card__media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.6s ease;
}

.ild-event-card:hover .ild-event-card__media img {
    transform: scale(1.06);
}

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

.ild-event-card__icon {
    font-size:  clamp(40px, 8vw, 90px);
    opacity:    0.6;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

.ild-event-card:hover .ild-event-card__icon {
    opacity:   0.9;
    transform: scale(1.1) rotate(-5deg);
}

/* ── OVERLAY GRADIENTE ───────────────────────────────────── */
.ild-event-card__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.30) 50%,
            transparent         100%
    );
    z-index:    2;
    transition: background 0.4s ease;
}

.ild-event-card:hover .ild-event-card__overlay {
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.45) 55%,
            transparent         100%
    );
}

/* ── BADGE (in alto a sinistra) ──────────────────────────── */
.ild-event-card__badge {
    position:         absolute;
    top:              16px;
    left:             16px;
    z-index:          4;
    background:       var(--ild-magenta, #ff00ff);
    color:            #fff;
    font-family:      var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:        9px;
    font-weight:      700;
    letter-spacing:   2px;
    text-transform:   uppercase;
    padding:          5px 10px;
    line-height:      1;
    pointer-events:   none;
}

/* ── BODY (contenuto testo, in basso) ────────────────────── */
.ild-event-card__body {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    3;
    padding:    20px 20px 22px;
    display:    flex;
    flex-direction: column;
    gap:        6px;
    transform:  translateY(0);
    transition: transform 0.35s ease;
}

/* CTA e excerpt nascosti di default, visibili su hover */
.ild-event-card__excerpt,
.ild-event-card__cta {
    max-height: 0;
    overflow:   hidden;
    opacity:    0;
    transition: max-height 0.4s ease, opacity 0.35s ease;
}

.ild-event-card:hover .ild-event-card__excerpt,
.ild-event-card:hover .ild-event-card__cta {
    max-height: 100px;
    opacity:    1;
}

/* Card featured: excerpt e cta sempre visibili */
.ild-event-card--featured .ild-event-card__excerpt,
.ild-event-card--featured .ild-event-card__cta {
    max-height: 200px;
    opacity:    1;
}

/* ── CATEGORIA ───────────────────────────────────────────── */
.ild-event-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;
}

/* ── TITOLO ──────────────────────────────────────────────── */
.ild-event-card__title {
    font-family: var(--ild-font-serif, 'Playfair Display', serif);
    font-size:   clamp(16px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    margin:      0;
    color:       #fff;
}

.ild-event-card--featured .ild-event-card__title {
    font-size: clamp(22px, 3vw, 34px);
}

.ild-event-card__title a {
    color:       inherit;
    text-decoration: none;
    transition:  color 0.25s ease;
}

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

/* ── EXCERPT ─────────────────────────────────────────────── */
.ild-event-card__excerpt {
    font-family: var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:   13px;
    font-weight: 300;
    color:       rgba(245, 240, 232, 0.70);
    line-height: 1.6;
    margin:      0;
}

/* ── META (location + data) ──────────────────────────────── */
.ild-event-card__meta {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
    margin-top:  2px;
}

.ild-event-card__location,
.ild-event-card__date {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    font-family:    var(--ild-font-sans, 'DM Sans', sans-serif);
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.5px;
    color:          rgba(245, 240, 232, 0.55);
    line-height:    1;
}

.ild-event-card__location svg,
.ild-event-card__date svg {
    flex-shrink: 0;
    opacity:     0.6;
}

/* ── CTA ─────────────────────────────────────────────────── */
.ild-event-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: 3px;
    text-transform: uppercase;
    color:          var(--ild-gold, #c9a84c);
    text-decoration: none;
    margin-top:     4px;
    transition:     gap 0.25s ease, color 0.25s ease;
}

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

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

/* ── LAYOUT LIST ─────────────────────────────────────────── */
.ild-events-list {
    grid-template-columns: 1fr;
    gap:                   2px;
}

.ild-events-list .ild-event-card {
    aspect-ratio: 21 / 6;
    grid-column:  span 1 !important;
}

.ild-events-list .ild-event-card__body {
    flex-direction: row;
    align-items:    center;
    gap:            24px;
    padding:        20px 28px;
}

.ild-events-list .ild-event-card__title {
    font-size:  20px;
    flex:       1;
}

.ild-events-list .ild-event-card__excerpt { display: none; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ild-events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ild-event-card--featured {
        grid-column: span 2;
    }
    .ild-event-card__sizer {
        padding-top:    75%;
    }
}

@media (max-width: 600px) {
    .ild-events-grid {
        grid-template-columns: 1fr;
        gap:                   4px;
    }
    .ild-event-card,
    .ild-event-card--featured {
        grid-column:  span 1;
        aspect-ratio: 4 / 3;
    }
    /* Su mobile tutti i contenuti sempre visibili */
    .ild-event-card__excerpt,
    .ild-event-card__cta {
        max-height: 200px;
        opacity:    1;
    }
    .ild-events-list .ild-event-card {
        aspect-ratio: 4 / 3;
    }
    .ild-events-list .ild-event-card__body {
        flex-direction: column;
        align-items:    flex-start;
    }
}