/**
 * responsive.css - Mobile-first breakpoint overrides
 * Breakpoints: 480 (mobile), 768 (tablet), 1024 (laptop), 1440 (desktop)
 */



/* ---- Tablet: 768px ---- */
@media (min-width: 768px) {
  .cuisine-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: var(--space-md);
  }

  .food-card--a { grid-column: span 2; grid-row: span 2; }
  .food-card--b,
  .food-card--e,
  .food-card--f,
  .food-card--g,
  .food-card--h { grid-column: span 2; grid-row: span 1; }
  .food-card--c,
  .food-card--d { grid-column: span 1; grid-row: span 1; }

  .masonry-grid {
    columns: 2;
  }

  .destination--alternating {
    grid-template-columns: 1fr 1fr;
  }

  .magazine-media-grid > *:first-child {
    grid-column: 1 / -1;
  }
}

/* ---- Tablet: 768px (bento expands to 4 columns) ---- */
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
  }

  .bento-item--a { grid-column: span 2; grid-row: span 2; }
  .bento-item--b,
  .bento-item--e { grid-column: span 2; grid-row: span 1; }
  .bento-item--c,
  .bento-item--d { grid-column: span 1; grid-row: span 1; }
}

/* ---- Laptop: 1024px ---- */
@media (min-width: 1024px) {
  .location-grid {
    grid-template-columns: 5fr 7fr;
  }

  .destination--magazine {
    grid-template-columns: 1.1fr 1fr;
  }

  .destination--magazine.is-reversed .magazine-media-grid {
    order: 2;
  }

  .destination--bento {
    padding-inline: var(--margin-inline);
  }

  .cuisine-grid {
    grid-auto-rows: 260px;
  }

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

  .culture-grid .culture-media {
    order: -1;
  }

  .masonry-grid {
    columns: 3;
  }

  .destination--immersive .destination-content,
  .pinned-stage .destination-content {
    padding-inline: var(--margin-inline);
  }
}

/* ---- Desktop: 1440px ---- */
@media (min-width: 1440px) {
  .bento-grid {
    grid-auto-rows: 250px;
  }
}

/* ---- Small mobile refinement: below 480px ---- */
@media (max-width: 480px) {
  .hero-stats {
    margin-top: var(--space-md);
  }

  .weather-card {
    width: 100%;
  }
}

/* ---- Below tablet: lightbox stacks image above its caption ---- */
@media (max-width: 767px) {
  .lightbox-content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    overflow-y: auto;
    padding: var(--space-xs);
  }

  .lightbox-img {
    max-height: 60vh;
  }

  .lightbox-info {
    flex: none;
    max-width: none;
  }
}