/* =========================================================
   APP CONTAINERS
========================================================= */

#flysub-app,
#flysub-detail,
#view-destination {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space);
}

/* =========================================================
   SHARED GRID SYSTEMS
========================================================= */

.flysub-grid,
.flysub-gallery,
.flysub-grid-2,
.info-grid,
.gallery-grid,
.quick-stats {
  display: grid;
  gap: 12px;
}

.flysub-grid {
  grid-template-columns: 1fr;
}

.flysub-gallery,
.flysub-grid-2 {
  grid-template-columns: 1fr;
}

.quick-stats {
  grid-template-columns: 1fr;
}

.info-grid {
  grid-template-columns: 1fr;
}

.gallery-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* =========================================================
   DESTINATION LAYOUT
========================================================= */

.destination {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* =========================================================
   EXPLORE GRID
========================================================= */

.flysub-explore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-top: 30px;
}

/* =========================================================
   MAP TOOLBAR
========================================================= */

.flysub-map-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

/* =========================================================
   DESKTOP BREAKPOINTS
========================================================= */

@media (min-width: 900px) {
  .flysub-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .flysub-gallery,
  .flysub-grid-2 {
    grid-template-columns: repeat(3, 1fr);
  }

  .quick-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 980px) {
  .flysub-explore-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}