/**
 * Sanjal Enterprises — Layout System
 * 12-column grid, containers, section rhythm, responsive breakpoints.
 *
 * Breakpoint reference:
 *   xs: 360–480px  (small mobile)
 *   sm: 768px      (tablet)
 *   md: 1024px     (small desktop)
 *   lg: 1280px     (desktop)
 *   xl: 1440px+    (wide desktop)
 */

/* ---------------------------------------------------------
 * Container
 * ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.container--wide {
  max-width: var(--container-max-wide);
}

.container--narrow {
  max-width: 860px;
}

/* ---------------------------------------------------------
 * 12-column grid
 * Usage: <div class="grid grid--12"><div class="col-span-6">...</div></div>
 * ------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--grid-gutter);
}

.grid--12 {
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* ---------------------------------------------------------
 * Section rhythm — 96–120px desktop vertical padding
 * ------------------------------------------------------- */
.section {
  padding-block: var(--section-padding-mobile);
}

.section--tight {
  padding-block: calc(var(--section-padding-mobile) * 0.6);
}

.section-header {
  max-width: 720px;
  margin-bottom: var(--space-8);
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
}

/* ---------------------------------------------------------
 * Flex utilities
 * ------------------------------------------------------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.flex-wrap { flex-wrap: wrap; }

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

/* ---------------------------------------------------------
 * Breakpoint: xs / small mobile floor (360px)
 * Ensures no horizontal scroll on the smallest supported width
 * ------------------------------------------------------- */
@media (max-width: 359px) {
  .container {
    padding-inline: var(--space-3);
  }
}

/* ---------------------------------------------------------
 * Breakpoint: sm — tablet (768px+)
 * ------------------------------------------------------- */
@media (min-width: 768px) {
  .section {
    padding-block: var(--section-padding-tablet);
  }

  .hide-mobile { display: initial; }
  .hide-desktop { display: none; }

  .sm\:col-span-4 { grid-column: span 4; }
  .sm\:col-span-6 { grid-column: span 6; }
  .sm\:col-span-8 { grid-column: span 8; }
  .sm\:col-span-12 { grid-column: span 12; }
}

/* ---------------------------------------------------------
 * Breakpoint: md — small desktop (1024px+)
 * ------------------------------------------------------- */
@media (min-width: 1024px) {
  .md\:col-span-3 { grid-column: span 3; }
  .md\:col-span-4 { grid-column: span 4; }
  .md\:col-span-6 { grid-column: span 6; }
  .md\:col-span-8 { grid-column: span 8; }
}

/* ---------------------------------------------------------
 * Breakpoint: lg — desktop (1280px+)
 * ------------------------------------------------------- */
@media (min-width: 1280px) {
  .section {
    padding-block: var(--section-padding-desktop);
  }
}

/* ---------------------------------------------------------
 * Breakpoint: xl — wide desktop (1440px+)
 * ------------------------------------------------------- */
@media (min-width: 1440px) {
  .container {
    max-width: var(--container-max-wide);
  }
}