/* === ph-we-care.css ================================================ */

/* ---- PAGE WRAPPER -------------------------------------------------- */
/* 2 em top, 20 px bottom, no side padding here */
.ph-we-care { padding: 2em 0 20px; }

/* Apply 20 px side‑padding to ALL content blocks
   except the three edge‑to‑edge images. */
.ph-we-care > .wc-hero,
.ph-we-care > .wc-intro,
.ph-we-care > .wc-banner-inner,
.ph-we-care > .wc-mid,
.ph-we-care > .timeline-wrap,
.ph-we-care > .wc-outro,
.ph-we-care > .wc-quotes {
  padding-left: 20px;
  padding-right: 20px;
}

/* ---- HERO --------------------------------------------------------- */
.wc-hero          { text-align: center; margin: 0rem 0 0rem; }
.wc-headline      { font-size: 100px; font-weight: 400; margin: 0; }
.wc-subheadline   { font-size: 100px; font-weight: 400; margin-top: 0rem; line-height: 1.25; }

@media (max-width: 61.24em){
  .wc-headline,
  .wc-subheadline { font-size: 75px; }
}
@media (max-width: 46.24em){
  .wc-headline,
  .wc-subheadline { font-size: 50px; }
}

/* ---- REACHING HANDS IMAGE (edge‑to‑edge) -------------------------- */
.wc-hands { display:block; width:100%; height:auto; object-fit:cover; margin:0rem 0; }

/* ---- INTRO PARAGRAPHS --------------------------------------------- */
.wc-intro       { display:flex; flex-direction:column; align-items:center; gap:2rem; margin:6rem 0; }
.wc-intro p     { max-width:60%; text-align:justify; line-height:1.7; }
@media (max-width:61.24em){ .wc-intro p{ max-width:60%; } }
@media (max-width:46.24em){ .wc-intro p{ max-width:100%; } }

/* ---- EDGE‑BANNER (edge‑to‑edge) ----------------------------------- */
.wc-banner      { background-size:cover; background-position:center; min-height:468px; display:flex; align-items:center; justify-content:center; margin:8rem 0; }
.wc-banner-inner{ max-width:960px; padding:2rem 20px; }   /* side padding */
.wc-banner-copy { font-weight:400; font-size:35px; line-height:1.3; text-align:justify; color:#fff; }
@media (max-width:61.24em){ .wc-banner-copy{ font-size:25px; } }
@media (max-width:46.24em){ .wc-banner-copy{ font-size:20px; } }

/* ---- MID PARAGRAPH ------------------------------------------------ */
.wc-mid       { text-align:center; margin:6rem 0; }
.wc-mid p     { max-width:30%; margin:0 auto; line-height:1.7; text-align:justify; }
@media (max-width:61.24em){ .wc-mid p{ max-width:35%; } }
@media (max-width:46.24em){ .wc-mid p{ max-width:100%; } }

/* ---- OUTRO PARAGRAPHS --------------------------------------------- */
.wc-outro     { margin:6rem 0; display:flex; flex-direction:column; gap:2rem; align-items:center; }
.wc-outro p   { max-width:60%; text-align:justify; line-height:1.7; }
@media (max-width:61.24em){ .wc-outro p{ max-width:60%; } }
@media (max-width:46.24em){ .wc-outro p{ max-width:100%; } }

/* ---- PORTRAIT IMAGE (edge‑to‑edge) -------------------------------- */
.wc-portrait  { display:block; width:60%; max-width:720px; height:auto; margin:6rem auto; }
@media (max-width:61.24em){ .wc-portrait{ width:60%; } }
@media (max-width:46.24em){ .wc-portrait{ width:100%; } }

/* ---- QUOTES GRID --------------------------------------------------- */
.wc-quotes {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0rem 0rem;
  margin: 0rem 0;
  /* 20px side padding is still applied via the parent selector */
}

.wc-quote {
  font-size: 35px;
  line-height: 1.4;
  text-align: justify;
  width: 35%;
  width: auto;
  justify-self: start;
  border: 0 !important;
  margin: 0;
}

.wc-quote.left {
  grid-column: 1 / span 4;
  justify-self: start;
}

.wc-quote.right {
  grid-column: 9 / span 4;
    grid-row: 2;      /* <-- moves it to the next grid row */
  justify-self: end;
}

.wc-quote.center {
  grid-column: 4 / span 6;
  padding-top: 6rem; /* push it down by 4rem */
  justify-self: start;
}

@media (max-width: 61.24em) {
  .wc-quote {
    font-size: 25px;
    width: 50%;
    justify-self: start;
  }
  .wc-quote.left {
    grid-column: 1 / span 6;
  }
  .wc-quote.right {
    grid-column: 7 / span 6;
    justify-self: end;
  }
  .wc-quote.center {
    grid-column: 3 / span 8;
    padding-top: 0rem; /* push it down by 4rem */
  }
}

@media (max-width: 46.24em) {
  .wc-quotes {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
  .wc-quote {
    font-size: 20px;
    width: 90%;
    margin: 0 auto;
    justify-self: auto;
  }
  
    .wc-quote.center {
    padding-top: 0rem; /* push it down by 4rem */
    }
}

.wc-banner { position: relative; overflow: hidden; }
.wc-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.wc-banner-inner { position: relative; z-index: 1; }


/* ---- TIMELINE ------------------------------------------------------ */
/* timeline CSS lives in its own file so it isn’t repeated here */