/* MindFlex — Responsive breakpoints
 * Source of truth: docs/UI-Layouts.md §1 + docs/Screen-Specs.md §1.2
 */

/* Tablet: 768px – 1023px — sidebar collapses to icons only */
@media (max-width: 1023px) and (min-width: 768px) {
  .mf-sidebar {
    width: 64px;
    padding: 1.5rem 0.5rem;
  }
  .mf-sidebar__group h3,
  .mf-sidebar__filter span,
  .mf-sidebar__daily-text {
    display: none;
  }
  .mf-sidebar__filter {
    justify-content: center;
  }
  .mf-sidebar__daily {
    text-align: center;
  }
  .mf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet & Desktop: ≥ 768px — hide top tags bar */
@media (min-width: 768px) {
  .mf-main__filters {
    display: none;
  }
}

/* Mobile: < 768px — sidebar hidden, grid 1-2 columns */
@media (max-width: 767px) {
  .mf-sidebar__group--tags {
    display: none;
  }
  .mf-topbar {
    height: var(--mf-topbar-h-mobile);
    padding: 0 1rem;
  }
  .mf-topbar__ticker {
    display: none;
  }
  .mf-topbar__menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mf-sidebar {
    position: fixed;
    inset: var(--mf-topbar-h-mobile) auto 0 0;
    width: min(280px, 80vw);
    transform: translateX(-100%);
    transition: transform var(--mf-transition);
    z-index: 20;
  }
  .mf-sidebar--open {
    transform: translateX(0);
  }
  .mf-main {
    padding: 1rem;
  }
  .mf-grid {
    grid-template-columns: 1fr;
  }
  .mf-overlay__panels {
    grid-template-columns: 1fr;
  }
  .mf-offline {
    top: var(--mf-topbar-h-mobile);
  }
}