/* =============================================================
   LAYOUT.CSS — Container, Grid & Flex Utilities
   Al Buraimi Ministry eServices Web Portal
   ============================================================= */

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

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

.container--wide {
  max-width: 1400px;
}

/* ─── Main Page Wrapper ─── */
main {
  animation: fadeIn 0.4s ease;
}

/* ─── Section Spacing ─── */
.section {
  padding-block: var(--space-16);
}

.section--sm {
  padding-block: var(--space-8);
}

.section--lg {
  padding-block: var(--space-24);
}

/* ─── Grid Utilities ─── */
.grid {
  display: grid;
  gap: var(--space-6);
}

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

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

/* ─── Text Utilities ─── */
.text-start  { text-align: start; }
.text-center { text-align: center; }
.text-end    { text-align: end; }

.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-white     { color: var(--color-white); }
.text-success   { color: var(--color-success); }
.text-error     { color: var(--color-error); }
.text-warning   { color: var(--color-warning); }
.text-accent    { color: var(--color-accent-orange); }
.text-teal      { color: var(--color-accent-green); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }

.font-light   { font-weight: 300; }
.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-display { font-family: var(--font-display); }

/* ─── Spacing Utilities ─── */
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.pt-4  { padding-top: var(--space-4); }
.pb-4  { padding-bottom: var(--space-4); }

/* ─── Display Utilities ─── */
.hidden    { display: none !important; }
.invisible { visibility: hidden; }
.block     { display: block; }
.inline-block { display: inline-block; }

/* ─── Misc Utilities ─── */
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.rounded-full { border-radius: var(--radius-full); }
.rounded-lg   { border-radius: var(--radius-lg); }

/* ─── Responsive Breakpoints ─── */
/* Mobile first — base styles are for mobile */

/* Tablet ≥ 768px */
@media (max-width: 768px) {
  .container { padding-inline: var(--space-4); }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
}

/* Small Mobile ≤ 480px */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-3); }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* Tablet-only (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}