/* -------------------------------------------------------
   🟦 LAYOUT + STRUCTURE — Containers, Flex, Grid, Columns
   Purpose: Core visual layout structure + helper classes
-------------------------------------------------------- */

.inner-narrow { max-width: 800px !important; margin: 0 auto !important; }
.inner-medium { max-width: 1080px !important; margin: 0 auto !important; }
.inner-wide { max-width: 1440px !important; margin: 0 auto !important; }

.row-2col {
  display: flex;
  flex-direction: row;
  column-gap: 2rem;
  align-items: flex-start;
}

.placeholder-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #d9d9d9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #666;
}

.stack-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}

.stack-sm > * + * { margin-top: 0.75rem; }
.stack-md > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 3rem; }

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

.flex-row { flex-direction: row !important; }
.flex-col { flex-direction: column !important; }

.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-end { justify-content: flex-end !important; }

.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }

.gap-xs { gap: 0.5rem !important; }
.gap-sm { gap: 1rem !important; }
.gap-md { gap: 2rem !important; }
.gap-lg { gap: 3rem !important; }

.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }