/* RC88 · Fotografie della sezione «Il territorio».
   Immagini di Wikipedia e Wikimedia Commons: tessere della Home, elenchi,
   scheda principale e galleria. Stanno in un foglio a parte perché
   territorio.css è già lungo. */

.territorio-home-photo,
.ter-card-photo {
  display: block;
  overflow: hidden;
  background: #efe3cd;
}

.territorio-home-photo[hidden],
.ter-card-photo[hidden] {
  display: none !important;
}

.territorio-home-photo img,
.ter-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Tessere della Home ──────────────────────────────────────────────── */

.territorio-home-photo {
  height: 104px;
  margin: -14px -14px 6px;
  border-radius: 10px 10px 0 0;
}

.territorio-home-tile {
  overflow: hidden;
}

.territorio-home-tile:hover .territorio-home-photo img {
  transform: scale(1.04);
}

.territorio-home-photo img {
  transition: transform .4s ease;
}

/* ── Elenchi ─────────────────────────────────────────────────────────── */

.ter-card {
  overflow: hidden;
}

.ter-card-photo {
  height: 152px;
  margin: -16px -17px 6px;
  border-radius: 14px 14px 0 0;
}

.ter-card:hover .ter-card-photo img {
  transform: scale(1.03);
}

.ter-card-photo img {
  transition: transform .45s ease;
}

/* ── Scheda: credito della fotografia ────────────────────────────────── */

.ter-photo-credit {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(20, 14, 8, .55);
  color: #fff7e6;
  font: 700 10px/1.25 system-ui, sans-serif;
  letter-spacing: .01em;
}

.ter-photo-credit a {
  color: #ffe0a3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 720px) {
  .ter-card-photo { height: 132px; }
  .territorio-home-photo { height: 86px; }
}

@media (max-width: 560px) {
  .territorio-home-photo {
    height: 78px;
    margin: -12px -12px 5px;
    border-radius: 8px 8px 0 0;
  }
  .ter-photo-credit { font-size: 9.5px; padding: 3px 7px; }
}

/* Copertina dell'elenco: una fascia fotografica sopra il titolo di sezione. */
.ter-hub-photo {
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 14px;
  background: #efe3cd;
  aspect-ratio: 21 / 9;
}

.ter-hub-photo[hidden] {
  display: none !important;
}

.ter-hub-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 560px) {
  .ter-hub-photo {
    margin-bottom: 12px;
    border-radius: 10px;
    aspect-ratio: 16 / 9;
  }
}