/* ╔═══════════════════════════════════════════════════════════════╗
   ║  Responsive Utilities                                         ║
   ║  Mobile-first • MD3 adaptive breakpoints from ezhard-ezhaul   ║
   ║  Uses design tokens from variables.css.                       ║
   ╚═══════════════════════════════════════════════════════════════╝ */

@layer utilities {

  /* ── Content wrapper ───────────────────────────────────────── */
  .content-wrap {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: var(--content-padding);
  }

  /* ── Visibility helpers ────────────────────────────────────── */
  .hide-mobile   { display: none; }
  .hide-desktop  {}

  @media (min-width: 840px) {
    .hide-mobile  { display: revert; }
    .hide-desktop { display: none; }
  }

  /* ── Grid utilities ────────────────────────────────────────── */
  .auto-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  @media (min-width: 600px) {
    .auto-grid {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
  }

  @media (min-width: 840px) {
    .auto-grid {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
  }

  /* ── Section spacing ───────────────────────────────────────── */
  .section {
    padding-block: var(--space-2xl);
  }

  @media (min-width: 840px) {
    .section {
      padding-block: var(--space-3xl);
    }
  }

  /* ── Touch targets (mobile-first: ensure min 48px) ─────────── */
  .touch-target {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Flex utilities ────────────────────────────────────────── */
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

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

  /* ── Gap utilities ─────────────────────────────────────────── */
  .gap-xs  { gap: var(--space-xs); }
  .gap-sm  { gap: var(--space-sm); }
  .gap-md  { gap: var(--space-md); }
  .gap-lg  { gap: var(--space-lg); }
  .gap-xl  { gap: var(--space-xl); }
}