/* ========================================
   BMW USA — 12-Column Responsive Grid System
   Source: BUILD_PLAN §3.5, §3.6, §6
   ======================================== */

/* Container */
.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}

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

.container--full {
  max-width: none;
  padding: 0;
}

/* Row (flexbox-based grid) */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}

.row--no-gutter {
  margin: 0;
}

.row--gutter-small {
  margin: 0 -8px;
}

/* Column base */
[class*="col-"] {
  padding: 0 12px;
  width: 100%;
}

.row--no-gutter [class*="col-"] {
  padding: 0;
}

.row--gutter-small [class*="col-"] {
  padding: 0 8px;
}

/* ===== 12-Column Grid Classes ===== */
.col-1  { width: 8.3333%; }
.col-2  { width: 16.6667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%; }

/* Small devices (<768px) — 4 implied columns */
@media (max-width: 767px) {
  .col-sm-1  { width: 25%; }
  .col-sm-2  { width: 50%; }
  .col-sm-3  { width: 75%; }
  .col-sm-4  { width: 100%; }
  .col-sm-hide { display: none; }
  .container { padding: 0 16px; }
}

/* Medium devices (768–1023px) — 8 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .col-md-1  { width: 12.5%; }
  .col-md-2  { width: 25%; }
  .col-md-3  { width: 37.5%; }
  .col-md-4  { width: 50%; }
  .col-md-5  { width: 62.5%; }
  .col-md-6  { width: 75%; }
  .col-md-7  { width: 87.5%; }
  .col-md-8  { width: 100%; }
  .col-md-hide { display: none; }
}

/* Desktop (1024px+) — 12 columns */
@media (min-width: 1024px) {
  .col-lg-1  { width: 8.3333%; }
  .col-lg-2  { width: 16.6667%; }
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.3333%; }
  .col-lg-5  { width: 41.6667%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.3333%; }
  .col-lg-8  { width: 66.6667%; }
  .col-lg-9  { width: 75%; }
  .col-lg-10 { width: 83.3333%; }
  .col-lg-11 { width: 91.6667%; }
  .col-lg-12 { width: 100%; }
  .col-lg-hide { display: none; }
}

/* Large Desktop (1280px+) */
@media (min-width: 1280px) {
  .container { padding: 0 32px; }
}

/* ===== Alignment Container (BUILD_PLAN §3.6) ===== */
.alignment-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  pointer-events: none;
}

.alignment-container > * {
  pointer-events: auto;
}

/* Alignment positions — small (<768px) */
.small__topLeft       { align-items: flex-start; justify-content: flex-start; }
.small__topCenter     { align-items: flex-start; justify-content: center; }
.small__topRight      { align-items: flex-start; justify-content: flex-end; }
.small__middleLeft    { align-items: center; justify-content: flex-start; }
.small__middleCenter  { align-items: center; justify-content: center; }
.small__middleRight   { align-items: center; justify-content: flex-end; }
.small__bottomLeft    { align-items: flex-end; justify-content: flex-start; }
.small__bottomCenter  { align-items: flex-end; justify-content: center; }
.small__bottomRight   { align-items: flex-end; justify-content: flex-end; }

/* Medium (768–1279px) */
@media (min-width: 768px) {
  .medium__topLeft       { align-items: flex-start; justify-content: flex-start; }
  .medium__topCenter     { align-items: flex-start; justify-content: center; }
  .medium__topRight      { align-items: flex-start; justify-content: flex-end; }
  .medium__middleLeft    { align-items: center; justify-content: flex-start; }
  .medium__middleCenter  { align-items: center; justify-content: center; }
  .medium__middleRight   { align-items: center; justify-content: flex-end; }
  .medium__bottomLeft    { align-items: flex-end; justify-content: flex-start; }
  .medium__bottomCenter  { align-items: flex-end; justify-content: center; }
  .medium__bottomRight   { align-items: flex-end; justify-content: flex-end; }
}

/* Large (1280–1999px) */
@media (min-width: 1280px) {
  .large__topLeft       { align-items: flex-start; justify-content: flex-start; }
  .large__topCenter     { align-items: flex-start; justify-content: center; }
  .large__topRight      { align-items: flex-start; justify-content: flex-end; }
  .large__middleLeft    { align-items: center; justify-content: flex-start; }
  .large__middleCenter  { align-items: center; justify-content: center; }
  .large__middleRight   { align-items: center; justify-content: flex-end; }
  .large__bottomLeft    { align-items: flex-end; justify-content: flex-start; }
  .large__bottomCenter  { align-items: flex-end; justify-content: center; }
  .large__bottomRight   { align-items: flex-end; justify-content: flex-end; }
}

/* X-Large (≥2000px) */
@media (min-width: 2000px) {
  .xlarge__topLeft       { align-items: flex-start; justify-content: flex-start; }
  .xlarge__topCenter     { align-items: flex-start; justify-content: center; }
  .xlarge__topRight      { align-items: flex-start; justify-content: flex-end; }
  .xlarge__middleLeft    { align-items: center; justify-content: flex-start; }
  .xlarge__middleCenter  { align-items: center; justify-content: center; }
  .xlarge__middleRight   { align-items: center; justify-content: flex-end; }
  .xlarge__bottomLeft    { align-items: flex-end; justify-content: flex-start; }
  .xlarge__bottomCenter  { align-items: flex-end; justify-content: center; }
  .xlarge__bottomRight   { align-items: flex-end; justify-content: flex-end; }
}

/* ===== Helper Classes ===== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.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-xs { gap: var(--spacer-x-small); }
.gap-sm { gap: var(--spacer-small); }
.gap-md { gap: var(--spacer-medium); }
.gap-lg { gap: var(--spacer-large); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }

/* Visibility helpers */
.hide-desktop { display: none; }
.hide-mobile { display: block; }

@media (max-width: 889px) {
  .hide-mobile { display: none; }
  .hide-desktop { display: block; }
}

@media (min-width: 890px) {
  .hide-tablet-up { display: none; }
}