/* ============================================================
   OmniResume — Responsive Rules
   Breakpoints: sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1440
   ============================================================ */

@media (max-width: 639px) {
  .container { padding-inline: var(--space-4); }
  .section   { padding-block: var(--space-12); }
}

@media (min-width: 640px) { .sm\:block { display: block; } .sm\:hidden { display: none; } }
@media (min-width: 768px) { .md\:block { display: block; } .md\:hidden { display: none; } .md\:flex { display: flex; } }
@media (min-width: 1024px){ .lg\:block { display: block; } .lg\:hidden { display: none; } .lg\:flex { display: flex; } }
@media (min-width: 1280px){ .xl\:hidden { display: none; } }

/* ========== HEADER RESPONSIVE ========== */
@media (max-width: 1023px) {
  .site-nav   { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn--secondary { display: none; }
}

@media (max-width: 480px) {
  .header-actions .btn--primary { font-size: var(--text-xs); padding: 0.4rem 0.75rem; }
}

/* ========== GRID HELPERS ========== */
.grid-2 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.grid-3 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-4 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }