/**
 * Responsive Breakpoints — Phase 1
 * AI Worker: Responsive Cop
 * Health: cls_score, lcp_ms
 * DoD: Mobile 375px, Tablet 768px, Desktop 1024px; CLS < 0.1
 */

/* Breakpoints */
:root {
  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
}

/* Container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--wrap-pad-inline);
}

.container-sm {
  max-width: var(--container-sm);
  margin: 0 auto;
  padding-inline: var(--wrap-pad-inline);
}

/* Grid utilities */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-5);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}

/* Flex utilities */
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-sm { gap: var(--s-2); }
.gap-md { gap: var(--s-4); }
.gap-lg { gap: var(--s-5); }

/* Hide/show utilities */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .show-mobile { display: none !important; }
}

@media (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
  .show-tablet { display: none !important; }
}