/* ------------------------------------------------------------------
   grid.css — minimal layout layer extracted from Bootstrap 5.
   Contains ONLY the grid / flex / utility classes this site actually
   uses, so the full bootstrap.css can be dropped.
   Breakpoints: sm 576 / md 768 / lg 992 / xl 1200 / xxl 1400.
   ------------------------------------------------------------------ */

/* Box model — the template's style.css depends on this reset. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---- Container ---- */
.container {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } } /* responsive.css overrides to 1170 */
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ---- Row + gutters ---- */
.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);
}
.g-0 {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

/* ---- Columns (responsive variants used on this page) ---- */
@media (min-width: 768px) {
  .col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
}
@media (min-width: 1200px) {
  .col-xl-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-xl-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* ---- Display / flex utilities ---- */
.d-flex  { display: flex !important; }
.d-block { display: block !important; }
.align-items-center      { align-items: center !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.ms-auto    { margin-left: auto !important; }
.text-center { text-align: center !important; }

@media (min-width: 992px)  { .d-lg-none  { display: none !important; } }
@media (min-width: 1200px) { .d-xl-block { display: block !important; } }

/* margin reset used on the banner image at lg+ */
@media (min-width: 992px) { .mt-lg-0 { margin-top: 0 !important; } }

/* ---- Misc ---- */
.img-fluid { max-width: 100%; height: auto; }
.rounded   { border-radius: 0.25rem !important; }