/* ============================================================================
   Martial Sync — Layout System
   Design system tokens + Bootstrap 5.3 layout extract
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Section A: Design System Tokens
   ---------------------------------------------------------------------------- */

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Font Family */
  --font-family: 'Roboto', sans-serif;

  /* Spacing Scale (from docs/design-system/Spacers.png) */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 60px;
  --space-8: 80px;
  --space-9: 96px;

  /* Type Scale (from docs/design-system/Type Scale.png) */
  /* Line-height rule: font-size + 10px */
  --font-h1: 60px;    --lh-h1: 70px;
  --font-h2: 48px;    --lh-h2: 58px;
  --font-h3: 36px;    --lh-h3: 46px;
  --font-h4: 24px;    --lh-h4: 34px;
  --font-h5: 21px;    --lh-h5: 31px;
  --font-body-1: 18px; --lh-body-1: 28px;
  --font-body-2: 16px; --lh-body-2: 26px;
  --font-body-3: 12px; --lh-body-3: 22px;
  --font-body-4: 10px; --lh-body-4: 20px;

  /* Breakpoint reference (cannot be used in @media directly) */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
}

/* --- Base Typography --- */

h1 { font-size: var(--font-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--font-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--font-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--font-h4); line-height: var(--lh-h4); }
h5 { font-size: var(--font-h5); line-height: var(--lh-h5); }
h6 { font-size: var(--font-h5); line-height: var(--lh-h5); }

/* ----------------------------------------------------------------------------
   Section B: Bootstrap 5.3 Layout Extract
   Containers, Grid, Columns, Offsets, Gutters
   ---------------------------------------------------------------------------- */

/* --- Containers --- */

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1320px;
  }
}

/* --- Row --- */

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* --- Columns (default / xs) --- */

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

.offset-1 { margin-left: 8.33333333%; }
.offset-2 { margin-left: 16.66666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.33333333%; }
.offset-5 { margin-left: 41.66666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.33333333%; }
.offset-8 { margin-left: 66.66666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.33333333%; }
.offset-11 { margin-left: 91.66666667%; }

/* --- Columns: sm (≥576px) --- */

@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
  .offset-sm-0 { margin-left: 0; }
  .offset-sm-1 { margin-left: 8.33333333%; }
  .offset-sm-2 { margin-left: 16.66666667%; }
  .offset-sm-3 { margin-left: 25%; }
  .offset-sm-4 { margin-left: 33.33333333%; }
  .offset-sm-5 { margin-left: 41.66666667%; }
  .offset-sm-6 { margin-left: 50%; }
  .offset-sm-7 { margin-left: 58.33333333%; }
  .offset-sm-8 { margin-left: 66.66666667%; }
  .offset-sm-9 { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.33333333%; }
  .offset-sm-11 { margin-left: 91.66666667%; }
}

/* --- Columns: md (≥768px) --- */

@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .offset-md-0 { margin-left: 0; }
  .offset-md-1 { margin-left: 8.33333333%; }
  .offset-md-2 { margin-left: 16.66666667%; }
  .offset-md-3 { margin-left: 25%; }
  .offset-md-4 { margin-left: 33.33333333%; }
  .offset-md-5 { margin-left: 41.66666667%; }
  .offset-md-6 { margin-left: 50%; }
  .offset-md-7 { margin-left: 58.33333333%; }
  .offset-md-8 { margin-left: 66.66666667%; }
  .offset-md-9 { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.33333333%; }
  .offset-md-11 { margin-left: 91.66666667%; }
}

/* --- Columns: lg (≥992px) --- */

@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
  .offset-lg-0 { margin-left: 0; }
  .offset-lg-1 { margin-left: 8.33333333%; }
  .offset-lg-2 { margin-left: 16.66666667%; }
  .offset-lg-3 { margin-left: 25%; }
  .offset-lg-4 { margin-left: 33.33333333%; }
  .offset-lg-5 { margin-left: 41.66666667%; }
  .offset-lg-6 { margin-left: 50%; }
  .offset-lg-7 { margin-left: 58.33333333%; }
  .offset-lg-8 { margin-left: 66.66666667%; }
  .offset-lg-9 { margin-left: 75%; }
  .offset-lg-10 { margin-left: 83.33333333%; }
  .offset-lg-11 { margin-left: 91.66666667%; }
}

/* --- Columns: xl (≥1200px) --- */

@media (min-width: 1200px) {
  .col-xl { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
  .offset-xl-0 { margin-left: 0; }
  .offset-xl-1 { margin-left: 8.33333333%; }
  .offset-xl-2 { margin-left: 16.66666667%; }
  .offset-xl-3 { margin-left: 25%; }
  .offset-xl-4 { margin-left: 33.33333333%; }
  .offset-xl-5 { margin-left: 41.66666667%; }
  .offset-xl-6 { margin-left: 50%; }
  .offset-xl-7 { margin-left: 58.33333333%; }
  .offset-xl-8 { margin-left: 66.66666667%; }
  .offset-xl-9 { margin-left: 75%; }
  .offset-xl-10 { margin-left: 83.33333333%; }
  .offset-xl-11 { margin-left: 91.66666667%; }
}

/* --- Columns: xxl (≥1400px) --- */

@media (min-width: 1400px) {
  .col-xxl { flex: 1 0 0%; }
  .col-xxl-auto { flex: 0 0 auto; width: auto; }
  .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-xxl-3 { flex: 0 0 auto; width: 25%; }
  .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-xxl-6 { flex: 0 0 auto; width: 50%; }
  .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-xxl-9 { flex: 0 0 auto; width: 75%; }
  .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xxl-12 { flex: 0 0 auto; width: 100%; }
  .offset-xxl-0 { margin-left: 0; }
  .offset-xxl-1 { margin-left: 8.33333333%; }
  .offset-xxl-2 { margin-left: 16.66666667%; }
  .offset-xxl-3 { margin-left: 25%; }
  .offset-xxl-4 { margin-left: 33.33333333%; }
  .offset-xxl-5 { margin-left: 41.66666667%; }
  .offset-xxl-6 { margin-left: 50%; }
  .offset-xxl-7 { margin-left: 58.33333333%; }
  .offset-xxl-8 { margin-left: 66.66666667%; }
  .offset-xxl-9 { margin-left: 75%; }
  .offset-xxl-10 { margin-left: 83.33333333%; }
  .offset-xxl-11 { margin-left: 91.66666667%; }
}

/* --- Gutters (remapped to design system spacing scale) --- */

.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-0, .gy-0 { --bs-gutter-y: 0; }
.g-1, .gx-1 { --bs-gutter-x: var(--space-1); }
.g-1, .gy-1 { --bs-gutter-y: var(--space-1); }
.g-2, .gx-2 { --bs-gutter-x: var(--space-2); }
.g-2, .gy-2 { --bs-gutter-y: var(--space-2); }
.g-3, .gx-3 { --bs-gutter-x: var(--space-3); }
.g-3, .gy-3 { --bs-gutter-y: var(--space-3); }
.g-4, .gx-4 { --bs-gutter-x: var(--space-4); }
.g-4, .gy-4 { --bs-gutter-y: var(--space-4); }
.g-5, .gx-5 { --bs-gutter-x: var(--space-5); }
.g-5, .gy-5 { --bs-gutter-y: var(--space-5); }
.g-6, .gx-6 { --bs-gutter-x: var(--space-6); }
.g-6, .gy-6 { --bs-gutter-y: var(--space-6); }
.g-7, .gx-7 { --bs-gutter-x: var(--space-7); }
.g-7, .gy-7 { --bs-gutter-y: var(--space-7); }
.g-8, .gx-8 { --bs-gutter-x: var(--space-8); }
.g-8, .gy-8 { --bs-gutter-y: var(--space-8); }
.g-9, .gx-9 { --bs-gutter-x: var(--space-9); }
.g-9, .gy-9 { --bs-gutter-y: var(--space-9); }