/* Mobile viewport corrections — loaded after the legacy styles. */
@media (max-width:639px), (pointer:coarse){
  :root{
    --mobile-dock-reserve:calc(var(--download-dock-space, 116px) + 64px);
  }

  /* Keep focused/anchored content clear of the persistent download CTA. */
  html{
    scroll-padding-bottom:calc(var(--mobile-dock-reserve) + env(safe-area-inset-bottom, 0px));
  }

  /* Preserve a comfortable final scroll position above the fixed CTA. */
  body.has-download-dock{
    padding-bottom:calc(var(--mobile-dock-reserve) + env(safe-area-inset-bottom, 0px));
  }

  /* The first section below the carousel starts below the fixed CTA instead of behind it. */
  .hero{
    margin-bottom:var(--mobile-dock-reserve);
  }
  .stats{
    margin-top:0;
  }
}

/* Short portrait screens retain a visible, unobstructed carousel above the CTA. */
@media (max-width:639px) and (max-height:600px){
  .slide{
    aspect-ratio:5 / 4;
  }
  .slide::before{
    padding-top:80%;
  }
  .slide-info{
    padding:10px 12px 12px;
  }
  .tag-row{
    gap:4px;
    margin-top:6px;
  }
  .tag-row .tag:not(:first-child){
    display:none;
  }
}

/* Landscape phone screens use a compact, non-overlapping carousel. */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px){
  :root{
    --mobile-dock-reserve:calc(var(--download-dock-space, 96px) + 96px);
  }
  .hero-copy{
    display:none;
  }
  .hero{
    margin-top:6px;
    margin-bottom:var(--mobile-dock-reserve);
  }
  .slide{
    flex-basis:clamp(170px, 34vw, 210px);
    aspect-ratio:3 / 1.4;
  }
  .slide::before{
    padding-top:46.666667%;
  }
  .slide-info{
    padding:8px 10px 9px;
  }
  .slide-info .name{
    font-size:16px;
  }
  .slide-info .loc{
    font-size:10px;
  }
  .slide-info .tag-row{
    display:none;
  }
}