/* ============================================================
   Modulo SLOTS — stile placeholder ADV + comportamenti sticky/skin.
   Proprietà: modulo SLOTS (inc/slots.php). Vedi CONVENZIONI_V1.md.
   ============================================================ */

/* ---------- Base placeholder: box grigio tratteggiato, sobrio ---------- */
.tu-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px auto;
  max-width: var(--tu-max);
  min-height: 90px;
  background: #f7f7f8;
  border: 1px dashed #c6c6c6;
  color: var(--tu-muted);
  font-family: Arial, Helvetica, sans-serif;
}
.tu-slot-tag {
  padding: 8px 12px;
  font-size: .68rem;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .6px;
  user-select: none;
}
.tu-slot-tag em {
  display: block;
  font-style: normal;
  opacity: .65;
  letter-spacing: .3px;
  text-transform: none;
}

/* "x" di chiusura (barre fisse e layer) */
.tu-slot-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--tu-border);
  border-radius: 50%;
  background: #fff;
  color: var(--tu-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.tu-slot-close:hover { background: #eee; }
.tu-slot.tu-slot-closed { display: none !important; }

/* ---------- Banner header/contenuto: min-height indicative ---------- */
.tu-slot--billboard-header       { min-height: 250px; }
.tu-slot--header-adv-menu        { min-height: 90px; }
.tu-slot--prima-del-contenuto    { min-height: 90px; }
.tu-slot--special-category-top,
.tu-slot--special-category-bottom { min-height: 90px; }

.tu-slot--in-content,
.tu-slot--fine-articolo          { min-height: 280px; max-width: 640px; }
.tu-slot--paywall-fine-articolo  { min-height: 140px; }
.tu-slot--after-content          { min-height: 120px; }

/* Sidebar */
.tu-slot--sidebar-1 { min-height: 600px; max-width: 300px; }
.tu-slot--sidebar-2 { min-height: 250px; max-width: 300px; }

/* Video preroll: box scuro 16:9 */
.tu-slot--video-preroll {
  max-width: 640px;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: #2b2b2b;
  border-color: #555;
  color: #ddd;
}

/* footer-script: contenitore tecnico, mai visibile */
.tu-slot--footer-script { display: none; }

/* ---------- Barre fisse ---------- */
/* top-header-fisso: barra sticky top sottile */
.tu-slot--top-header-fisso {
  position: sticky;
  top: 0;
  z-index: 900;
  margin: 0;
  max-width: none;
  min-height: 50px;
  background: #efefef;
  border-width: 0 0 1px;
}
.tu-slot--top-header-fisso .tu-slot-tag { padding: 4px 34px; }

/* footer-fisso: barra sticky bottom */
.tu-slot--footer-fisso {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  margin: 0;
  max-width: none;
  min-height: 60px;
  background: #efefef;
  border-width: 1px 0 0;
}
body.tu-has-footer-fisso { padding-bottom: 70px; }

/* ---------- Skin ---------- */
/* skin (background): layer fisso dietro al contenuto */
.tu-slot--skin {
  position: fixed;
  inset: 0;
  z-index: -1;
  margin: 0;
  max-width: none;
  min-height: 0;
  align-items: flex-start;
  background: repeating-linear-gradient(45deg, #f2f2f3 0 18px, #ececee 18px 36px);
  border: 0;
}
.tu-slot--skin .tu-slot-tag { padding-top: 14px; }

/* Con skin attiva il wrapper contenuto si stringe a 1000px (come oggi
   sui siti del gruppo) e le aree di contenuto tornano opache. */
body.tu-skin-active { --tu-max: 1000px; }
body.tu-skin-active .tu-masthead,
body.tu-skin-active main.tu-wrap {
  background: var(--tu-bg);
}
body.tu-skin-active main.tu-wrap { box-shadow: 0 0 18px rgba(0, 0, 0, .06); }

/* skin-sx / skin-dx: colonne sticky 192×630 ai lati del wrapper,
   visibili solo su viewport ≥ 1400px */
.tu-slot--skin-sx,
.tu-slot--skin-dx {
  display: none;
  position: fixed;
  top: 110px;
  z-index: 5;
  margin: 0;
  width: 192px;
  min-height: 630px;
  background: #f7f7f8;
}
.tu-slot--skin-sx { left: calc(50% - var(--tu-max) / 2 - 204px); }
.tu-slot--skin-dx { left: calc(50% + var(--tu-max) / 2 + 12px); }
@media (min-width: 1400px) {
  .tu-slot--skin-sx,
  .tu-slot--skin-dx { display: flex; }
}

/* ---------- popup-layer: boxino angolo basso destra, non bloccante ---------- */
.tu-slot--popup-layer {
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 950;
  margin: 0;
  width: 300px;
  min-height: 250px;
  background: #fff;
  border: 1px solid var(--tu-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
  .tu-slot--billboard-header { min-height: 120px; }
  .tu-slot--in-content,
  .tu-slot--fine-articolo { min-height: 250px; }
  .tu-slot--sidebar-1 { min-height: 250px; }
  .tu-slot--popup-layer { right: 8px; bottom: 70px; width: 260px; min-height: 200px; }
}