/**
 * lv-ad-placeholder — segnaposto per slot adv non erogati.
 *
 * Markup atteso (emesso da `lv_ad_placeholder()`):
 *   <div class="lv-ad-placeholder lv-ad-placeholder--{variant}" role="presentation" aria-hidden="true">
 *     <span class="lv-ad-placeholder__pattern"></span>
 *     <img class="lv-ad-placeholder__logo" src="logo.svg" alt="">
 *   </div>
 *
 * Dimensionamento: il placeholder riempie il container parent (lo slot adv).
 * Le unità `cqw` scalano logo e tile della filigrana sullo slot, non sul viewport.
 */

.lv-ad-placeholder {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 50px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--lv-adph-gradient);
}

.lv-ad-placeholder__pattern {
  position: absolute;
  inset: 0;
  background-image: url("pattern.svg");
  background-repeat: repeat;
  background-size: var(--lv-adph-tile) var(--lv-adph-tile);
  opacity: var(--lv-adph-pattern-opacity);
  pointer-events: none;
}

/* Specificità 0,2,0 — necessaria per battere regole `img` ereditate dal
 * componente parent quando il placeholder è wrappato in `.adv-side`
 * (`core.css`) o `.category-list__adv` (`categoria.css`), che impongono
 * `.<wrap> img { width: 300px }` mirando alle vere immagini banner. Senza
 * questo bump il logo veniva forzato a 300px (capped da `max-width: 60%`
 * → 180px) e risultava sproporzionato rispetto al taglio del placeholder. */
.lv-ad-placeholder > .lv-ad-placeholder__logo {
  position: relative;
  width: var(--lv-adph-logo-size);
  max-width: 60%;
  height: auto;
}

/* Varianti — tutte parametrizzate dalle stesse 4 variabili. */

.lv-ad-placeholder--dark {
  --lv-adph-gradient: linear-gradient(180deg, rgba(67,106,135,1) 0%, rgba(26,50,69,1) 100%);
  --lv-adph-tile: clamp(40px, 12cqw, 80px);
  --lv-adph-pattern-opacity: 0.10;
  --lv-adph-logo-size: clamp(80px, 28cqw, 240px);
}

.lv-ad-placeholder--dark .lv-ad-placeholder__logo {
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.45));
}

.lv-ad-placeholder--light {
  --lv-adph-gradient: linear-gradient(180deg, rgba(239,239,239,1) 0%, rgba(183,183,183,1) 100%);
  --lv-adph-tile: clamp(50px, 14cqw, 100px);
  --lv-adph-pattern-opacity: 0.15;
  --lv-adph-logo-size: clamp(80px, 28cqw, 240px);
}

/* Centratura orizzontale dei placeholder con taglio esplicito.
   Quando `lv_ad_placeholder()` riceve `format` (o `format` + `format_mobile`)
   il wrapper ha `width: Wpx` inline (o via var CSS nel dual-format) +
   `max-width: 100%`. Senza margin auto, in un contenitore parent più largo
   resta left-aligned. L'attributo `data-lv-ad-format` è presente in entrambi
   i casi (single e dual), quindi una sola regola copre tutto. */
/* Garantisce il centraggio orizzontale dentro QUALSIASI tipo di parent:
   `margin: auto` per block normali, `align-self/justify-self: center`
   per flex/grid items (dove margin auto puo' essere ignorato se l'item
   ha flex-basis o grid-column non centrati). `!important` per superare
   regole tema locali che a volte impongono margin-left: 0 sui wrapper
   sidebar (es. `.adv-side`, `.spodcast-list__adv`). */
.lv-ad-placeholder[data-lv-ad-format] {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center;
  justify-self: center;
}

/* ========================================
   Visibilità per viewport (parametro `side` del helper)
   ========================================
   Quando `lv_ad_placeholder()` riceve `side='desktop'` o `side='mobile'`
   (esplicito o auto-derivato da agency_slot), l'helper aggiunge una di
   queste classi. Il breakpoint 768px è allineato col resto del helper
   (dual-format CSS, tema laverita2026). Usiamo `display: none !important`
   per superare eventuali regole specifiche nei contesti dove il
   placeholder è wrappato (es. .article-sidebar__adv, .footer__floorad,
   .category-list__adv) che potrebbero forzare display block. */

.lv-ad-placeholder--desktop-only {
  /* default: visibile (eredita display dalla classe base). Nasconde sotto 768px. */
}

@media (max-width: 767.98px) {
  .lv-ad-placeholder--desktop-only {
    display: none !important;
  }
}

.lv-ad-placeholder--mobile-only {
  /* default: visibile (eredita). Nasconde sopra o uguale a 768px. */
}

@media (min-width: 768px) {
  .lv-ad-placeholder--mobile-only {
    display: none !important;
  }
}

/* ========================================
   Dual-format desktop + mobile
   ========================================
   Attivo quando `lv_ad_placeholder()` riceve sia `format` che `format_mobile`
   (vedi `inc/lv-ad-placeholder.php`). L'helper emette 6 CSS custom properties
   sull'elemento (`--lv-adph-{w,h,ar,logo-size}-{d,m}`) + l'attributo
   `data-lv-ad-format-mobile`. Qui sotto applichiamo la coppia mobile sotto i
   768px e la coppia desktop sopra. Le regole `width: 100%` e `height: 100%`
   della classe base `.lv-ad-placeholder` sono sovrascritte (`width` esplicito
   + `height: auto` + `aspect-ratio` regola l'altezza). Breakpoint 768px
   allineato col tema `laverita2026` (`sm`/`md` cutoff). */
.lv-ad-placeholder[data-lv-ad-format-mobile] {
  /* width: var(--lv-adph-w-m); */
  max-width: 100%;
  aspect-ratio: var(--lv-adph-ar-m);
  height: auto;
  --lv-adph-logo-size: var(--lv-adph-logo-size-m);
}

@media (min-width: 768px) {
  .lv-ad-placeholder[data-lv-ad-format-mobile] {
    width: var(--lv-adph-w-d);
    aspect-ratio: var(--lv-adph-ar-d);
    --lv-adph-logo-size: var(--lv-adph-logo-size-d);
  }
}