/* 🧱 Main Page Layout Container
   Used in: All pages (index.html, Our-Mission.html, etc.)
   Purpose: Wraps main content blocks with padding and width control
*/
.main-layout {
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 60px);
  padding-right: clamp(20px, 4vw, 60px);
  box-sizing: border-box;
}

/* 📐 Two-Column Mission Grid
   Used in: Our-Mission.html
   Purpose: Positions mission content and embedded video side by side
*/
.mission-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: start;
  max-width: 1800px;
  margin: 40px auto;
  padding: 20px 40px;
  border-top: 2px solid #ccc;
  box-sizing: border-box;
}

.video-cell,
.mission-cell {
  flex: 1 1 45%;
  min-width: 300px;
  box-sizing: border-box;
}

/* 🎥 Responsive Video Embed
   Used in: Our-Mission.html
   Purpose: Ensures embedded YouTube/Vimeo clips scale properly
*/
.responsive-iframe iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
}

/* 📺 Direct Video Wrapper Layout
   Used in: index.html, Our-Mission.html
   Purpose: Contains hero videos with proper sizing
*/
.video-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* 💬 Caption Below Video
   Used in: Our-Mission.html
   Purpose: Descriptive note under video embeds
*/
.video-caption {
  font-size: 18px;
  text-align: center;
  margin-top: 12px;
  font-style: italic;
  color: var(--deep-plum);
}

/* 💬 Section Layout Padding & Breathing Room
   Used in: index.html, Founding-Circle.html
   Purpose: Ensures readable margins, emotional spacing, and clarity across lower-half sections
*/

.social-share,
#founding-circle,
#survivor-journal {
  padding: 40px clamp(20px, 4vw, 60px);
}

/* 🔲 Section Borders & Spacing Rhythm
   Used in: index.html
   Purpose: Visual divider and emotional pause between major sections
*/

.social-share {
  border-top: 2px solid rgba(0, 0, 0, 0.05);
}

#founding-circle {
  margin-top: 40px;
  border-top: 2px solid rgba(0, 0, 0, 0.05);
}

/* 🕊️ Survivor Journal Highlight Block
   Used in: Founding-Circle.html
   Purpose: Personal testimonials from community members — styled for quiet power
*/

#survivor-journal {
  background-color: var(--dignity-cream);
  border-left: 8px solid var(--resilience-teal);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  margin-top: 40px;
}

#survivor-journal h2 {
  font-size: 28px;
  color: var(--deep-plum);
  margin-bottom: 20px;
}

#survivor-journal .journal-entry {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-dark);
  font-style: italic;
  margin-bottom: 24px;
}