/* ==========================================================================
   Responsive Styles - Sagra del Borgo Antico di Montefiore
   Mobile-first breakpoints: 576px, 768px, 1024px, 1280px.
   Also includes prefers-reduced-motion overrides.
   ========================================================================== */

/* ==========================================================================
   BASE (Mobile-first defaults)
   Grids collapse to single column, text is compact, layout stacks.
   ========================================================================== */

/* Grids: single column on mobile */
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

/* Stats: 2 colonne su mobile per layout compatto */
@media (max-width: 767px) {
  .grid--4:has(.stats-counter) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Footer bottom: stack on small screens */
.footer__bottom {
  flex-direction: column;
  text-align: center;
}

/* Gallery wide/tall items: reset spans on mobile */
.gallery-item--wide {
  grid-column: span 1;
}

.gallery-item--tall {
  grid-row: span 1;
  aspect-ratio: 4 / 3;
}

/* Countdown: smaller digits on mobile */
.countdown__digit {
  width: 56px;
  height: 68px;
  font-size: var(--text-2xl);
}

/* Timeline preview: single column on mobile */
.timeline-preview {
  grid-template-columns: 1fr;
}

/* Gallery teaser: single column on mobile */
.gallery-teaser {
  grid-template-columns: 1fr;
}

.gallery-teaser__item--wide {
  grid-column: span 1;
}

/* Headliner: stack su mobile */
@media (max-width: 767px) {
  .headliner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
  }

  .headliner__name {
    font-size: var(--text-2xl);
  }

  .headliner .btn {
    width: 100%;
  }
}

/* Cena: data e prezzo impilati su mobile */
@media (max-width: 767px) {
  .cena__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}

/* Piatti: prezzo accanto al titolo su mobile */
@media (max-width: 767px) {
  .grid--4 .card__content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-sm);
  }

  .grid--4 .card__title {
    margin-bottom: 0;
  }

  .grid--4 .card__text {
    width: 100%;
  }

  .grid--4 .card__meta {
    font-size: var(--text-sm);
    text-transform: none;
  }
}

/* Schedule: stack verticale su mobile */
@media (max-width: 767px) {
  .schedule-event {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-md);
  }

  .schedule-event__time {
    font-size: var(--text-md);
    padding-top: 0;
  }

  .schedule-tabs {
    justify-content: flex-start;
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }
}

/* Contatti: colonna singola su mobile */
@media (max-width: 767px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* Galleria: layout compatto su mobile */
@media (max-width: 767px) {
  /* Filtri: scroll orizzontale, riga singola */
  .gallery-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gallery-filters::-webkit-scrollbar {
    display: none;
  }

  /* Griglia: 2 colonne compatte, foto quadrate */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }

  .gallery-item {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
  }

  /* Lightbox: frecce più piccole, aderenti ai bordi */
  .lightbox__prev,
  .lightbox__next {
    width: 40px;
    height: 40px;
  }

  .lightbox__prev {
    left: var(--space-sm);
  }

  .lightbox__next {
    right: var(--space-sm);
  }

  /* Video card: play button ridotto */
  .video-card__play {
    width: 56px;
    height: 56px;
  }
}

/* ==========================================================================
   MAX-WIDTH 375px - Very Small Screens (iPhone SE, small Android)
   Extra optimizations for the smallest devices.
   ========================================================================== */
@media (max-width: 375px) {
  /* Container: ridotto padding per massimizzare spazio */
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Mobile nav: gap ridotto per evitare compressione */
  .mobile-nav {
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-md);
  }

  /* Countdown: ancora più piccolo su schermi tiny */
  .countdown__digit {
    width: 48px;
    height: 60px;
    font-size: var(--text-xl);
  }

  /* Breadcrumb: font ridotto */
  .breadcrumb {
    font-size: 10px;
  }

  /* Hero title: size responsive per evitare overflow */
  .hero__title {
    font-size: clamp(2rem, 8vw, var(--text-hero));
  }

  /* Hero content: padding ridotto per massimizzare spazio */
  .hero__content {
    padding: var(--space-lg) var(--space-md);
  }

  /* Schedule: spacing ridotto su schermi tiny */
  .schedule-tabs {
    gap: var(--space-xs);
  }

  .schedule-tab {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-md);
  }

  .schedule-filter,
  .gallery-filter {
    font-size: 0.7rem;
    padding: var(--space-xs) var(--space-md);
  }

  .schedule-event {
    padding: var(--space-sm) var(--space-md);
    border-left-width: 2px;
  }

  .schedule-event__title {
    font-size: var(--text-sm);
  }

  .schedule-event__description {
    font-size: var(--text-xs);
  }
}

/* ==========================================================================
   576px - Landscape phones
   Minor adjustments: slightly more breathing room.
   ========================================================================== */
@media (min-width: 576px) {
  /* Container gets a bit more padding */
  .container {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }

  /* 2-col grid can start at this breakpoint */
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery items can span again */
  .gallery-item--wide {
    grid-column: span 2;
  }

  /* Gallery teaser: 2 columns, wide spans 2 */
  .gallery-teaser {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-teaser__item--wide {
    grid-column: span 2;
  }

  /* Footer grid: ridotto gap per evitare compressione */
  .footer__grid {
    gap: var(--space-lg);
  }

  /* Footer bottom back to row */
  .footer__bottom {
    flex-direction: row;
    text-align: left;
  }
}

/* ==========================================================================
   768px - Tablets
   Grids expand to 2 columns, hero text gets larger, footer gets 2 cols.
   ========================================================================== */
@media (min-width: 768px) {
  /* 3-col grid becomes 2 columns */
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 4-col grid becomes 2 columns */
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer grid: 2 columns */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery tall items can span */
  .gallery-item--tall {
    grid-row: span 2;
    aspect-ratio: auto;
  }

  /* Gallery teaser: full 3 columns */
  .gallery-teaser {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Countdown: normal digit size */
  .countdown__digit {
    width: 72px;
    height: 88px;
    font-size: var(--text-3xl);
  }

  /* Timeline preview: 3 columns on tablet+ */
  .timeline-preview {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   1024px - Desktop
   Show desktop nav, hide hamburger, grids reach full column counts.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Show desktop nav links */
  .nav-links {
    display: flex;
  }

  /* Hide hamburger button */
  .hamburger {
    display: none;
  }

  /* 3-col grid reaches full 3 columns */
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 4-col grid reaches full 4 columns */
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Footer grid: full 4 columns */
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Lightbox arrows have more spacing */
  .lightbox__prev {
    left: var(--space-2xl);
  }

  .lightbox__next {
    right: var(--space-2xl);
  }

  /* Gallery grid with larger minimum */
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* ==========================================================================
   1280px - Large desktop
   Max container widths, refined spacing.
   ========================================================================== */
@media (min-width: 1280px) {
  /* Container: enforce max widths */
  .container {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }

  /* Wide container can stretch further */
  .container--wide {
    max-width: var(--container-wide);
  }

  /* Gallery grid with even larger cells */
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-lg);
  }

  /* Bigger countdown digits for large screens */
  .countdown__digit {
    width: 88px;
    height: 104px;
    font-size: var(--text-4xl);
  }
}

/* ==========================================================================
   1440px - Extra large desktop
   Show CTA in header, increase nav spacing.
   ========================================================================== */
@media (min-width: 1440px) {
  /* Nav links can breathe more */
  .nav-links {
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   Mobile: No scroll-reveal animations
   Content appears immediately on mobile. Functional animations
   (accordion, page loader, flip card, counter) remain active.
   ========================================================================== */
@media (max-width: 1023px) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-delay] {
    transition-delay: 0s;
  }

  .hero__bg {
    animation: none;
  }
}

/* ==========================================================================
   Reduced Motion
   Disable all decorative animations and transitions for users who prefer
   reduced motion. Essential transitions (visibility, opacity for UX) remain.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Remove all transforms and animations from interactive elements */
  .btn:hover,
  .card:hover,
  .gallery-item:hover img {
    transform: none;
  }

  .card:hover .card__image img {
    transform: none;
  }

  .card--flip:hover .card--flip__inner {
    transform: none;
  }

  .hero__scroll-indicator svg,
  .hero__scroll-indicator .arrow {
    animation: none;
  }

  .sponsor-marquee__track {
    animation: none;
  }

  /* Disabilita particles canvas su reduced motion */
  #hero-particles {
    display: none;
  }

  /* Disabilita countdown flip animation */
  .countdown__digit.flip {
    animation: none;
  }

  /* Shimmer loader - no animazione */
  .hero__bg {
    animation: none;
  }

  .hero__bg img {
    transition: none;
  }

  /* Parallax fisso - no movimento */
  .hero__bg[data-parallax] {
    transform: none !important;
  }

  /* Instant transitions instead of animated */
  .site-header,
  .mobile-nav,
  .lightbox,
  .lightbox__image,
  .accordion__content,
  .schedule-event {
    transition-duration: 0.01ms;
  }

  /* Reveal elements: show immediately */
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}