/* ============================================================
   Chapters of Courage — Volume 2: Connor'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 { backdrop-filter: sepia(15%) brightness(95%); }

/* ============================================================
   MEET CONNOR  (text + portrait bleeding off the right edge)
   ============================================================ */
.meet {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(80px, 12vw, 160px) clamp(20px, 6vw, 138px);
  background: var(--white);
}
.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 {
  position: relative;
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  margin-top: calc(-1 * clamp(80px, 12vw, 160px));
  margin-bottom: calc(-1 * clamp(80px, 12vw, 160px));
  margin-right: calc(-1 * clamp(20px, 6vw, 138px));
}
.meet__img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; }

/* ============================================================
   FACING EARLY CHALLENGES  (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%;
}


/* ============================================================
   BEING HIS OWN ADVOCATE  (2/3 text + 1/3 sidebar)
   ============================================================ */
.advocate {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sidebar-gutter);
  padding: clamp(56px, 8vw, 110px) clamp(20px, 6vw, 138px);
}
.advocate__text {
  flex: 2 1 0;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 30px);
}

/* ============================================================
   QUOTE BANNERS  (full-bleed art + dark scrim)
   ============================================================ */
.banner {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: clamp(100px, 15vw, 240px) 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::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

/* ============================================================
   DRAWING STRENGTH FROM OTHERS  (2/3 text + 1/3 sidebar)
   ============================================================ */
.drawing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sidebar-gutter);
  padding: clamp(56px, 8vw, 110px) clamp(20px, 6vw, 138px);
}
.drawing__text {
  flex: 2 1 0;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}

/* ============================================================
   LOOKING AHEAD  (text + decorative birds)
   ============================================================ */
.looking {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(32px, 5vw, 70px);
  padding: clamp(56px, 8vw, 110px) clamp(20px, 6vw, 138px);
}
.looking__text {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 30px);
}
.looking__media {
  position: relative;
  flex: 1 1 380px;
  min-width: 0;
  min-height: clamp(320px, 42vw, 600px);
  margin-right: calc(-1 * clamp(20px, 6vw, 138px));
}
.looking__bird { position: absolute; }
/* Birds nudged a little lower into the closing whitespace */
.looking__bird--flock { width: min(96%, 540px); right: 0; bottom: clamp(-44px, -2.4vw, -14px); }
.looking__bird--solo { width: min(50%, 250px); right: 26%; top: 0; }

/* Closing spacing (quote / sign-off / buttons / logo) */
.looking__text .pull-quote { margin-top: clamp(28px, 4vw, 49px); }
.looking__text .signoff { margin-top: clamp(14px, 2vw, 19px); }
.looking__text .cta { margin-top: clamp(28px, 4vw, 49px); }

/* ============================================================
   Responsive fine-tuning
   ============================================================ */
@media (max-width: 767px) {
  .meet__media { margin-top: 0; margin-bottom: 0; margin-right: 0; }
  .meet__img { position: static; height: auto; min-height: 0; aspect-ratio: 4 / 3; }

  .looking__media { min-height: 0; display: flex; justify-content: center; margin-right: 0; }
  .looking__bird { position: static; }
  .looking__bird--solo { display: none; }
  .looking__bird--flock { width: min(80%, 320px); }
}

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