/**
 * Mobile-specific styles (0px - 767px)
 * Strategia: Simultaneous Development con Closed Ranges
 * Questo file viene caricato con media="(max-width: 767px)" per HTTP/2 optimization
 */

/* ===========================================
   CSS VARIABLES CON FALLBACK
   Tutte le variabili hanno un valore di fallback per robustezza
   =========================================== */
:root {
  /* Mobile-specific spacing */
  --mobile-section-padding: var(--section-padding-mobile, 40px);
  --mobile-gap-lg: var(--gap-lg-mobile, 20px);
  --mobile-gap-md: var(--gap-md-mobile, 14px);
  --mobile-gap-sm: var(--gap-sm-mobile, 8px);

  /* Mobile typography */
  --mobile-h1-size: var(--h1-mobile, 32px);
  --mobile-h2-size: var(--h2-mobile, 24px);
  --mobile-h3-size: var(--h3-mobile, 18px);
  --mobile-body-size: var(--body-mobile, 14px);
  --mobile-small-size: var(--small-mobile, 12px);

  /* Touch target minimum (WCAG 2.5.5) */
  --touch-target-min: var(--touch-min, 44px);

  /* Performance - reduced blur values */
  --mobile-blur-lg: var(--blur-lg-mobile, 32px);
  --mobile-blur-md: var(--blur-md-mobile, 24px);
  --mobile-blur-sm: var(--blur-sm-mobile, 12px);
}

/* ===========================================
   EXTRA SMALL SCREENS (0px - 374px)
   Closed Range - Isolated styles
   =========================================== */
@media (min-width: 0px) and (max-width: 374px) {

  /* Hero Title - Override inline styles */
  section > div > div > div > h1 {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }

  section > div > div > div > h1 > span {
    font-size: var(--mobile-h1-size, 32px) !important;
    line-height: 1.1 !important;
    display: block !important;
  }

  section > div > div > div > h1 > div {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: var(--mobile-gap-sm, 8px) !important;
  }

  section > div > div > div > h1 > div > span {
    font-size: var(--mobile-h1-size, 32px) !important;
    line-height: 1.1 !important;
  }

  /* Hero Stats */
  .grid.grid-cols-3 .text-2xl {
    font-size: var(--mobile-h3-size, 18px) !important;
  }

  /* Hero Carousel */
  .h-\[500px\] {
    height: 320px !important;
  }

  .max-w-sm {
    max-width: 260px !important;
  }

  .max-h-\[450px\] {
    max-height: 280px !important;
  }

  /* Hero Card */
  .rounded-3xl.p-8 {
    padding: var(--mobile-gap-sm, 12px) !important;
  }

  .text-2xl.font-bold.text-gray-900 {
    font-size: var(--mobile-body-size, 14px) !important;
    line-height: 1.2 !important;
  }

  .text-gray-600.text-sm.mb-6 {
    font-size: var(--mobile-small-size, 11px) !important;
    margin-bottom: var(--mobile-gap-sm, 12px) !important;
    -webkit-line-clamp: 2 !important;
  }

  /* Icon containers */
  .p-4.rounded-2xl {
    padding: var(--mobile-gap-sm, 8px) !important;
  }

  .p-4.rounded-2xl svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Course carousel icon - extra small */
  #corsi .p-10.rounded-3xl {
    padding: 8px !important;
    margin-bottom: 6px !important;
  }

  #corsi .p-10.rounded-3xl svg {
    width: 32px !important;
    height: 32px !important;
  }

  /* Course card padding - extra small */
  #corsi .p-8.md\:p-12 {
    padding: 12px !important;
  }

  /* Course title - extra small */
  #corsi .text-3xl.md\:text-4xl.lg\:text-5xl {
    font-size: 16px !important;
  }

  /* Hide non-essential on extra small */
  .space-y-2 > .flex.items-center.gap-2.text-sm {
    display: none !important;
  }

  /* Hide market demand indicator on extra small */
  #corsi .hidden.md\:block {
    display: none !important;
  }

  /* Section Headings */
  .text-5xl {
    font-size: var(--mobile-h2-size, 24px) !important;
  }

  .md\:text-6xl {
    font-size: 26px !important;
  }

  /* Section padding */
  .py-24 {
    padding-top: var(--mobile-section-padding, 40px) !important;
    padding-bottom: var(--mobile-section-padding, 40px) !important;
  }

  /* Buttons */
  .px-6.py-3 {
    padding: 10px 16px !important;
    font-size: var(--mobile-body-size, 14px) !important;
  }

  /* Background blobs - reduce for performance */
  .w-\[418px\], .h-\[418px\] {
    width: 150px !important;
    height: 150px !important;
  }
  .w-\[382px\], .h-\[382px\] {
    width: 120px !important;
    height: 120px !important;
  }
  .w-\[346px\], .h-\[346px\] {
    width: 100px !important;
    height: 100px !important;
  }
}

/* ===========================================
   SMALL SCREENS (375px - 639px)
   Closed Range - Isolated styles
   =========================================== */
@media (min-width: 375px) and (max-width: 639px) {

  /* Hero Title */
  section > div > div > div > h1 {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }

  section > div > div > div > h1 > span {
    font-size: 40px !important;
    line-height: 1.1 !important;
    display: block !important;
  }

  section > div > div > div > h1 > div {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: var(--mobile-gap-sm, 8px) !important;
  }

  section > div > div > div > h1 > div > span {
    font-size: 40px !important;
    line-height: 1.1 !important;
  }

  /* Hero Stats */
  .grid.grid-cols-3 .text-2xl {
    font-size: 20px !important;
  }

  /* Hero Carousel */
  .h-\[500px\] {
    height: 360px !important;
  }

  .max-w-sm {
    max-width: 280px !important;
  }

  .max-h-\[450px\] {
    max-height: 320px !important;
  }

  /* Hero Card */
  .rounded-3xl.p-8 {
    padding: 16px !important;
  }

  .text-2xl.font-bold.text-gray-900 {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .text-gray-600.text-sm.mb-6 {
    font-size: var(--mobile-small-size, 12px) !important;
    margin-bottom: var(--mobile-gap-sm, 12px) !important;
  }

  .p-4.rounded-2xl {
    padding: 10px !important;
  }

  /* Section Headings */
  .text-5xl {
    font-size: 28px !important;
  }

  .md\:text-6xl {
    font-size: 30px !important;
  }

  /* Section padding */
  .py-24 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .px-6.py-3 {
    padding: 12px 20px !important;
  }

  /* Background blobs */
  .w-\[418px\], .h-\[418px\] {
    width: 180px !important;
    height: 180px !important;
  }
  .w-\[382px\], .h-\[382px\] {
    width: 150px !important;
    height: 150px !important;
  }
  .w-\[346px\], .h-\[346px\] {
    width: 130px !important;
    height: 130px !important;
  }
}

/* ===========================================
   MEDIUM SCREENS (640px - 767px)
   Closed Range - Isolated styles
   =========================================== */
@media (min-width: 640px) and (max-width: 767px) {

  /* Hero Title */
  section > div > div > div > h1 {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }

  section > div > div > div > h1 > span {
    font-size: 52px !important;
    line-height: 1.1 !important;
    display: block !important;
  }

  section > div > div > div > h1 > div {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: var(--mobile-gap-sm, 8px) !important;
  }

  section > div > div > div > h1 > div > span {
    font-size: 52px !important;
    line-height: 1.1 !important;
  }

  /* Hero Carousel */
  .h-\[500px\] {
    height: 420px !important;
  }

  .max-h-\[450px\] {
    max-height: 380px !important;
  }

  .rounded-3xl.p-8 {
    padding: 20px !important;
  }

  /* Section Headings */
  .text-5xl {
    font-size: 36px !important;
  }

  .py-24 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Background blobs */
  .w-\[418px\], .h-\[418px\] {
    width: 250px !important;
    height: 250px !important;
  }
  .w-\[382px\], .h-\[382px\] {
    width: 220px !important;
    height: 220px !important;
  }
}

/* ===========================================
   ALL MOBILE (0px - 767px) - Shared Rules
   =========================================== */
@media (max-width: 767px) {

  /* --- HEADER / NAVIGATION --- */
  .text-\[6px\] {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  /* --- COURSES SECTION --- */
  /* Icon container in carousel - much smaller on mobile */
  #corsi .p-10.rounded-3xl {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }

  /* Icon SVG size in carousel */
  #corsi .p-10.rounded-3xl svg {
    width: 40px !important;
    height: 40px !important;
  }

  /* Card inner padding */
  #corsi .p-8.md\:p-12 {
    padding: 16px !important;
  }

  /* Grid gap between icon/info and content */
  #corsi .gap-8.md\:gap-12 {
    gap: 16px !important;
  }

  /* Badge container spacing */
  #corsi .gap-3.mb-6 {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  /* Badge items */
  #corsi .px-4.py-2.rounded-full {
    padding: 6px 12px !important;
  }

  /* Course title in carousel */
  #corsi .text-3xl.md\:text-4xl.lg\:text-5xl {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  /* Title underline */
  #corsi .h-1.w-24.rounded-full.mb-6 {
    margin-bottom: 12px !important;
  }

  /* Course description */
  #corsi .text-lg.md\:text-xl.text-gray-700 {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* CTA buttons container */
  #corsi .flex.flex-col.sm\:flex-row.gap-4.pt-4 {
    padding-top: 12px !important;
    gap: 8px !important;
  }

  /* CTA buttons */
  #corsi .px-8.py-4.rounded-xl {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* Section headings */
  #corsi .text-5xl {
    font-size: var(--mobile-h3-size, 22px) !important;
  }

  #corsi .text-xl {
    font-size: var(--mobile-body-size, 14px) !important;
  }

  /* Filter buttons - compact on mobile */
  #corsi .gap-6.mb-12 {
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  #corsi .gap-4 {
    gap: 8px !important;
  }

  /* Hide divider between filters and view toggle */
  #corsi div[style*="width: 1px"][style*="height: 40px"] {
    display: none !important;
  }

  /* Progress and dots spacing */
  #corsi .mt-12 {
    margin-top: 20px !important;
  }

  #corsi .mt-8.max-w-md {
    margin-top: 12px !important;
  }

  /* Carousel dots - smaller on mobile */
  #corsi .gap-3 button .rounded-full {
    height: 8px !important;
  }

  #corsi .gap-3 button .rounded-full[style*="width: 3rem"] {
    width: 1.5rem !important;
  }

  #corsi .gap-3 button .rounded-full[style*="width: 0.75rem"] {
    width: 8px !important;
  }

  /* Dots container gap */
  #corsi .flex.justify-center.items-center.gap-3 {
    gap: 6px !important;
  }

  /* Bottom CTA spacing */
  #corsi .mt-16 {
    margin-top: 24px !important;
  }

  #corsi .px-10.py-5.rounded-xl {
    padding: 14px 24px !important;
  }

  /* --- PROGRAMS SECTION --- */
  #programmi .p-10 {
    padding: 16px !important;
  }

  /* Program icon containers - much smaller */
  #programmi .w-20.h-20,
  #programmi .inline-flex.w-20.h-20 {
    width: 44px !important;
    height: 44px !important;
  }

  /* Program icon SVG */
  #programmi .w-20.h-20 svg,
  #programmi .inline-flex.w-20.h-20 svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Program titles */
  #programmi .text-3xl {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  /* Program descriptions */
  #programmi .text-lg {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* Program features spacing */
  #programmi .space-y-3 {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  #programmi .space-y-3 > div {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
  }

  /* Feature text */
  #programmi .space-y-3 span {
    font-size: 12px !important;
  }

  /* Feature bullets */
  #programmi .w-2.h-2.rounded-full {
    width: 5px !important;
    height: 5px !important;
  }

  /* CTA link */
  #programmi .pt-4.font-bold {
    padding-top: 10px !important;
    font-size: 13px !important;
  }

  /* Section header spacing */
  #programmi .mb-16 {
    margin-bottom: 20px !important;
  }

  /* Cards grid gap */
  #programmi .gap-8 {
    gap: 12px !important;
  }

  /* Space between icon and content */
  #programmi .space-y-8 {
    gap: 10px !important;
  }

  /* Corner decoration - smaller */
  #programmi .w-32.h-32 {
    width: 40px !important;
    height: 40px !important;
  }

  /* --- ABOUT SECTION --- */
  #chi-siamo .p-8 {
    padding: 16px !important;
  }

  #chi-siamo .text-4xl {
    font-size: var(--mobile-h3-size, 22px) !important;
  }

  #chi-siamo .w-14, #chi-siamo .h-14 {
    width: 40px !important;
    height: 40px !important;
  }

  #chi-siamo .text-3xl {
    font-size: var(--mobile-h3-size, 22px) !important;
  }

  #chi-siamo .text-lg {
    font-size: var(--mobile-body-size, 14px) !important;
  }

  /* --- CONTACT SECTION --- */
  #contatti .p-6 {
    padding: 16px !important;
  }

  #contatti .w-14, #contatti .h-14 {
    width: var(--touch-target-min, 44px) !important;
    height: var(--touch-target-min, 44px) !important;
  }

  #contatti .p-10 {
    padding: var(--mobile-gap-lg, 20px) !important;
  }

  #contatti .text-3xl {
    font-size: var(--mobile-h3-size, 22px) !important;
  }

  /* --- FOOTER --- */
  footer .py-16 {
    padding-top: var(--mobile-section-padding, 40px) !important;
    padding-bottom: var(--mobile-section-padding, 40px) !important;
  }

  footer .gap-12 {
    gap: var(--mobile-gap-lg, 24px) !important;
  }

  footer .text-lg {
    font-size: var(--mobile-body-size, 14px) !important;
  }

  footer .w-11, footer .h-11 {
    width: 40px !important;
    height: 40px !important;
  }

  footer .gap-8.text-sm {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--mobile-gap-sm, 12px) !important;
  }

  /* --- GLOBAL TYPOGRAPHY --- */
  .text-xl {
    font-size: 16px !important;
  }

  /* --- PERFORMANCE OPTIMIZATIONS --- */
  .blur-3xl {
    filter: blur(var(--mobile-blur-lg, 32px)) !important;
  }

  .blur-2xl {
    filter: blur(var(--mobile-blur-md, 24px)) !important;
  }

  .backdrop-blur-xl {
    backdrop-filter: blur(var(--mobile-blur-sm, 12px)) !important;
  }

  .backdrop-blur-md {
    backdrop-filter: blur(8px) !important;
  }

  /* Break long content */
  a[href^="mailto:"] {
    word-break: break-all !important;
  }

  /* Hide scroll indicator on mobile */
  .absolute.bottom-10.left-1\/2 {
    display: none !important;
  }
}

/* ===========================================
   INTERACTION MEDIA FEATURES
   Fat-Finger Problem Resolution
   =========================================== */

/* Touch devices (coarse pointer) - Risoluzione problema "Fat-Finger" */
@media (pointer: coarse) {
  /* Minimum touch target size per WCAG 2.5.5 */
  /* Only apply to interactive elements, not decorative bullets */
  nav a,
  nav button,
  button:not(.w-2):not(.h-2),
  [role="button"],
  a[href]:not(.w-2):not(.h-2) {
    min-height: var(--touch-target-min, 44px) !important;
    min-width: var(--touch-target-min, 44px) !important;
  }

  /* Exclude small decorative elements from touch target rules */
  .w-2.h-2.rounded-full,
  .w-1\.5.h-1\.5.rounded-full,
  #programmi .rounded-full:not(button):not(a) {
    min-height: unset !important;
    min-width: unset !important;
  }

  /* Increased spacing for touch navigation */
  nav .space-y-2 > * {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Larger form inputs for touch */
  input,
  select,
  textarea {
    min-height: var(--touch-target-min, 44px) !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
}

/* Devices without hover - Prevent "sticky hover" bug */
@media (hover: none) {
  .hover\:scale-105:hover,
  .hover\:scale-110:hover,
  .hover\:-translate-y-1:hover,
  .hover\:-translate-y-2:hover {
    transform: none !important;
  }

  .hover\:shadow-xl:hover,
  .hover\:shadow-2xl:hover {
    box-shadow: inherit !important;
  }

  .group:hover .group-hover\:opacity-100 {
    opacity: 0 !important;
  }

  .group:hover .group-hover\:text-white {
    color: inherit !important;
  }

  /* Disable hover color changes */
  .hover\:bg-white\/20:hover {
    background-color: inherit !important;
  }
}

/* ===========================================
   PROGRESSIVE ENHANCEMENT - @supports
   Feature Queries for modern CSS
   =========================================== */

/* CSS Grid Enhancement */
@supports (display: grid) {
  @media (max-width: 767px) {
    footer .gap-8.text-sm {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
}

/* Backdrop filter fallback */
@supports not (backdrop-filter: blur(10px)) {
  .backdrop-blur-xl,
  .backdrop-blur-md {
    background-color: rgba(255, 255, 255, 0.95) !important;
  }
}

/* Container queries enhancement (future-ready) */
@supports (container-type: inline-size) {
  .news-card {
    container-type: inline-size;
  }
}

/* ===========================================
   ACCESSIBILITY - Reduced Motion
   Critical for users with vestibular disorders
   =========================================== */
@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;
  }

  .animate-blob,
  .animate-bounce,
  .animate-pulse {
    animation: none !important;
  }

  /* Disable parallax and transforms */
  .transform,
  [class*="translate-"],
  [class*="scale-"],
  [class*="rotate-"] {
    transform: none !important;
  }
}

/* ===========================================
   AI-READINESS / SEMANTICA
   Stili che migliorano la leggibilità per agenti AI
   =========================================== */

/* High contrast focus states for AI agents reading tab order */
@media (max-width: 767px) {
  :focus-visible {
    outline: 3px solid var(--focus-color, #9333ea) !important;
    outline-offset: 2px !important;
  }

  /* Clear visual hierarchy for AI parsing */
  [role="navigation"],
  [role="main"],
  [role="contentinfo"] {
    display: block !important;
  }

  /* Ensure ARIA labels are associated with visible elements */
  [aria-label],
  [aria-labelledby],
  [aria-describedby] {
    position: relative !important;
  }
}

/* ===========================================
   PRINT STYLES (bonus)
   =========================================== */
@media print {
  .blur-3xl,
  .blur-2xl,
  .backdrop-blur-xl,
  .backdrop-blur-md {
    filter: none !important;
    backdrop-filter: none !important;
  }

  .animate-blob,
  .animate-bounce {
    animation: none !important;
  }

  nav,
  .absolute.bottom-10 {
    display: none !important;
  }
}