/* PHANTASM'27 - mobile hero gap fix. */
@media (max-width: 768px) {
  .home-page > section.section:first-child,
  .home-page > section:first-child,
  :is(.home-page > section:has(> .hero-section)) {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0 !important;
  }

  .hero-section,
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0.9rem !important;
    margin: 0 !important;
  }

  .hero > .container,
  .hero .container {
    min-height: 0 !important;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
  }

  #tsparticles,
  [id*="tsparticles"],
  .particle-vignette {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #tsparticles canvas,
  [id*="tsparticles"] canvas {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .hero-institution {
    margin-top: 0 !important;
    margin-bottom: 0.6rem !important;
    padding-top: 0.2rem !important;
    padding-bottom: 0 !important;
  }

  .hero-timer {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-top: 0.15rem !important;
    padding-bottom: 1.05rem !important;
  }

  .starts-in,
  .starts-in h2 {
    margin: 0 !important;
  }

  .starts-in h2 {
    margin-bottom: 0.3rem !important;
    font-size: clamp(0.82rem, 4.4vw, 1rem) !important;
    line-height: 1.15 !important;
  }

  .hero-timer .countdown,
  .countdown {
    margin-top: 0.3rem !important;
  }

  .home-page > section.section:first-child.reveal,
  .home-page > section.section:first-child .reveal:not(.active) {
    transform: none !important;
  }
}