/* ==========================================================================
   Local layout layer (Bootstrap compatible subset)
   --------------------------------------------------------------------------
   The brief asks for local Bootstrap assets with no CDN. Shipping the full
   framework would add roughly 200 KB of rules this interface never uses, and
   generic Bootstrap components are exactly the look the design brief rules out.

   So this file provides the parts that are actually used - the 12 column grid,
   the container, the responsive breakpoints and a handful of utilities - under
   the familiar Bootstrap class names. Everything is scoped so it cannot fight
   with the component styles.

   If you would rather run the real thing: download bootstrap.min.css into this
   folder and swap the link in templates/partials/head.php. The markup uses
   standard grid class names, so it will keep working.
   ========================================================================== */

.container, .container-fluid { width: 100%; margin-inline: auto; padding-inline: var(--space-4); }
.container { max-width: 1180px; }

.row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--space-3) * -1); }
.row > * { padding-inline: var(--space-3); width: 100%; }

.col      { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width: 8.3333%; }
.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-5  { flex: 0 0 auto; width: 41.6667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.3333%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

.d-none  { display: none !important; }
.d-block { display: block !important; }
.d-flex  { display: flex !important; }
.d-grid  { display: grid !important; }

.align-items-center    { align-items: center !important; }
.align-items-start     { align-items: flex-start !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center  { justify-content: center !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }

.text-start  { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end    { text-align: right !important; }
.text-muted  { color: var(--text-2) !important; }
.fw-semibold { font-weight: 600 !important; }
.w-100 { width: 100% !important; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }

@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
  .d-md-flex { display: flex !important; }
  .d-md-none { display: none !important; }
}

@media (min-width: 1024px) {
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
}