/* RC88 · Riquadro d'ingresso alle quattro sezioni del territorio.
   Chiude il percorso della Home: stessa larghezza degli altri banner, carta
   chiara, quattro tessere con il colore della sezione e una fotografia per
   ciascuna. */

/* La Home è una colonna ordinata (home/editorial-hierarchy.css): senza una
   voce d'ordine propria il riquadro sarebbe finito in cima alla pagina. 49 lo
   mette in fondo, subito prima del Club dei Piccoli Esploratori (50), dei
   Racconti (51) e dell'arte (52). */
main#top > .territorio-home {
  order: 49;
}

.territorio-home {
  position: relative;
  box-sizing: border-box;
  width: min(var(--home-box-max, 1120px), calc(100% - (var(--home-box-gutter, 16px) * 2)));
  max-width: var(--home-box-max, 1120px);
  margin: var(--home-box-gap, 18px) auto;
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid rgba(83, 61, 32, .18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 214, 138, .34), transparent 40%),
    linear-gradient(150deg, #fffdf8 0%, #fdf5e4 60%, #f7e8c9 100%);
  box-shadow: 0 12px 30px rgba(63, 39, 12, .10);
  color: #2c241c;
  text-align: left;
}

.territorio-home-head { max-width: 70ch; }

.territorio-home-eyebrow {
  margin: 0 0 7px;
  color: #a56a18;
  font: 900 10.5px/1 system-ui, sans-serif;
  letter-spacing: .16em;
}

.territorio-home-title {
  margin: 0;
  color: #2c241c;
  font: 900 clamp(1.45rem, 3.4vw, 2.05rem)/1.06 Georgia, serif;
}

.territorio-home-lead {
  margin: 9px 0 0;
  color: #6f6152;
  font: 500 13.5px/1.55 system-ui, sans-serif;
}

.territorio-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.territorio-home-tile {
  --tile: #a56a18;
  position: relative;
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 132px;
  padding: 14px 14px 34px;
  border: 1px solid rgba(83, 61, 32, .16);
  border-top: 4px solid var(--tile);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(63, 39, 12, .06);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.territorio-home-tile:hover {
  transform: translateY(-3px);
  background: #fffdf7;
  box-shadow: 0 14px 28px rgba(63, 39, 12, .14);
}

.territorio-home-tile:focus-visible {
  outline: 3px solid var(--tile);
  outline-offset: 3px;
}

.territorio-home-tile.is-persone { --tile: #a8432b; }
.territorio-home-tile.is-natura { --tile: #3f6b47; }
.territorio-home-tile.is-sapori { --tile: #a56a18; }
.territorio-home-tile.is-feste { --tile: #2f5f6a; }

.territorio-home-glyph {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tile) 14%, #fff);
  color: var(--tile);
  font: 900 14px/1 Georgia, serif;
}

.territorio-home-tile-title {
  color: #2c241c;
  font: 900 1.02rem/1.15 Georgia, serif;
}

.territorio-home-tile-text {
  color: #6f6152;
  font: 500 11.5px/1.4 system-ui, sans-serif;
}

.territorio-home-arrow {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: var(--tile);
  font-weight: 900;
}

@media (max-width: 860px) {
  .territorio-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .territorio-home {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .territorio-home-grid { gap: 8px; }
  .territorio-home-tile { min-height: 118px; padding: 12px 12px 32px; }
  .territorio-home-tile-title { font-size: .96rem; }
  .territorio-home-tile-text { font-size: 11px; }
}