/* 053 — correção de espaçamento desktop sem alterar o mobile
   Esta camada entra depois da 052 e neutraliza alturas/paddings acumulados
   que criavam grandes áreas vazias entre as seções no desktop. */

@media (min-width: 769px) {
  html,
  body {
    overflow-x: clip;
  }

  main > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .hero-stage,
  .hero-stage + .marquee,
  .marquee + .music,
  .music + .shows,
  .shows + .timeline-gallery,
  .timeline-gallery + .videos,
  .videos + .about,
  .about + .social-wall,
  .social-wall + .contact {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Seções comuns: espaço visual equilibrado, sem buracos entre blocos. */
  .section,
  .music.section,
  .shows.section,
  .videos.section,
  .about.section,
  .social-wall.section {
    padding-top: clamp(72px, 7vw, 108px) !important;
    padding-bottom: clamp(72px, 7vw, 108px) !important;
  }

  .marquee + .music.section {
    padding-top: clamp(56px, 5.5vw, 88px) !important;
  }

  .show-list,
  .music-carousel,
  .music-grid,
  .video-carousel-wrap,
  .social-fan {
    margin-top: clamp(36px, 4vw, 64px) !important;
  }

  .section-heading h2,
  .media-heading h2,
  .music-section-title,
  .social-wall-title h2,
  .contact h2 {
    margin-top: 0 !important;
  }

  /* Correção principal: a galeria timeline antiga usava 280vh+ no desktop.
     Quando o JS/efeito não acompanha, isso aparece como um grande espaço vazio.
     Aqui ela vira uma seção normal, horizontal e leve no desktop. */
  .timeline-gallery {
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(72px, 7vw, 108px) 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .gallery-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-top: 0 !important;
  }

  .timeline-gallery .media-heading {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: clamp(28px, 3.2vw, 48px) !important;
    padding: 0 7vw !important;
  }

  .timeline-viewport {
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .timeline-track {
    transform: none !important;
    height: clamp(440px, 54vw, 620px) !important;
    min-height: 440px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: clamp(22px, 2.8vw, 40px) !important;
    padding: 0 7vw 34px !important;
    max-width: none !important;
    width: max-content !important;
  }

  .timeline-track .photo-card,
  .timeline-track .photo-card:nth-of-type(3n+1),
  .timeline-track .photo-card:nth-of-type(3n+2),
  .timeline-track .photo-card:nth-of-type(3n) {
    flex: 0 0 clamp(320px, 32vw, 520px) !important;
    width: clamp(320px, 32vw, 520px) !important;
    height: calc(100% - 34px) !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    scroll-snap-align: start;
  }

  .timeline-line {
    left: 7vw !important;
    right: 7vw !important;
    bottom: 18px !important;
  }

  .timeline-hint {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 18px 7vw 0 auto !important;
    width: fit-content;
  }

  .timeline-gallery + .videos.section {
    padding-top: clamp(72px, 7vw, 108px) !important;
  }

  .contact {
    padding-top: clamp(80px, 8vw, 120px) !important;
    padding-bottom: clamp(64px, 6vw, 96px) !important;
  }

  footer {
    margin-top: 0 !important;
  }
}