/* ============================================================
   MOOD HOUSE — Layout & Grid System
   ============================================================ */

/* Container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}
.container-sm {
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: 0 24px;
}

/* Sections */
.section {
  padding: var(--section-py) 0;
}
.section-sm {
  padding: var(--section-py-sm) 0;
}

/* Section themes */
.section-light  { background: var(--color-bg); }
.section-alt    { background: var(--color-bg-alt); }
.section-dark   { background: var(--color-bg-dark); color: var(--color-white); }
.section-dark .text-muted { color: rgba(255,255,255,0.55); }
.section-dark .eyebrow { color: var(--color-gold); }

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }

/* Flex helpers */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }

/* Split layout — 50/50 + image/text */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split.reversed { direction: rtl; }
.split.reversed > * { direction: ltr; }
.split-content { display: flex; flex-direction: column; gap: 24px; }

/* Aspect ratios */
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-video    { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-wide     { aspect-ratio: 4 / 3; }

/* Cover image */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Margin helpers */
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

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

/* Page offset for fixed header */
.page-content {
  padding-top: calc(var(--topbar-h) + var(--nav-h));
}

/* Hero base */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Full-bleed section image background */
.bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bg-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bg-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  z-index: 1;
}

/* Overflow helpers */
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }

/* Responsive */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split  { gap: 40px; }
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .split { grid-template-columns: 1fr; gap: 24px; }
  .split.reversed { direction: ltr; }
  .hide-mobile { display: none; }
  .show-mobile { display: block; }
  .container  { padding: 0 20px; }
  .section-title-block { margin-bottom: 40px; }
}