/**
 * responsive.css — Breakpoints, touch targets. Mobile: zero gap with viewport.
 */

/* Mobile: slides y contenedor pegados al viewport, sin espacio lateral */
@media (max-width: 899px) {
  .slides-container {
    margin: 0;
    padding: 0;
    width: 100vw;
    max-width: 100vw;
  }
  .slide {
    margin: 0;
    padding: 0 0 var(--nav-bar-h) 0;
    width: 100vw;
    max-width: 100vw;
  }
}

/* Extra-small */
@media (max-width: 479px) {
  .slide-cover .cover-image-wrap { margin-top: 0; }
  .slide-4 .columns { grid-template-columns: 1fr; gap: var(--grid-gutter); }
  .side-nav { width: min(280px, 90vw); }
}

@media (min-width: 480px) and (max-width: 599px) {
  .slide-4 .columns { grid-template-columns: 1fr; gap: var(--grid-gutter); }
}

/* Small (tablet): 600–903px — 8 cols in variables */
@media (min-width: 600px) and (max-width: 903px) {
  .slide-4 .columns {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--grid-gutter);
  }
}

@media (min-width: 904px) {
  .slide-4 .columns {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--grid-gutter);
  }
}


@media (hover: none) and (pointer: coarse) {
  .nav-bar .swiper-button-prev,
  .nav-bar .swiper-button-next { min-width: 48px; min-height: 48px; }
  .side-nav-item { padding: 0.75rem 1.25rem; min-height: 44px; }
}