/* SARDAEVENTI | Fotografie senza ritagli - 26 ottobre 2026
   Una fotografia resta intera: il contenitore segue il rapporto originale.
   Le classi data-media-orientation sono applicate da media-orientation.js dopo
   il caricamento, anche alle immagini inserite in seguito dal CMS. */

/* Immagini grandi: nessuna altezza rigida e nessun crop. */
.hero-main,.inner-feature{height:auto;min-height:0}
.hero-main .hero-image,.inner-feature .inner-feature-image{
  display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;
}
/* Se la testata riceve una fotografia verticale, usa un impaginato editoriale
   con fotografia a sinistra e titoli a destra, mai un banner orizzontale. */
.inner-feature[data-media-orientation="portrait"]{
  display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);
  align-items:center;max-width:1100px;margin-inline:auto;
}
.inner-feature[data-media-orientation="portrait"] .inner-feature-copy{
  position:static;top:auto;left:auto;right:auto;transform:none;
  width:auto;max-width:none;margin:0;padding:35px clamp(24px,5vw,65px);
}
.inner-feature[data-media-orientation="portrait"] .inner-feature-shade{display:none}

/* Anteprime di eventi. Le locandine verticali diventano vere carte verticali. */
.upcoming-photo{width:100%;overflow:visible;background:transparent}
.upcoming-photo img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.upcoming-photo:hover img{transform:none}
.upcoming-grid:has(.upcoming-entry:only-child) .upcoming-entry[data-media-orientation="portrait"]{max-width:390px}
.upcoming-grid .upcoming-entry[data-media-orientation="portrait"] .upcoming-photo{max-width:390px}

/* Lista eventi: la foto verticale usa una colonna stretta, quella orizzontale
   conserva la colonna estesa e la propria altezza naturale. */
.event-row-image{min-height:0;overflow:visible;background:transparent}
.event-row-image img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
.event-row[data-media-orientation="portrait"]{grid-template-columns:minmax(145px,27%) minmax(0,1fr)}

/* Reportage e gallerie: immagini intere a qualsiasi dimensione. */
.reportage-layout[data-media-orientation="portrait"]{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.reportage-lead{overflow:visible}
.reportage-lead img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
.reportage-gallery,.gallery-grid{display:block;columns:3;column-gap:15px}
.reportage-gallery a,.gallery-grid a{display:block;width:100%;margin:0 0 15px;break-inside:avoid;overflow:visible}
.reportage-gallery img,.gallery-grid img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}

/* Le due aree editoriali usano una presentazione diversa a seconda del formato:
   verticale = foto a fianco del testo; orizzontale = foto sopra il testo. */
.cover-bands-grid{align-items:start}
.cover-band{display:flex;flex-direction:column;position:relative;height:auto;min-height:0;overflow:hidden;color:#191919;background:#f5f5f5}
.cover-band>img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;transition:none}
.cover-band:hover>img{transform:none}
.cover-band .cover-gradient{display:none}
.cover-band .cover-band-text{
  position:static;top:auto;left:auto;transform:none;width:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:25px 27px 30px;gap:11px;
}
.cover-band .cover-band-text small{color:#666}
.cover-band .cover-band-text strong{color:#191919;font-size:clamp(27px,2.8vw,42px)}
.cover-band .cover-band-text em{color:#343434}
.cover-band[data-media-orientation="portrait"]{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:stretch}
.cover-band[data-media-orientation="portrait"]>img{align-self:start}
.cover-band[data-media-orientation="portrait"] .cover-band-text{align-self:center;padding:21px clamp(14px,2.1vw,29px)}
.cover-band[data-media-orientation="portrait"] .cover-band-text strong{font-size:clamp(23px,2.5vw,37px)}

/* Foto della pagina Progetto e riquadro Servizi per enti. */
.project-photo{display:block;width:100%;max-width:100%;max-height:none;height:auto;aspect-ratio:auto;object-fit:contain;margin-inline:auto}
.project-photo[data-media-orientation="portrait"]{width:min(100%,550px)}
.wide-feature>img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
.wide-feature[data-media-orientation="portrait"]{
  display:grid;grid-template-columns:minmax(0,41%) minmax(0,1fr);
  align-items:stretch;background:#f5f5f5;color:#191919;
}
.wide-feature[data-media-orientation="portrait"]:after{display:none}
.wide-feature[data-media-orientation="portrait"]>span{
  position:static;left:auto;top:auto;transform:none;align-self:center;
  padding:30px clamp(22px,5vw,62px);color:#191919;
}
.wide-feature[data-media-orientation="portrait"]>span strong{color:#444}

/* Schede: prima immagine e locandine senza taglio, anche se sono verticali. */
.article-lead-photo{display:flex;justify-content:center;align-items:flex-start}
.article-lead-photo>img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
.article-lead-photo[data-media-orientation="portrait"]>img{width:min(100%,575px)}
.article-poster img{display:block;width:100%;max-width:440px;height:auto;max-height:none;object-fit:contain}

/* Immagini dei post Facebook: lo spazio prende la dimensione reale della foto,
   non ritaglia un quadrato o un panorama fittizio. */
.facebook-slide-track{align-items:flex-start}
.facebook-slide{align-self:flex-start}
.facebook-card-body{min-height:0;flex:0 0 auto}
.facebook-card-media{display:block;width:100%;height:auto;min-height:0;aspect-ratio:auto;overflow:visible;background:transparent}
.facebook-card-photo{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
.facebook-card-no-photo{display:flex;align-items:center;justify-content:center;min-height:190px;background:#f4f4f4;width:100%}

/* Mobile: anche l'hero diventa foto intera sopra + titolo sotto,
   evitando di dover ingrandire/tagliare la foto per sovrapporre il testo. */
@media(max-width:850px){
  .hero-main .hero-shade,.inner-feature .inner-feature-shade{display:none}
  .hero-main .hero-copy,.inner-feature .inner-feature-copy,
  .inner-feature[data-media-orientation="portrait"] .inner-feature-copy{
    position:static;top:auto;bottom:auto;left:auto;right:auto;
    transform:none;width:min(calc(100% - 40px),var(--max));max-width:var(--max);
    margin-inline:auto;padding:30px 0 34px;
  }
  .inner-feature,.inner-feature[data-media-orientation="portrait"]{display:block;max-width:none}
  .reportage-layout[data-media-orientation="portrait"]{grid-template-columns:1fr}
  .reportage-lead[data-media-orientation="portrait"]{max-width:460px}
  .reportage-layout[data-media-orientation="portrait"] .reportage-lead{max-width:460px;margin-inline:auto}
}
@media(max-width:620px){
  .hero-main .hero-image,.inner-feature .inner-feature-image{height:auto;min-height:0;max-height:none}
  .hero-main .hero-copy,.inner-feature .inner-feature-copy,
  .inner-feature[data-media-orientation="portrait"] .inner-feature-copy{
    width:min(calc(100% - 28px),var(--max));padding:24px 0 29px;
  }
  .upcoming-grid:has(.upcoming-entry:only-child) .upcoming-entry[data-media-orientation="portrait"]{max-width:390px}
  .event-row[data-media-orientation="portrait"]{grid-template-columns:1fr}
  .event-row[data-media-orientation="portrait"] .event-row-image{max-width:285px}
  .reportage-gallery,.gallery-grid{columns:2;column-gap:9px}
  .reportage-gallery a,.gallery-grid a{margin-bottom:9px}
  .cover-band[data-media-orientation="portrait"]{grid-template-columns:minmax(0,41%) minmax(0,1fr)}
  .cover-band .cover-band-text{padding:20px 21px 24px}
  .cover-band[data-media-orientation="portrait"] .cover-band-text{padding:16px 12px}
  .cover-band[data-media-orientation="portrait"] .cover-band-text strong{font-size:clamp(20px,6vw,27px)}
  .wide-feature[data-media-orientation="portrait"]{grid-template-columns:1fr}
  .wide-feature[data-media-orientation="portrait"]>img{max-width:430px;margin-inline:auto}
  .wide-feature[data-media-orientation="portrait"]>span{padding:25px 24px 30px}
  .project-photo[data-media-orientation="portrait"]{width:min(100%,500px)}
}