/* Leggibilità dei testi sopra le foto della Regia TV.
   Aggiunge un pannello scuro semi-trasparente dietro al blocco di testo
   (titolo, tipologia, luogo) così resta leggibile su qualsiasi immagine. */

/* ── Schermo intero / display ── */
.display-photo-copy {
  padding: clamp(16px, 2.2vw, 30px) clamp(18px, 2.6vw, 34px) !important;
  border: 1px solid rgba(255, 210, 63, .22) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(6, 9, 30, .42) 0%, rgba(6, 9, 30, .68) 100%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(115%);
  backdrop-filter: blur(7px) saturate(115%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  max-width: calc(100% - clamp(22px, 4vw, 64px) * 2) !important;
  text-wrap: balance;
}

.display-photo-copy h1 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 10px 34px rgba(0, 0, 0, .55) !important;
}

.display-photo-copy p {
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9) !important;
}

/* ── Vista regia classica: foto grande ── */
.regia-visual-copy {
  padding: clamp(14px, 2vw, 26px) clamp(16px, 2.4vw, 30px) !important;
  border: 1px solid rgba(255, 210, 63, .2) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(4, 12, 24, .4) 0%, rgba(4, 12, 24, .7) 100%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.regia-visual-copy strong,
.regia-visual-copy span,
.regia-visual-copy small {
  text-shadow: 0 2px 9px rgba(0, 0, 0, .85) !important;
}

/* ── Box foto laterale (didascalia compatta) ── */
.regia-media-caption {
  right: 6px !important;
  bottom: 6px !important;
  left: 6px !important;
  padding: 12px 12px 10px !important;
  border: 1px solid rgba(255, 210, 63, .18) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(3, 10, 22, .5) 0%, rgba(3, 10, 22, .82) 100%) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .4) !important;
}

.regia-media-caption strong,
.regia-media-caption span {
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9) !important;
}

/* Fallback: se il browser non supporta backdrop-filter, scurisce di più. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .display-photo-copy { background: rgba(6, 9, 30, .72) !important; }
  .regia-visual-copy { background: rgba(4, 12, 24, .74) !important; }
  .regia-media-caption { background: rgba(3, 10, 22, .84) !important; }
}