/* ============================================================
   WC Live Wallpapers — griglia + card animate
   Caricato solo sul template page-live-wallpapers.
   ============================================================ */

.wc-live-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 280px));
    gap: 28px;
    justify-content: space-between;
}

.wc-live-grid--2col { grid-template-columns: repeat(2, minmax(0, 280px)); }
.wc-live-grid--3col { grid-template-columns: repeat(3, minmax(0, 280px)); }
.wc-live-grid--4col { grid-template-columns: repeat(4, minmax(0, 230px)); }

@media (max-width: 960px) {
    .wc-live-grid,
    .wc-live-grid--3col,
    .wc-live-grid--4col { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 520px) {
    .wc-live-grid,
    .wc-live-grid--2col,
    .wc-live-grid--3col,
    .wc-live-grid--4col { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.wc-live-grid__item { margin: 0; }

/* ------- Card ------- */
.wc-card-live {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 19.5;
    border-radius: 20px;
    overflow: hidden;
    background: #0c1018;
    box-shadow: 0 6px 18px rgba(15, 29, 54, .12);
    isolation: isolate;
}

.wc-card-live__link {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: inherit;
}

.wc-card-live__img,
.wc-card-live__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.wc-card-live__img--ph {
    background: linear-gradient(135deg, #1a1f2b 0%, #0c1018 100%);
}

/* Quando il video è pronto, l'immagine sotto scompare con un cross-fade */
.wc-card-live__video {
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 1;
    pointer-events: none;
}

.wc-card-live.is-video-ready .wc-card-live__video {
    opacity: 1;
}

/* Heart preferiti */
.wc-card-live .wc-card-wp__fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
}

.wc-card-live .wc-card-wp__fav:hover { transform: scale(1.08); background: rgba(0, 0, 0, .55); }
.wc-card-live .wc-card-wp__fav[aria-pressed="true"] { color: var(--wc-brand, #FB2C57); }
.wc-card-live .wc-card-wp__fav .wc-heart-icon { font-size: 18px; line-height: 1; }

/* Hover lift */
@media (hover: hover) {
    .wc-card-live { transition: transform .25s ease, box-shadow .25s ease; }
    .wc-card-live:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 29, 54, .18); }
}

/* Reduced motion: niente autoplay video se l'utente ha richiesto meno animazioni */
@media (prefers-reduced-motion: reduce) {
    .wc-card-live__video { display: none; }
}

/* Empty state */
.wc-page-live .wc-empty {
    text-align: center;
    padding: 60px 16px;
    color: var(--wc-muted, #57667d);
    font-size: 15px;
}