/* ============================================================
   Chapters of Courage — Volume 1: Sarah'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-texture.png");
  background-image: image-set(url("assets/img/hero-texture.webp") type("image/webp"), url("assets/img/hero-texture.png") type("image/png"));
}
.hero__overlay { background: rgba(0, 0, 0, 0.25); }

/* ============================================================
   MEET SARAH  (text + portrait)
   ============================================================ */
.meet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(56px, 8vw, 110px) clamp(20px, 6vw, 138px);
}
.meet__text { flex: 1 1 380px; min-width: 0; }
.meet__text .body { margin-top: clamp(16px, 2vw, 24px); }
.meet__text .pull-quote { margin-top: clamp(20px, 2.5vw, 32px); }
.meet__media {
  flex: 1 1 420px;
  min-width: 0;
  align-self: stretch;
  display: flex;
  margin-top: calc(-1 * clamp(56px, 8vw, 110px));
  margin-bottom: calc(-1 * clamp(56px, 8vw, 110px));
  margin-right: calc(-1 * clamp(20px, 6vw, 138px));
}
.meet__media img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; }

/* ============================================================
   FACING THE SETBACK  (Earth bg; single column)
   ============================================================ */
.facing {
  padding: clamp(56px, 8vw, 110px) clamp(20px, 6vw, 118px);
  background: var(--earth);
}
.facing__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 58px);
  max-width: 80%;
}
/* Title, quote, body and resources all share one column width so the
   quote lines up with the paragraph beneath it. */


/* ============================================================
   FINDING HER SUPPORT  (white text panel + image panel)
   ============================================================ */
.finding {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.finding__text {
  flex: 1 1 440px;
  min-width: 0;
  padding: clamp(48px, 7vw, 110px) clamp(24px, 5vw, 106px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 43px);
}
.finding__text .rlink { justify-content: flex-start; }
.finding__media {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
}
.finding__img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

/* ============================================================
   QUOTE BANNER
   ============================================================ */
.banner {
  position: relative;
  padding: clamp(80px, 13vw, 200px) clamp(24px, 6vw, 120px);
  overflow: hidden;
  background-image: url("assets/img/quote-banner.png"); background-image: image-set(url("assets/img/quote-banner.webp") type("image/webp"), url("assets/img/quote-banner.png") type("image/png"));
  background-size: cover;
  background-position: center;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* ============================================================
   WELLNESS / JOURNALING  (wide text + decorative panel)
   ============================================================ */
.wellness {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--earth);
}
.wellness__text {
  flex: 1 1 520px;
  min-width: 0;
  padding: clamp(48px, 7vw, 110px) clamp(24px, 5vw, 106px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 47px);
}
.wellness__panel {
  flex: 1 1 340px;
  min-width: 0;
  min-height: 320px;
  background-image: url("assets/img/support-panel-3.png"); background-image: image-set(url("assets/img/support-panel-3.webp") type("image/webp"), url("assets/img/support-panel-3.png") type("image/png"));
  background-size: cover;
  background-position: left center;
}

/* ============================================================
   PARTNERING WITH HER CARE TEAM  (2/3 content + 1/3 sidebar)
   ============================================================ */
.partnering {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sidebar-gutter);
  padding: clamp(56px, 7vw, 77px) clamp(20px, 5vw, 100px);
}
.partnering__main {
  flex: 2 1 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 25px);
}
.partnering__img { width: 100%; }

/* ============================================================
   BUILDING TRUST  (Earth bg; content + blended image)
   ============================================================ */
.trust {
  background: var(--earth);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 60px);
  padding: clamp(56px, 7vw, 77px) clamp(20px, 5vw, 100px);
}
.trust__main {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 32px);
}
.trust__main .rlink { justify-content: flex-start; }
.card--trust .resource-sub { font-weight: 700; color: var(--dark-blue); }
.trust__img {
  flex: 0 0 auto;
  align-self: flex-start;
  width: min(601px, 42vw);
  max-width: 601px;
  height: auto;
  /* bleed flush into the section's top-right corner (cancels the section padding) */
  margin-top: calc(clamp(56px, 7vw, 77px) * -1);
  margin-right: calc(clamp(20px, 5vw, 100px) * -1);
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ============================================================
   CHOOSING JOY + FOOTER
   ============================================================ */
.joy {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(32px, 5vw, 60px);
  padding: clamp(56px, 8vw, 120px) clamp(20px, 6vw, 138px) 0;
}
.joy__text {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(40px, 5vw, 72px);
}
.joy__text .body { margin-top: clamp(16px, 2vw, 21px); }
.joy__text .pull-quote { margin-top: clamp(28px, 4vw, 49px); }
.joy__text .signoff { margin-top: clamp(14px, 2vw, 19px); }
.joy__text .closing__cta { margin-top: clamp(28px, 4vw, 49px); }
.joy__media {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-right: calc(-1 * clamp(20px, 6vw, 138px));
}
.joy__img {
  width: 100%;
  aspect-ratio: 1438 / 1502;
  object-fit: cover;
}

/* ============================================================
   Responsive fine-tuning
   ============================================================ */
@media (max-width: 767px) {
  .wellness__panel { min-height: 260px; }
  .finding__img { height: auto; min-height: 0; aspect-ratio: 3 / 4; }
  .trust { flex-direction: column; }
  .trust__img {
    align-self: center;
    width: 100%;
    margin-top: 0;
    margin-right: 0;
  }

  .meet__media { margin-top: 0; margin-bottom: 0; margin-right: 0; }
  .meet__media img { height: auto; min-height: 0; }

  .joy { align-items: flex-start; }
  .joy__text { padding-bottom: 0; }
  .joy__media { justify-content: flex-start; align-self: auto; margin-right: 0; }
  .joy__img { aspect-ratio: 3 / 4; }
}

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