/* KiteCC responsive overrides. Loaded after style.css.
   Layout: compact header -> filters + wind rose -> map -> spot list + details -> footer. */

/* ---- Tablet / small laptop ---- */
@media (max-width: 1024px) {
  /* Filters drop to 2 columns. */
  .filters__controls { grid-template-columns: repeat(2, 1fr); }

  /* Spot list + details stack; details' own two columns relax a touch. */
  .details__container { grid-template-columns: 1fr; gap: var(--space-lg); }
  .details__content { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }

  /* Cap the spot-list height when it's full width so it doesn't dominate. */
  .spotlist { max-height: 260px; }
}

/* ---- Tablet portrait / large phone ---- */
@media (max-width: 768px) {
  /* Trim section padding to reclaim wasted space. */
  .header, .filters, .map, .details, .footer { padding: var(--space-md); }
  .header--compact { padding: var(--space-sm) var(--space-md); }

  /* Details inner columns stack. */
  .details__content { grid-template-columns: 1fr; gap: var(--space-md); }

  .settings { bottom: var(--space-sm); right: var(--space-sm); }
  .settings__panel { width: calc(100vw - 2 * var(--space-sm)); max-width: 280px; }
}

/* ---- Phone ---- */
@media (max-width: 480px) {
  /* Single-column filters. */
  .filters__controls { grid-template-columns: 1fr; }

  /* Filter actions stack; count drops below the buttons. */
  .filters__actions { flex-wrap: wrap; }
  .filters__count { margin-left: 0; width: 100%; }

  .windrose__chart { width: 170px; height: 170px; }

  /* Smaller display headings so they don't crowd the narrow viewport. */
  .map__title { font-size: 1.6rem; }
}