/* =====================================================
   LAYOUT.CSS (CHATEAU SYSTEM CORE)
   -----------------------------------------------------
   PURPOSE:
   - Single source of truth for ALL layout behavior
   - Containers, sections, grids, spacing

   RULES:
   - NO colors
   - NO typography styling
   - NO component styles
===================================================== */

/* =========================
   CONTAINERS
========================= */

/* =====================================================
   UNIFIED LAYOUT SYSTEM (MASTER WIDTH AUTHORITY)
===================================================== */

:root {
  --site-max: 1200px;
  --site-wide: 1000px;
  --site-text: 800px;
}

/* =========================
   CONTAINER SYSTEM (CLEAN)
========================= */

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Width variants */
.container.narrow {
  max-width: var(--site-text);
}

.container.standard {
  max-width: var(--site-max);
}

.container.wide {
  max-width: var(--site-wide);
}

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

/* =========================
   SECTIONS
========================= */

.section {
  width: 100%;
  position: relative;
  background: transparent;
  padding: 30px 0;
}

.section--tight {
  padding: 20px 10;
}

.section-gap {
  height: 40px;
}



/* =========================
   SECTION - BLEED
========================= */

.section--bleed {
  width: 100%;
  margin: 0;
  padding: 80px 0;
  background: #f5f5f5; 
}


.section--bleed .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   SECTIONS (CLEAN SYSTEM)
========================= */

/* spacing variants */

.section--wide {
  padding: 120px 0;
}

.section--flush {
  padding: 0;
}

/* optional spacer utility */
.section-gap {
  height: 40px;
}

/* =========================
   GRID SYSTEMS
========================= */

.tab-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

/* =========================
   CONTENT RULES - to fix image + text chaos
========================= */
.grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.grid > div {
  min-width: 0;
}

/* REQUIRED CSS (this is the missing piece) */
.grid {
  display: grid;
  gap: 30px;
  align-items: center;
}

.media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
@media (max-width: 768px) {
  .grid-split-left {
    grid-template-columns: 1fr;
  }
}



/* =========================
   ALIGNMENT
========================= */

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




/* =========================
   FIX FOR CONTAINER NOT RESPONDING
========================= */
.container.full {
  max-width: none !important;
  width: 100% !important;
}


/* =========================
   2 COLUMN CONTAINER 
========================= */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.split-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

/*  universal grid system  */
.grid {
  display: grid;
  gap: 30px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/*  60/40 Split System (Split Left / Split Right)  */
.split-left {
  grid-template-columns: 3fr 2fr; /* ~60/40 */
}
.split-right {
  grid-template-columns: 2fr 3fr; /* flipped */
}
.split-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.split-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*  this makes the universal grid system responsive  */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .split-2,
  .split-3 {
    grid-template-columns: 1fr;
  }
}

/*  this makes the 60/40 Split System (Split Left / Split Right) responsive  */
@media (max-width: 768px) {
  .split-left,
  .split-right {
    grid-template-columns: 1fr;
  }
}


/* =========================
   GRID SYSTEM (ONLY layout engine you will use)
========================= */
.grid {
  display: grid;
  gap: 30px;
  align-items: start;
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-split-left {
  grid-template-columns: 3fr 2fr;
}

.grid-split-right {
  grid-template-columns: 2fr 3fr;
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-split-left,
  .grid-split-right {
    grid-template-columns: 1fr;
  }
}

/* =========================
   IMAGE SYSTEM (FIXES YOUR CAROUSEL / GRID ISSUES) 
========================= */
.grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}
.grid .media {
  overflow: hidden;
  border-radius: 6px;
}

/* =========================
   TYPOGRAPHY SYSTEM (CONSISTENT HIERARCHY) 
========================= */
h1 {
  font-size: 42px;
  line-height: 1.2;
}

h2 {
  font-size: 32px;
  line-height: 1.3;
}

h3 {
  font-size: 24px;
  line-height: 1.4;
}

p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}
/*  SPECIAL TEXT STYLES  */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  color: #555;
}

.hero-lead {
  font-size: 18px;
  line-height: 1.8;
}


/* =========================
   CONTENT BLOCK SYSTEM (REUSABLE PATTERNS) 
========================= */
<section class="section">
  <div class="container standard">

    <p class="eyebrow">CATEGORY</p>
    <h1>Main Heading</h1>
    <p class="hero-lead">Supporting emotional statement.</p>

  </div>
</section>


/* =========================
   60/40 STORY BLOCK 
========================= */
<div class="grid grid-split-right">

  <div>
    <h2>Title</h2>
    <p>Story content goes here.</p>
  </div>

  <div class="media">
    <img src="image.jpg" alt="">
  </div>

</div>

/* =========================
   3-COLUMN FEATURE BLOCK 
========================= */
<div class="grid grid-3">

  <div>Feature 1</div>
  <div>Feature 2</div>
  <div>Feature 3</div>

</div>

/* =========================
   CTA BLOCK 
========================= */
<div class="grid grid-2">

  <div>
    <h2>Ready to Book?</h2>
    <p>Short emotional conversion message.</p>
  </div>

  <div>
    <a class="btn btn-primary">Schedule a Tour</a>
  </div>

</div>