/**
 * Hero home (bento): ticker + griglia principale + colonne laterali.
 * Incluso solo sulla home (vedi includes/header.php).
 *
 * Mobile: evita overflow orizzontale (grid/flex min-width:auto, watermark, testi lunghi).
 */


.home-hero-bento {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

.home-bento-grid {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
}

.home-bento-grid > * {
  min-width: 0;
}

/**
 * Colonna articoli accanto all'hero: stessa altezza delle celle in griglia (desktop)
 * e altezze minime coerenti su mobile, così la terza card non collassa a una striscia.
 */
.home-bento-side-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  align-items: stretch;
  align-self: stretch;
}

.home-bento-side-cards > a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 7.25rem;
}

.hb-icon-lg svg,
.hb-icon-lg .cat-icon-emoji {
  width: 22px !important;
  height: 22px !important;
  font-size: 1.1rem !important;
}

.hb-icon-md svg,
.hb-icon-md .cat-icon-emoji {
  width: 19px !important;
  height: 19px !important;
  font-size: 0.95rem !important;
}

.hb-icon-sm svg,
.hb-icon-sm .cat-icon-emoji {
  width: 15px !important;
  height: 15px !important;
  font-size: 0.75rem !important;
}

/* Fix clipping su mobile (emoji/svg possono “tagliarsi” nei box piccoli) */
.hb-icon-tile {
  overflow: visible;
}
.hb-icon-lg,
.hb-icon-md,
.hb-icon-sm {
  line-height: 1;
}
.hb-icon-lg svg,
.hb-icon-md svg,
.hb-icon-sm svg {
  display: block;
}
.hb-icon-lg .cat-icon-emoji,
.hb-icon-md .cat-icon-emoji,
.hb-icon-sm .cat-icon-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Card 1 (s0): watermark più “illuminato” */
.hb-card-s0 .hb-watermark-icon {
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,0.10))
    drop-shadow(0 0 46px rgba(167,139,250,0.10));
}

/* iOS Safari: a volte clippa emoji/SVG dentro box piccoli (baseline/line-box bug).
   Applichiamo un micro-offset e rimuoviamo clip/overflow dal contenitore della card. */
@supports (-webkit-touch-callout: none) {
  .hb-card-s0 {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  .hb-icon-tile { overflow: visible !important; }
}

@media (min-width: 1024px) {
  .home-bento-grid {
    grid-template-columns: 1fr 300px;
  }
}

@media (min-width: 1280px) {
  .home-bento-grid {
    grid-template-columns: 1fr 320px;
  }
}

/* Striscia superiore: nel layer .hb-decor-layer con overflow + rounded-2xl segue l'arco degli angoli */
.hb-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
}

.hb-icon-col {
  box-sizing: border-box;
  width: 72px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border-right: 1px solid rgba(31, 41, 55, 0.55);
}

/* Seconda card hero: icona a sinistra nello spazio della vecchia barra verticale */
.hb-icon-col--side {
  width: 86px;
  padding-left: 14px;
  padding-right: 10px;
}

.hb-icon-col .hb-cat-abbrev {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  /* evita che il testo “resti a metà” quando il font viene rasterizzato piccolo */
  display: block;
  padding-bottom: 1px;
  line-height: 1.35;
}

/* Watermark dietro s0: resta nel layer decor per non sporcare il hit-box */
.hb-watermark-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}