/* ============================================
   RESPONSIVE MOBILE-FIRST ULTRA-PRO v2.0
   EPC Store - Breakpoints Bootstrap 5.3
   xs: <576px | sm: ≥576px | md: ≥768px
   lg: ≥992px | xl: ≥1200px | xxl: ≥1400px
   ============================================ */

/* ============================================
   MOBILE BASE (< 576px)
   ============================================ */

/* Header mobile ottimizzato */
@media (max-width: 575.98px) {
  /* Navbar brand più piccolo */
  .navbar-brand-logo {
    max-height: 50px !important;
    width: auto;
  }
  
  .logo-text {
    font-size: var(--widget-font-size, 1rem) !important;
  }
  
  /* Navbar toggle più grande per touch */
  .navbar-toggler {
    padding: 0.5rem 0.75rem;
    font-size: var(--widget-font-size, 1.5rem);
  }
  
  /* Menu dropdown mobile full-width */
  .navbar-collapse {
    background: var(--bs-body-bg);
    border-radius: var(--epc-radius);
    margin-top: 0.5rem;
    box-shadow: var(--epc-shadow);
  }
  
  .navbar-nav {
    padding: 1rem 0;
  }
  
  .nav-link {
    padding: 0.75rem 1rem !important;
    font-size: var(--widget-font-size, 1.1rem);
    border-bottom: 1px solid var(--epc-gray-200);
  }
  
  .nav-link:last-child {
    border-bottom: none;
  }
  
  /* Dropdown mobile ottimizzato */
  .dropdown-menu {
    border: none !important;
    box-shadow: none !important;
    padding-left: 1.5rem;
    background: transparent !important;
  }
  
  .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: var(--widget-font-size, 1rem);
  }
  
  /* Dark mode toggle mobile */
  #darkModeToggle {
    top: 0.75rem !important;
    right: 4rem !important;
    width: 40px;
    height: 40px;
  }
  
  /* Language toggle mobile */
  .lang-toggle-elegant {
    margin-right: 0.5rem !important;
  }
  
  .lang-toggle-elegant .btn {
    padding: 0.4rem 0.8rem !important;
    font-size: var(--widget-font-size, 0.85rem) !important;
  }
}

/* ============================================
   TABLET PORTRAIT (576px - 767px)
   ============================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
  .navbar-brand-logo {
    max-height: 70px;
  }
  
  .container {
    max-width: 540px;
  }
  
  /* Card grid responsive */
  .card-grid-col {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================
   TABLET LANDSCAPE & SMALL DESKTOP (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-brand-logo {
    max-height: 80px;
  }
  
  .container {
    max-width: 720px;
  }
  
  /* Menu orizzontale */
  .navbar-nav {
    flex-direction: row;
  }
  
  .nav-link {
    padding: 0.5rem 1rem !important;
  }
}

/* ============================================
   DESKTOP MEDIUM (992px - 1199px)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-brand-logo {
    max-height: 90px;
  }
  
  .container {
    max-width: 960px;
  }
  
  .nav-link {
    font-size: var(--widget-font-size, 0.95rem);
    padding: 0.5rem 0.8rem !important;
  }
}

/* ============================================
   DESKTOP LARGE (1200px - 1399px)
   ============================================ */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar-brand-logo {
    max-height: 95px;
  }
  
  .container {
    max-width: 1140px;
  }
}

/* ============================================
   DESKTOP EXTRA LARGE (≥ 1400px)
   ============================================ */
@media (min-width: 1400px) {
  .navbar-brand-logo {
    max-height: 100px;
  }
  
  .container {
    max-width: 1320px;
  }
  
  .nav-link {
    padding: 0.5rem 1.2rem !important;
  }
}

/* ============================================
   TOUCH OPTIMIZATIONS (Mobile & Tablet)
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  /* Target minimo touch: 44x44px (Apple HIG) */
  .btn,
  .nav-link,
  .dropdown-item,
  a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Aumenta padding per elementi cliccabili */
  .btn {
    padding: 0.75rem 1.5rem;
  }
  
  /* Rimuovi hover effects su touch */
  .nav-link:hover,
  .dropdown-item:hover {
    background-color: transparent !important;
  }
  
  /* Active state più evidente su touch */
  .nav-link:active,
  .dropdown-item:active {
    background-color: var(--epc-primary-light) !important;
    color: white !important;
  }
  
  /* Swipe indicator per carousel mobile */
  .carousel-indicators {
    bottom: 20px !important;
  }
  
  .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
}

/* ============================================
   LANDSCAPE MODE (Phones & Small Tablets)
   ============================================ */
@media (max-width: 991.98px) and (orientation: landscape) {
  /* Header più compatto in landscape */
  .navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  
  .navbar-brand-logo {
    max-height: 50px !important;
  }
  
  #darkModeToggle {
    top: 0.5rem !important;
    right: 3.5rem !important;
    width: 35px;
    height: 35px;
  }
  
  /* Riduci spacing in landscape */
  .content-space-1 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Immagini più nitide per retina */
  .navbar-brand-logo,
  .card-img,
  .img-fluid {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ============================================
   REDUCED MOTION (Accessibility)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .carousel {
    transition: none !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  /* Nascondi elementi non necessari */
  header,
  footer,
  .navbar,
  #darkModeToggle,
  .lang-toggle-elegant,
  .btn,
  .carousel,
  .modal,
  .toast {
    display: none !important;
  }
  
  /* Ottimizza testo per stampa */
  body {
    font-size: var(--print-font-size, 12pt);
    line-height: 1.5;
    color: var(--widget-text-color, #000);
    background: var(--search-input-bg, #fff);
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  /* Evita page breaks indesiderati */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
}

/* ============================================
   SAFARI iOS FIXES
   ============================================ */
@supports (-webkit-touch-callout: none) {
  /* Fix iOS 100vh bug */
  .min-vh-100 {
    min-height: -webkit-fill-available;
  }
  
  /* Fix sticky header iOS */
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
  }
  
  /* Fix input zoom iOS */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: var(--mobile-input-size, 16px) !important;
  }
}

/* ============================================
   DARK MODE RESPONSIVE ADJUSTMENTS
   ============================================ */
[data-theme="dark"] {
  @media (max-width: 575.98px) {
    .navbar-collapse {
      background: var(--epc-gray-100);
    }
    
    .nav-link {
      border-bottom-color: var(--epc-gray-300);
    }
  }
}