/* ============================================================
   Bootstrap Grid & Utilities — Lux Creative Co.
   Hand-extracted from Bootstrap 5.3.
   Only the 45 classes actually used across this site.
   ============================================================ */

/* ── Box Sizing ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Container ─────────────────────────────────────────────── */
.container,
.container-fluid {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left:  calc(var(--bs-gutter-x, 1.5rem) * .5);
  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; } }
@media (min-width: 1400px) { .container { 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(-.5 * var(--bs-gutter-x));
  margin-left:  calc(-.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left:  calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

/* ── Columns — base ─────────────────────────────────────────── */
.col      { flex: 1 0 0%; }
.col-3   { flex: 0 0 auto; width: 25%; }
.col-4   { flex: 0 0 auto; width: 33.33333%; }
.col-6   { flex: 0 0 auto; width: 50%; }
.col-12  { flex: 0 0 auto; width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; }

/* ── Columns — md (768px+) ──────────────────────────────────── */
@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.33333%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
}

/* ── Columns — lg (992px+) ──────────────────────────────────── */
@media (min-width: 992px) {
  .col-lg   { flex: 1 0 0%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66667%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66667%; }
}

/* ── Row Columns ────────────────────────────────────────────── */
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }

@media (min-width: 768px) {
  .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
}
@media (min-width: 992px) {
  .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.33333%; }
}

/* ── Gutters ────────────────────────────────────────────────── */
.g-0 { --bs-gutter-x: 0;     --bs-gutter-y: 0; }
.g-3 { --bs-gutter-x: 1rem;  --bs-gutter-y: 1rem; }
.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.g-5 { --bs-gutter-x: 3rem;  --bs-gutter-y: 3rem; }

@media (min-width: 1200px) {
  .g-xl-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }
}

/* ── Display ────────────────────────────────────────────────── */
.d-none { display: none !important; }

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

/* ── Flex Utilities ─────────────────────────────────────────── */
.align-items-center     { align-items: center !important; }
.align-items-start      { align-items: flex-start !important; }
.align-items-end        { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }

/* ── Spacing ────────────────────────────────────────────────── */
.mb-0  { margin-bottom: 0 !important; }
.mb-5  { margin-bottom: 3rem !important; }
.mt-3  { margin-top: 1rem !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.px-4  { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }

@media (min-width: 992px) {
  .ps-lg-5 { padding-left: 3rem !important; }
}

/* ── Text ───────────────────────────────────────────────────── */
.text-center { text-align: center !important; }
.text-end    { text-align: right !important; }

/* ── Sizing ─────────────────────────────────────────────────── */
.h-100 { height: 100% !important; }

/* ── Position ───────────────────────────────────────────────── */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* ── Accessibility ──────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 1rem;
  list-style: none;
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: .5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: .5rem;
  color: #6c757d;
  content: "/";
}
.breadcrumb-item.active {
  color: #6c757d;
}