/* ============================================================
   HOMEPAGE 3 — "Split Screen" Stylesheet
   ============================================================
   Dramatic two-column layout + scrolling topics ribbon.
   
   WHAT'S IN HERE:
   - Split hero (text left, image right)
   - Floating testimonial quote
   - Scrolling topics ribbon animation
   - Three-column content pillars
   - Parallax image break section
   - Responsive adjustments
   
   📝 This file works WITH base.css (loaded first).
   ============================================================ */

/* ============================================================
   SPLIT HERO — Two Columns Side by Side
   ============================================================
   Uses flexbox to place text and image side by side.
   Each side takes up 50% of the width (flex: 1).
   
   📝 FLEXBOX BASICS:
   - display: flex  → children line up in a row (by default)
   - flex: 1        → each child takes equal space
   - flex-wrap: wrap → children stack vertically if too narrow
   - min-width      → minimum size before wrapping
   ============================================================ */
.hero-split {
  min-height: 90vh;
  display: flex;
  flex-wrap: wrap; /* Allows stacking on mobile */
}

/* ─── Text Side (Left) ─── */
.hero-split-text {
  flex: 1; /* Takes up half the space */
  min-width: 300px; /* Won't shrink below 300px */
  display: flex;
  align-items: center; /* Vertically centers the text */
  padding: 80px 60px;
  background-color: var(--off-white);
}

.hero-split-text-inner {
  max-width: 520px; /* Keeps text from stretching too wide */
}

.hero-split-text h1 {
  font-size: 3.2rem;
  line-height: 1.15;
  margin-bottom: 20px;
}

/* Colored highlight word in the heading */
/* 📝 In HTML: <span class="text-highlight">Mental Health</span> */
.hero-split-text h1 .text-highlight {
  color: var(--highlight-color);
  position: relative;
}

.hero-split-text p.lead {
  font-size: 1.15rem;
  color: var(--medium-gray);
  margin-bottom: 30px;
  line-height: 1.8;
}

/* ─── Image Side (Right) ─── */
/* The image is set as a CSS background-image so it fills
   the space completely without stretching. */
.hero-split-image {
  flex: 1;
  min-width: 300px;
  min-height: 400px;
  /* 🔄 CHANGE THIS URL to your own image! */
  background: url("https://media.istockphoto.com/id/1201642586/vector/people-take-food-from-a-plate.jpg?s=612x612&w=0&k=20&c=8DL3hJgAsYTRS4vhdO6yvdH30mha8MVrEZPiXrl8UJI=")
    center/cover no-repeat;
  position: relative; /* Needed for the overlay and floating quote */
}

/* Subtle gradient overlay on the image side */
.hero-split-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(43, 103, 119, 0.3),
    /* Slight teal tint on left edge */ transparent
      /* Fades to nothing on right */
  );
}

/* ─── Floating Testimonial Quote ─── */
/* This box overlaps the image, sitting partially outside it */
.floating-quote {
  position: absolute;
  bottom: 40px;
  left: -30px; /* Negative left = extends beyond container */
  background: var(--white);
  padding: 25px 30px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 320px;
  z-index: 2; /* Above the image overlay */
  border-left: 4px solid var(--highlight-color);
}

.floating-quote p {
  font-style: italic;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.floating-quote .quote-author {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 0.85rem;
}

/* ============================================================
   SCROLLING TOPICS RIBBON
   ============================================================
   A continuously scrolling horizontal banner of keywords.
   
   📝 HOW IT WORKS:
   1. The text content is DUPLICATED in the HTML
   2. CSS animation moves the entire block left
   3. When the first copy scrolls off-screen, the second copy
      is right behind it — creating a seamless infinite loop
   
   The animation is defined in base.css (@keyframes scroll-left)
   We just apply it here with the "animation" property.
   ============================================================ */
.topics-ribbon {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 18px 0;
  overflow: hidden; /* Hides text that scrolls off-screen */
  white-space: nowrap; /* Prevents text from wrapping to new line */
}

.topics-ribbon-inner {
  display: inline-block;
  /* animation: name | duration | timing | repeat */
  animation: scroll-left 20s linear infinite;
}

.topics-ribbon span {
  display: inline-block;
  padding: 0 30px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ============================================================
   FEATURE CARDS — Also used on this page for pillars
   ============================================================ */
.feature-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.8rem;
}

/* ============================================================
   RESPONSIVE — Homepage 3 Adjustments
   ============================================================ */
@media (max-width: 768px) {
  /* Stack the split hero vertically */
  .hero-split {
    flex-direction: column;
  }

  .hero-split-text {
    padding: 50px 25px;
  }

  .hero-split-text h1 {
    font-size: 2.4rem;
  }

  .hero-split-image {
    min-height: 350px;
  }

  /* On mobile, make the floating quote sit normally (not overlapping) */
  .floating-quote {
    position: relative;
    left: 0;
    bottom: 0;
    margin: 20px;
  }
}

@media (max-width: 480px) {
  .hero-split-text h1 {
    font-size: 2rem;
  }
}