/* ════════════════════════════════════════════════════════════════
   CLAJAMA RESPONSIVE SYSTEM — Single Source of Truth
   
   Every @media query in the entire app MUST use these variables.
   No inline breakpoints. No scattered magic numbers.
   
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Breakpoints (no direct use — for reference only) ── */
  /* Mobile:  0–639px   (all phones)   */
  /* Tablet:  640–1023px (iPad portrait, small tablets) */
  /* Desktop: 1024px+    (iPad landscape, laptops, desktops) */

  /* ── Responsive spacing tokens ── */
  --resp-padding-mobile: 16px;
  --resp-padding-tablet: 24px;
  --resp-padding-desktop: 36px;

  --resp-gap-mobile: 12px;
  --resp-gap-tablet: 16px;
  --resp-gap-desktop: 20px;

  --resp-section-mobile: 32px;
  --resp-section-tablet: 48px;
  --resp-section-desktop: 60px;

  /* ── Responsive font sizes ── */
  --resp-h1-mobile: 28px;
  --resp-h1-desktop: 48px;

  --resp-body-mobile: 15px;
  --resp-body-desktop: 16px;

  /* ── Responsive grid min-width ── */
  --resp-grid-min-2col: 300px;
  --resp-grid-min-3col: 240px;
  --resp-grid-min-4col: 220px;

  /* ── Responsive sidebar ── */
  --resp-sidebar-width-desktop: 220px;
  --resp-sidebar-width-tablet: 60px;
  --resp-sidebar-width-mobile: 0px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE UTILITY CLASSES
   
   Use these in Jinja2 templates instead of writing custom media queries.
   ══════════════════════════════════════════════════════════════ */

/* ── Visibility Controls ── */
.hide-mobile { display: revert; }
.show-mobile { display: none; }
.hide-tablet { display: revert; }
.show-tablet { display: none; }
.hide-desktop { display: revert; }
.show-desktop { display: none; }

/* ── Layout Shifts ── */
.stack-mobile {
  display: flex;
  flex-direction: row;
}
.row-desktop {
  display: flex;
  flex-direction: column;
}

/* ── Responsive Grid (auto-adapting) ── */
.grid-responsive {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(var(--resp-grid-min, 260px), 100%), 1fr)
  );
  gap: var(--resp-grid-gap, 12px);
}

.grid-responsive-2 {
  --resp-grid-min: 300px;
}

.grid-responsive-3 {
  --resp-grid-min: 240px;
}

.grid-responsive-4 {
  --resp-grid-min: 220px;
}

/* ── Responsive Padding ── */
.resp-padding {
  padding: var(--resp-padding-mobile);
}

/* ── Responsive Section ── */
.resp-section {
  padding: var(--resp-section-mobile) var(--resp-padding-mobile);
}

/* ── Full-bleed on mobile ── */
.full-bleed-mobile {
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FIRST — Base styles are mobile, then expand
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet (640px+) ── */
@media (min-width: 640px) {
  .hide-tablet { display: none; }
  .show-tablet { display: revert; }

  .stack-mobile { flex-direction: row; }
  .row-desktop { flex-direction: row; }

  .resp-padding {
    padding: var(--resp-padding-tablet);
  }

  .resp-section {
    padding: var(--resp-section-tablet) var(--resp-padding-tablet);
  }

  .full-bleed-mobile {
    width: auto;
  }

  .grid-responsive-2 { --resp-grid-min: 340px; }
  .grid-responsive-3 { --resp-grid-min: 260px; }
  .grid-responsive-4 { --resp-grid-min: 220px; }
}

/* ── Desktop (1024px+) ── */
@media (min-width: 1024px) {
  .hide-desktop { display: none; }
  .show-desktop { display: revert; }

  .hide-mobile { display: revert; }
  .show-mobile { display: none; }

  .resp-padding {
    padding: var(--resp-padding-desktop);
  }

  .resp-section {
    padding: var(--resp-section-desktop) var(--resp-padding-desktop);
  }

  .grid-responsive-2 { --resp-grid-min: 400px; }
  .grid-responsive-3 { --resp-grid-min: 300px; }
  .grid-responsive-4 { --resp-grid-min: 240px; }
}

/* ── Mobile overrides (0–639px) ── */
@media (max-width: 639px) {
  .hide-mobile { display: none; }
  .show-mobile { display: revert; }

  .stack-mobile {
    flex-direction: column;
  }

  .row-desktop {
    flex-direction: column;
  }

  .full-bleed-mobile {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    width: 100vw;
    margin-left: calc(-1 * var(--resp-padding-mobile));
  }
}