/* Component: card-wallpaper — riutilizzabile ovunque la card è usata (home, single, archive, page templates) */

/* Design tokens del componente (devono vivere qui, non in wc-home.css, altrimenti
   nelle pagine senza wc-home.css il bottone fav perde il colore "pressed"). */
:root{
    --wc-fav-bg: rgba(0,0,0,.40);
    --wc-fav-bg-active: #ff3366;
}

/* Heart icon (Fontello) usato in card-wallpaper.php */
.wc-heart-icon{
    display:inline-flex;align-items:center;justify-content:center;
    font-size:16px;line-height:1;
    pointer-events:none;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
/* Reset dei margin/width imposti dal selettore globale [class^="icon-"]:before
   di fontello.css: dentro il bottone preferiti vogliamo il glyph perfettamente
   centrato, niente offset orizzontali. */
.wc-card-wp__fav .wc-heart-icon::before{
    width:auto;margin:0;text-align:center
}
/* ============ CARD WALLPAPER ============ */
.wc-card-wp{position:relative;aspect-ratio:9/19.5;border-radius:18px;overflow:hidden;background:#0f1d36;border:1px solid #e4e8ee;box-shadow:var(--wc-shadow-sm,0 1px 3px rgba(15,29,54,.06));transition:transform .22s ease,box-shadow .22s ease}
.wc-card-wp:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,29,54,.16)}
/* Varianti device: aspect-ratio diverso, larghezza data dal grid.
   Caption più compatta su tablet/desktop per non coprire l'immagine. */
.wc-card-wp--tablet  {aspect-ratio:1/1}
.wc-card-wp--desktop {aspect-ratio:16/9}
/* Placeholder durante il fetch: stesso aspect-ratio della card target → niente layout shift. */
.wc-card-wp--placeholder{background:linear-gradient(135deg,#1f2a44,#0f1d36);animation:wcPulse 1.4s ease-in-out infinite;cursor:default;pointer-events:none}
@keyframes wcPulse{0%,100%{opacity:.55}50%{opacity:.85}}
.wc-card-wp--tablet  .wc-card-wp__bar{height:64px;padding:8px 14px}
.wc-card-wp--tablet  .wc-card-wp__title{font-size:15px}
.wc-card-wp--tablet  .wc-card-wp__meta {font-size:11px;margin-top:3px}
.wc-card-wp--desktop .wc-card-wp__bar{height:56px;padding:6px 14px}
.wc-card-wp--desktop .wc-card-wp__title{font-size:14px}
.wc-card-wp--desktop .wc-card-wp__meta {font-size:11px;margin-top:2px}
/* Fav button proporzionato al device variant (tablet 1:1 e desktop 16:9 hanno card
   più "basse" rispetto al phone 9:19.5: il cerchio default 48px sembra sproporzionato). */
.wc-card-wp--tablet  .wc-card-wp__fav,
.wc-card-wp--desktop .wc-card-wp__fav{width:38px;height:38px;top:8px;right:8px}
.wc-card-wp--tablet  .wc-heart-icon,
.wc-card-wp--desktop .wc-heart-icon{font-size:17px}
.wc-card-wp__link{display:block;height:100%;color:inherit;text-decoration:none}
.wc-card-wp__media{position:relative;margin:0;height:100%;background:#0a1322;overflow:hidden}
/* picture/img sempre full-bleed: anche se l'immagine sorgente è più piccola della card,
   object-fit:cover la fa riempire (crop OK). */
.wc-card-wp__media>picture,
.wc-card-wp__media>picture>source,
.wc-card-wp__media>picture>img{position:absolute;inset:0;width:100%;height:100%}
.wc-card-wp__img,.wc-card-wp__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:0;transition:transform .5s ease}
.wc-card-wp:hover .wc-card-wp__img,.wc-card-wp:hover .wc-card-wp__media img{transform:scale(1.03)}
.wc-card-wp__img--placeholder{background:linear-gradient(135deg,#1f2a44,#0f1d36)}

/* Footer blurred — replica dello stile vecchio tema (.wc-card-bar):
   blur 14px, sfondo scuro a bassa opacità, highlight inset top. */
.wc-card-wp__bar{
    position:absolute;left:0;right:0;bottom:0;
    height:100px;padding:12px 14px 14px;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    text-align:left;
    background:rgba(20,20,20,.20);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
    color:#fff
}
.wc-card-wp__title{margin:0;font-size:18px;font-weight:700;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-card-wp__meta{margin:6px 0 0;font-size:13px;font-weight:500;color:#e2e8f0;text-transform:uppercase;letter-spacing:.04em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Heart button — liquid glass replicato dal vecchio tema */
.wc-card-wp__fav{
    position:absolute;top:10px;right:10px;
    width:48px;height:48px;border-radius:999px;
    background:rgba(82,82,82,.22);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:
        0 4px 20px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -8px 18px rgba(255,255,255,.18);
    display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
    transition:transform .15s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease;
    z-index:2
}
.wc-card-wp__fav:hover{transform:scale(1.06);background:rgba(82,82,82,.32)}
/* Heart icon (fontello). Default = .icon-heart (\e848); pressed swap a heart-3 (\e84c). */
.wc-heart-icon{font-size:22px;line-height:1;font-weight:600;display:inline-block;width:1em;height:1em}
.wc-card-wp__fav[aria-pressed="true"] .wc-heart-icon::before{content:"\e84c"}
.wc-card-wp__fav[aria-pressed="true"]{background:var(--wc-fav-bg-active)}

/* --- Scaling proporzionale per layout 4-col (card più strette) --- */
@media (min-width:641px){
    .wc-latest__grid--cols-4 .wc-card-wp__fav{width:38px;height:38px;top:8px;right:8px}
    .wc-latest__grid--cols-4 .wc-heart-icon{font-size:17px}
    .wc-latest__grid--cols-4 .wc-card-wp__bar{padding:10px 14px 14px}
    .wc-latest__grid--cols-4 .wc-card-wp__title{font-size:15px}
    .wc-latest__grid--cols-4 .wc-card-wp__meta{font-size:11px;margin-top:4px}
    /* Tablet/desktop variant — card già più piccola, riduco ancora */
    .wc-latest__grid--cols-4 .wc-card-wp--tablet .wc-card-wp__title,
    .wc-latest__grid--cols-4 .wc-card-wp--desktop .wc-card-wp__title{font-size:13px}
    .wc-latest__grid--cols-4 .wc-card-wp--tablet .wc-card-wp__meta,
    .wc-latest__grid--cols-4 .wc-card-wp--desktop .wc-card-wp__meta{font-size:10px}
}
/* Variante 5-6 col: ulteriore scaling per coerenza */
@media (min-width:641px){
    .wc-latest__grid--cols-5 .wc-card-wp__fav,
    .wc-latest__grid--cols-6 .wc-card-wp__fav{width:34px;height:34px;top:6px;right:6px}
    .wc-latest__grid--cols-5 .wc-heart-icon,
    .wc-latest__grid--cols-6 .wc-heart-icon{font-size:15px}
    .wc-latest__grid--cols-5 .wc-card-wp__title,
    .wc-latest__grid--cols-6 .wc-card-wp__title{font-size:13px}
    .wc-latest__grid--cols-5 .wc-card-wp__meta,
    .wc-latest__grid--cols-6 .wc-card-wp__meta{font-size:10px;margin-top:3px}
}
.wc-card-wp__fav[aria-pressed="true"] .wc-card-wp__fav-icon{fill:#fff}
/* ============ VIDEO LIVE su wc-card-wp ============
   Quando la card è marcata con [data-video] o [data-video2] (vedi
   cards/card-wallpaper.php param video_primary/video_fallback), il JS
   wc-live-cards.js inietta un <video class="wc-card-live__video"> dentro
   .wc-card-wp__link. Lo posizioniamo absolute sopra l'immagine con cross-fade. */
.wc-card-wp[data-video] .wc-card-wp__link,
.wc-card-wp[data-video2] .wc-card-wp__link { position: relative; }
.wc-card-wp .wc-card-live__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}
.wc-card-wp.is-video-ready .wc-card-live__video { opacity: 1; }
/* La __bar (titolo/meta blurred) deve restare sopra il video */
.wc-card-wp .wc-card-wp__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.wc-card-wp .wc-card-wp__fav { z-index: 3; }

/* Grid container per .wc-card-wp — usato in home (Latest), single post (Collections), archive, page templates. */
.wc-latest__grid{
    display:grid;gap:18px;
    grid-template-columns:repeat(var(--wc-latest-cols,3),minmax(0,1fr))
}
.wc-latest__grid--cols-1{--wc-latest-cols:1}
.wc-latest__grid--cols-2{--wc-latest-cols:2}
.wc-latest__grid--cols-3{--wc-latest-cols:3}
.wc-latest__grid--cols-4{--wc-latest-cols:4}
.wc-latest__grid--cols-5{--wc-latest-cols:5}
.wc-latest__grid--cols-6{--wc-latest-cols:6}
@media (max-width:1280px){.wc-latest__grid--cols-4{--wc-latest-cols:3}}
@media (max-width:1024px){.wc-latest__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px) {.wc-latest__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:480px) {.wc-latest__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* Cols-1 e cols-2 espliciti vincono sui breakpoint che altrimenti forzano 2/3 cols. */
.wc-latest__grid--cols-1{grid-template-columns:1fr !important}
@media (max-width:1024px){.wc-latest__grid--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Heart size modifiers (override default 38/22px). */
.wc-card-wp--heart-small  .wc-card-wp__fav { width:28px; height:28px; top:6px;  right:6px;  }
.wc-card-wp--heart-small  .wc-heart-icon   { font-size:14px; }
.wc-card-wp--heart-large  .wc-card-wp__fav { width:48px; height:48px; top:10px; right:10px; }
.wc-card-wp--heart-large  .wc-heart-icon   { font-size:26px; }

/* Horizontal scroll layout (alternative al grid). */
.wc-cards-hscroll {
    display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
    scrollbar-width:none;
    padding:4px 0 12px;
}
.wc-cards-hscroll::-webkit-scrollbar { display:none; }
.wc-cards-hscroll > .wc-card-wp { flex:0 0 auto; }
.wc-cards-hscroll.wc-cards-hscroll--phone   > .wc-card-wp { width:180px; }
.wc-cards-hscroll.wc-cards-hscroll--tablet  > .wc-card-wp { width:240px; }
.wc-cards-hscroll.wc-cards-hscroll--desktop > .wc-card-wp { width:320px; }
/* Compressione equivalente a cols-4: heart + titolo + bar più piccoli. */
.wc-cards-hscroll .wc-card-wp__fav  { width:38px; height:38px; top:8px; right:8px; }
.wc-cards-hscroll .wc-heart-icon    { font-size:17px; }
.wc-cards-hscroll .wc-card-wp__bar  { padding:10px 14px 14px; }
.wc-cards-hscroll .wc-card-wp__title{ font-size:15px; }
.wc-cards-hscroll .wc-card-wp__meta { font-size:11px; margin-top:4px; }
.wc-cards-hscroll .wc-card-wp--tablet .wc-card-wp__title,
.wc-cards-hscroll .wc-card-wp--desktop .wc-card-wp__title { font-size:13px; }

/* Section wrapper per shortcode [wc_wallpapers]. */
.wc-wallpapers-block { margin: 0 0 36px; }
.wc-wallpapers-block__title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--wc-ink, #0f1d36); }
.wc-wallpapers-block__subtitle { margin: 0 0 18px; color: var(--wc-mute, #57667d); font-size: 14px; }
.wc-wallpapers-block__empty { margin: 24px 0; text-align: center; color: var(--wc-mute, #57667d); }

/* /search-page — search box full width */
.wc-page-search__search { margin: 0 0 36px; }
.wc-page-search__search .wc-search,
.wc-page-search__search .wc-search__form,
.wc-page-search__search .wc-search__field,
.wc-page-search__search .wc-search__input { width: 100%; max-width: none; }
.wc-page-search__search .wc-search__field { flex: 1; }

/* Sezioni page-search header */
.wc-page-search .wc-section-header { margin: 0 0 16px; }
.wc-page-search .wc-section-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--wc-ink, #0f1d36); }
.wc-page-search .wc-section-subtitle { margin: 0; color: var(--wc-mute, #57667d); font-size: 14px; }
.wc-page-search__featured,
.wc-page-search__top,
.wc-page-search__categories,
.wc-page-search__devices { margin: 32px 0; }