/* ============================================================
   Chapters of Courage — Volume 3: Florence and Jacob's Story
   Section layout + volume-specific backgrounds.
   Shared design system: ../shared/courage.css (loaded first).
   ============================================================ */

/* ---- Hero cover art ---- */
.hero {
  background-image: url("assets/img/hero-bg.png");
  background-image: image-set(url("assets/img/hero-bg.webp") type("image/webp"), url("assets/img/hero-bg.png") type("image/png"));
}
.hero__overlay { background: rgba(0, 0, 0, 0.25); backdrop-filter: sepia(15%) brightness(95%); }

/* ============================================================
   MEET FLORENCE AND HER SON, JACOB  (2/3 text + 1/3 sidebar)
   ============================================================ */
.meet {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sidebar-gutter);
  padding: clamp(80px, 12vw, 160px) clamp(20px, 6vw, 138px);
  background: var(--white);
}
.meet__text {
  flex: 2 1 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}

/* ============================================================
   NAVIGATING THE UNKNOWN  (Earth bg; title + two body columns)
   ============================================================ */
.navigating {
  padding: clamp(56px, 8vw, 110px) clamp(20px, 6vw, 106px);
  background: var(--earth);
}
.navigating__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 58px);
}
.navigating__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 82px);
  align-items: flex-start;
}
.navigating__left { flex: 1 1 360px; min-width: 0; }
.navigating__right { flex: 1 1 360px; min-width: 0; }

/* ============================================================
   QUOTE BANNERS  (full-bleed art; dark quote text per comps)
   ============================================================ */
.banner {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: clamp(80px, 13vw, 200px) clamp(24px, 6vw, 120px);
  overflow: hidden;
  background-size: cover;
  background-position: 50% 50%;
}
.banner--one { background-image: url("assets/img/quote-banner-1.png"); background-image: image-set(url("assets/img/quote-banner-1.webp") type("image/webp"), url("assets/img/quote-banner-1.png") type("image/png")); }
.banner--two { background-image: url("assets/img/quote-banner-2.png"); background-image: image-set(url("assets/img/quote-banner-2.webp") type("image/webp"), url("assets/img/quote-banner-2.png") type("image/png")); }
.banner__quote { color: var(--ink); }

/* ============================================================
   FINDING SUPPORT FOR THE WHOLE FAMILY
   Row 1: 2/3 text + 1/3 sidebar   Row 2: text + bleeding image
   ============================================================ */
.finding {
  padding: clamp(56px, 8vw, 110px) clamp(20px, 6vw, 118px) 0;
}
.finding__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}
.finding__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sidebar-gutter);
}
/* Media row: image absolutely anchored bottom-right, bleeding off the edge */
.finding__row--media {
  display: block;
  position: relative;
  min-height: clamp(420px, 46vw, 680px);
}
.finding__row--media .finding__text { max-width: min(60%, 620px); }
.finding__row:not(.finding__row--media) .finding__text > .pull-quote:last-child {
  margin-top: calc(clamp(40px, 5vw, 72px) - clamp(20px, 2.5vw, 32px));
}
.finding__text {
  flex: 2 1 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}
.finding__media {
  position: absolute;
  right: calc(50% - 50vw);
  bottom: 0;
  width: clamp(300px, 40vw, 620px);
  pointer-events: none;
}
.finding__img {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(-1);
}

/* ============================================================
   PRACTICING RESILIENCE AND PRESENCE  (Earth bg; 2/3 + sidebar)
   ============================================================ */
.practicing {
  padding: clamp(56px, 8vw, 110px) clamp(20px, 6vw, 118px);
  background: var(--earth);
}
.practicing__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sidebar-gutter);
}
.practicing__text {
  flex: 2 1 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.8vw, 34px);
}

/* ============================================================
   EMBRACING EACH MOMENT  (text + tall closing image)
   ============================================================ */
.embracing {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(32px, 5vw, 76px);
  padding: clamp(56px, 8vw, 114px) clamp(20px, 6vw, 118px) 0;
}
.embracing__text {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(40px, 5vw, 72px);
}
.embracing__text .body { margin-top: clamp(16px, 2vw, 24px); }
.embracing__text .pull-quote { margin-top: clamp(24px, 3vw, 40px); }
.embracing__text .signoff { margin-top: clamp(18px, 2.5vw, 28px); }
.embracing__text .closing__cta { margin-top: clamp(28px, 4vw, 49px); }
.embracing__media {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: stretch;
  margin-right: calc(-1 * clamp(20px, 6vw, 118px));
  margin-top: calc(-1 * clamp(56px, 8vw, 114px));
}
.embracing__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 727 / 1172;
  object-fit: cover;
}

/* ============================================================
   Responsive fine-tuning
   ============================================================ */
@media (max-width: 767px) {
  .finding__row--media { min-height: 0; }
  .finding__row--media .finding__text { max-width: none; }
  .finding__media {
    position: static;
    width: auto;
    margin: clamp(24px, 6vw, 40px) calc(50% - 50vw) 0 0;
    display: flex;
    justify-content: flex-end;
  }
  .finding__media .finding__img { width: min(88%, 360px); }

  .embracing { align-items: flex-start; }
  .embracing__text { padding-bottom: 0; }
  .embracing__media { justify-content: flex-start; margin-top: 0; align-self: auto; margin-right: 0; }
  .embracing__img { aspect-ratio: 3 / 4; }
}

/* Full-width text when no image is present */
.finding__media:not(:has(img))   { display: none; }
.embracing__media:not(:has(img)) { display: none; }