/*
  Ottimizzazioni CSS per Performance Monitor
  Applicare dopo le modifiche al template HTML
*/

/* ============================================
   IMMAGINE LCP - Cover principale
   ============================================ */

.ncr-cover-img {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #f0f0f0; /* Placeholder color mentre carica */
}

.ncr-cover-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  /* Evita CLS durante il caricamento */
  min-height: 300px;
}

/* Responsive height */
@media (max-width: 768px) {
  .ncr-cover-img img {
    min-height: 200px;
  }
}

@media (min-width: 1024px) {
  .ncr-cover-img img {
    min-height: 400px;
  }
}

/* ============================================
   IMMAGINE DEFUNTO - Cover profile
   ============================================ */

.cover-image {
  width: 100%;
  aspect-ratio: 3/4; /* Modifica in base al rapporto delle tue immagini */
  overflow: hidden;
  background: #f0f0f0; /* Placeholder color */
  border-radius: 8px;
}

.cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  /* Evita distorsioni */
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================
   ICONE - Heart, Comment, Share
   ============================================ */

.ncr-icone-box img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Icone nei bottoni */
.like-pagina-btn img,
.icon-btn img,
.icon-link img {
  max-width: 100%;
  height: auto;
  transition: opacity 0.2s ease;
}

.like-pagina-btn:hover img {
  opacity: 0.8;
}

/* ============================================
   SOCIAL SHARE ICONS
   ============================================ */

.share-popup img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.share-btn img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.share-btn:hover img {
  transform: scale(1.1);
}

/* ============================================
   RIDUCI LAYOUT SHIFT (CLS)
   ============================================ */

/* Riserva spazio per le immagini prima che carichino */
img[fetchpriority="high"],
.ncr-cover-img,
.cover-image {
  /* Evita che il layout cambi quando l'immagine carica */
  min-width: auto;
  min-height: auto;
  background-color: #f5f5f5;
}

/* ============================================
   PRELOAD E PREFETCH HINT
   ============================================ */

/* CSS per indicare al browser di prefetching */
.ncr-cover-img img[fetchpriority="high"] {
  /* Browser already prioritizes */
}

/* ============================================
   MEDIA QUERIES - Responsive Images
   ============================================ */

@media (max-width: 600px) {
  .ncr-cover-img {
    min-height: 200px;
  }

  .cover-image {
    aspect-ratio: 2/3; /* Più stretto su mobile */
  }

  .share-btn img {
    width: 32px;
    height: 32px;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .ncr-cover-img {
    min-height: 300px;
  }

  .cover-image {
    aspect-ratio: 3/4;
  }
}

@media (min-width: 1025px) {
  .ncr-cover-img {
    min-height: 400px;
  }

  .cover-image {
    aspect-ratio: 4/5; /* Un po' più largo su desktop */
  }
}

/* ============================================
   LAZY LOADED IMAGES - Fade in effect
   ============================================ */

img[loading="lazy"] {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

img[loading="lazy"][fetchpriority]:not([fetchpriority="high"]) {
  /* Images that are lazy loaded but not high priority */
}

/* Una volta che le immagini caricate fanno fade in */
@supports (content-visibility: auto) {
  img[loading="lazy"] {
    content-visibility: auto;
  }
}

/* ============================================
   DECODING ASYNC - Non bloccare il rendering
   ============================================ */

img[decoding="async"] {
  /* Browser decodifica in background */
  /* Nessuno stile CSS necessario, è gestito dal browser */
}

img[decoding="sync"] {
  /* Immagini critiche - decoding sincrono */
  /* Le vediamo subito */
}

/* ============================================
   PLACEHOLDER IMAGES - Durante il caricamento
   ============================================ */

/* Gradient skeleton loader (opzionale) */
@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

/* Usa questa classe nel template per i placeholder */
.image-placeholder {
  animation: skeleton-loading 1s linear infinite alternate;
}

/* ============================================
   PRINT STYLES - Non stampare placeholder
   ============================================ */

@media print {
  .ncr-cover-img,
  .cover-image {
    background: white;
  }

  img[loading="lazy"] {
    opacity: 1;
  }
}

/* ============================================
   DARK MODE - Se supportato
   ============================================ */

@media (prefers-color-scheme: dark) {
  .ncr-cover-img,
  .cover-image {
    background-color: #2a2a2a;
  }

  img[loading="lazy"] {
    filter: brightness(0.9);
  }
}

/* ============================================
   ACCESSIBILITY - High Contrast
   ============================================ */

@media (prefers-contrast: more) {
  .ncr-cover-img,
  .cover-image {
    border: 2px solid currentColor;
  }

  .share-btn img {
    filter: contrast(1.2);
  }
}

/* ============================================
   REDUCE MOTION - Rispetta preferenze utente
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .share-btn img,
  img {
    transition: none;
  }

  @keyframes skeleton-loading {
    0%, 100% {
      background-color: hsl(200, 20%, 80%);
    }
  }
}