/**
 * 🎯 ASPECT RATIO 5:3 - BEST PRACTICE CONTAINER + BACKGROUND POSITION
 * 
 * Sistema robusto per mantenere aspect ratio fisso 5:3 e mostrare
 * la stessa porzione di immagine su tutti i dispositivi
 * 
 * ✅ Contenitore: aspect-ratio fisso con fallback cross-browser
 * ✅ Background: size e position in percentuale per consistency
 * ✅ Responsive: da 375px mobile a 1000px+ desktop  
 * ✅ Performance: no breakpoint, scaling fluido continuo
 */

/* 
🔧 CONTENITORE ASPECT RATIO 5:3 FISSO
Metodo 1: aspect-ratio (moderno e raccomandato)
*/
.idpage-header-bg,
#background-editor-wrapper {
  /* Aspect ratio fisso 5:3 */
  aspect-ratio: 5 / 3 !important;
  
  /* Larghezza responsiva con limite */
  width: 100% !important;
  max-width: 1000px !important;
  
  /* Altezza auto calcolata da aspect-ratio */
  height: auto !important;
  
  /* Centratura orizzontale */
  position: relative !important;
  margin: 0 auto !important;
  
  /* Sicurezza overflow e layout */
  overflow: hidden !important;
  box-sizing: border-box !important;
  
  /* Remove fixed heights che rompono scaling */
  min-height: unset !important;
  
  /* Reset per evitare conflitti */
  padding-bottom: 0 !important;
}

/* 
📱 FALLBACK CROSS-BROWSER - Padding-top Method  
Per browser legacy che non supportano aspect-ratio
*/
@supports not (aspect-ratio: 5 / 3) {
  .idpage-header-bg,
  #background-editor-wrapper {
    aspect-ratio: unset !important;
    height: 0 !important;
    padding-top: calc(100% * 3 / 5) !important; /* 60% = 3/5 per ratio 5:3 */
  }
  
  /* Contenuto assoluto per fallback */
  .idpage-header-bg > *,
  #background-editor-wrapper > * {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* 
🖼️ BACKGROUND IMAGE - POSIZIONAMENTO PERCENTUALE
Proprietà per mantenere stessa porzione su tutti i dispositivi
*/
#background-css-editor {
  /* Dimensioni complete del contenitore */
  width: 100% !important;
  height: 100% !important;
  
  /* Background properties ottimali */
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  
  /* Position e size verranno settate via JavaScript con percentuali */
  /* background-position: [pos_x]% [pos_y]% */
  /* background-size: [zoom]% o cover per zoom < 120% */
}

/* 
📐 ASPECT RATIO 5:3 RESPONSIVE FIX
Gestisce l'aspect ratio continuo da mobile a desktop senza conflitti CSS
*/

/* UNIVERSAL BREAKOUT TECHNIQUE - Sempre attivo per idpage-header-bg */
.idpage-header-bg {
  /* ✅ ASPECT RATIO 5:3 - Sempre mantenuto */
  aspect-ratio: 5/3 !important;
  
  /* ✅ RESPONSIVE WIDTH CON LIMITE 1000px */
  width: 100vw !important;
  max-width: 1000px !important; /* ✅ LIMITE MASSIMO 1000px = 600px altezza */
  
  /* ✅ CENTERING - Perfetto per tutti i dispositivi */
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  
  /* ✅ RESET MARGIN/PADDING - Evita conflitti */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  
  /* ✅ OVERFLOW - Forza contenimento immagine */
  overflow: hidden !important;
}

/* ✅ FIX SPECIFICO PER MEDIA QUERIES CONFLITTUALI A 583px-768px+ */
@media (min-width: 583px) {
  .idpage-header-bg {
    /* ✅ FORZA ASPECT RATIO ANCHE SU SCHERMI MEDI/GRANDI */
    aspect-ratio: 5/3 !important;
    width: 100vw !important;
    max-width: 1000px !important; /* ✅ LIMITE MASSIMO 1000px */
    height: auto !important;  /* Forza altezza automatica basata su aspect-ratio */
    min-height: unset !important; /* Rimuovi altezze minime che potrebbero interferire */
    max-height: 600px !important; /* ✅ ALTEZZA MASSIMA 600px (5:3 di 1000px) */
  }
  
  /* ✅ RESET CONTAINER PARENT CHE INTERFERISCE CON ASPECT RATIO */
  .idpage-main-wrapper-with-bg {
    /* Neutralizza margin-top che interferisce con aspect ratio dopo 700px */
    margin-top: 0 !important; 
  }
}

/* ✅ FIX AGGIUNTIVO PER BREAKPOINT 768px+ DOVE MEDIA QUERIES INTERFERISCONO */
@media (min-width: 768px) {
  .idpage-header-bg {
    /* ✅ FORZA ASPECT RATIO ANCHE A 768px+ CON LIMITE 1000px */
    aspect-ratio: 5/3 !important;
    width: 100vw !important;
    max-width: 1000px !important; /* ✅ LIMITE MASSIMO 1000px */
    height: auto !important;
    max-height: 600px !important; /* ✅ ALTEZZA MASSIMA 600px */
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  
  /* ✅ NEUTRALIZZA INTERFERENZE DEI CONTAINER PARENT */
  .idpage-container-with-bg,
  .idpage-main-wrapper-with-bg {
    /* Evita che i container parent interferiscano con aspect ratio */
    margin-top: 0 !important; /* Mantieni layout ma non interferire con aspect ratio */
  }
}

/* ✅ MEDIA QUERY PER SCHERMI GRANDI - BLOCCA A 1000x600px */
@media (min-width: 1000px) {
  .idpage-header-bg {
    /* ✅ DIMENSIONI FISSE PER SCHERMI > 1000px */
    width: 1000px !important;
    max-width: 1000px !important;
    height: 600px !important;
    max-height: 600px !important;
    aspect-ratio: 5/3 !important;
    
    /* ✅ CENTRATURA PERFETTA CON MARGIN AUTO */
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    
    /* ✅ FORZA DISPLAY BLOCK PER MARGIN AUTO */
    display: block !important;
  }
  
  /* ✅ ASSICURA CHE IL CONTAINER PADRE NON INTERFERISCA */
  .idpage-main-wrapper-with-bg {
    text-align: center !important; /* Centra l'elemento figlio */
  }
  
  .idpage-header-wrapper {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }
}

/* FALLBACK per browser senza aspect-ratio support */
@supports not (aspect-ratio: 5/3) {
  .idpage-header-bg {
    padding-top: 60% !important; /* 60% = 3/5 = aspect ratio 5:3 */
    height: 0 !important;
  }
  
  /* Fallback per schermi grandi */
  @media (min-width: 1000px) {
    .idpage-header-bg {
      width: 1000px !important;
      height: 600px !important;
      padding-top: 0 !important;
    }
  }
}

/* EDITOR WRAPPER - Comportamento normale per editing */
#background-editor-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* ✅ RESET per container che potrebbero interferire */
.idpage-header-wrapper,
.container-fluid {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*
✨ VERIFICA MATEMATICA ASPECT RATIO:
- Mobile 375px: 375 x 225px = 1.6667 ✅
- Tablet 768px: 768 x 460.8px = 1.6667 ✅  
- Desktop 1000px: 1000 x 600px = 1.6667 ✅
- Large 1200px+: 1000 x 600px = 1.6667 ✅

🎯 BACKGROUND POSITION FORMULA:
- zoom_level: 100-300% (salvato in DB)
- x_coordinate_perc: 0-100% (salvato in DB come pos_x)  
- y_coordinate_perc: 0-100% (salvato in DB come pos_y)

📊 STESSA PORZIONE SU TUTTI I DISPOSITIVI garantita da:
1. Aspect ratio contenitore fisso 5:3
2. Background-position in percentuale (già implementato!)
3. Background-size in percentuale o cover (già implementato!)
*/
@media (min-width: 1200px) {
  .idpage-header-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }
}