/* =============================================================================
   Story Feature Block — acf/story-feature
   ============================================================================= */

/* ── Outer layout ────────────────────────────────────────────────────────────── */

.story-feature {
  display: grid;
  grid-template-columns: 40fr 60fr;
  min-height: 620px;
}

.quote{border:1px solid #999;border-width:1px 0 1px 0;padding:2.5rem 0;margin:3rem 0 !important}
.quote.x-border{border:0;padding:0;}
.quote blockquote{padding-left:20px}
/* ── Left column ─────────────────────────────────────────────────────────────── */

.story-feature__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right:-150px;
  position:relative;
  z-index:10;
}

/* ── Blockquote ──────────────────────────────────────────────────────────────── */

/* Reset any theme blockquote pseudo-elements */
.story-feature__quote,
.story-feature__quote::before,
.story-feature__quote::after {
  all: unset;
}

.story-feature__quote {
  display: block;
  margin: 0;
}
.story-feature__quote-text{
  margin-top:-50px;
  position:relative;
  z-index:2;
}
/* Inlined SVG quote mark */
.story-feature__quote-mark {
  display: block;
  width: clamp(40px, 5vw, 68px);
  height: auto;
  margin-bottom: 1rem;
  transform: translate(calc(-15px - 2.5vw), 0);
  position:relative;
  z-index:1;
}


.story-feature__quote p {
  display: block;
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  color: #111;
}

.story-feature__quote cite {
  display: block;
  font-style: italic;
  font-size: 1.25rem;
  color: #231F20;
  margin-top: 0.75rem;
}

.story-feature__highlight {
  color: #ff0000;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.5rem, 1.76rem + 3.7vw, 4.0625rem);
  line-height:1;
}
.story-feature__quote span{
  display:inline-block;
  vertical-align:top;
  padding-top:10px;
}
.story-feature__quote span.qm{
  margin-left:-20px;
}

/* ── Secondary (small) image ─────────────────────────────────────────────────── */

.story-feature__small-image {
  margin-top: 2.5rem;  /* space from quote, flex handles alignment */
  flex-shrink: 0;
}

.story-feature__small-image img {
  display: block;
  width: 260px;
  max-width: 100%;
  height: 200px;
  object-fit: cover;
}

/* ── Right column ────────────────────────────────────────────────────────────── */
/*
 * Two explicit row tracks:
 *   1fr  → photo fills remaining height
 *   auto → content card height
 * The photo spans both rows (grid-row: 1 / -1), the card lives in
 * row 2 and pulls up via negative margin-top.
 */

.story-feature__right {
  display: grid;
  grid-template-rows: 1fr auto;
  position:relative;
  z-index:5;
}

.story-feature__main-image {
  grid-row: 1 / 2;
  grid-column: 1;
  overflow: hidden;
  position:relative;
  z-index:2;
}

.story-feature__main-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ── Content card ────────────────────────────────────────────────────────────── */

.story-feature__content-card {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  z-index: 1;
  background: #ECEADB;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(8rem, 3vw, 4rem);
  margin-top: -80px;
  margin-left:-50px;
  border-right:70px #fff solid;
}

.story-feature__body {
  font-size: 1rem;
  line-height: 1.65;
  color: #333;
  margin-bottom: 1.75rem;
}

.story-feature__body p {
  margin: 0;
}

/* ── CTA button ──────────────────────────────────────────────────────────────── */
.feature_button{text-align:center;margin-bottom:-3.5rem;}
.story-feature__cta {
  display: inline-block;
  background-color: #ff0000;
  color: #fff;
  padding: 0.7rem 2.5rem;
  font-size: 1em;
  font-weight: 400;
  text-decoration: none;
  transition: background-color 0.2s ease;
  border-radius:5px;
}

.story-feature__cta:hover,
.story-feature__cta:focus-visible {
  background-color: #00695E;
  color: #fff;
  text-decoration:none;
}

/* =============================================================================
   Responsive
   ============================================================================= */
/*.story-feature__left {
  padding: clamp(2rem, 5vw, 4rem);
  padding-left:30%;
}
@media (min-width: 1151px) and (max-width: 1250px) {
.story-feature__left {padding-left: 7%;}
}
@media (min-width: 1025px) and (max-width: 1150px) {
.story-feature__left {padding-left: 7%;}
}
@media (min-width: 901px) and (max-width: 1024px) {
.story-feature__left {padding-left: 1.5%;}
}
@media (min-width: 641px) and (max-width: 900px) {
  .story-feature__left {padding: 2rem 1.75rem;margin-right:0;}
}
@media (max-width: 640px) {
  .story-feature__left {padding: 2rem 1.25rem 1.5rem;}
}*/

.story-feature__left {
  padding: clamp(2rem, 5vw, 4rem);
  padding-left: clamp(1.5%, 3vw, 30%);
}

@media (min-width: 641px) and (max-width: 900px) {
  .story-feature__left {
    padding: 2rem 1.75rem;
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  .story-feature__left {
    padding: 2rem 1.25rem 1.5rem;
  }
}

/* ── Tablet (641px – 900px) ──────────────────────────────────────────────────── */

@media (min-width: 641px) and (max-width: 900px) {

  .story-feature {
    min-height: 480px;
  }

  .story-feature__left {
    margin-right:0;
  }
  .story-feature__quote-mark {
    margin-left: -30px;
    transform:translate(0, -15px);
  }

  .story-feature__small-image img {
    width: 180px;
    height: 160px;
  }

  .story-feature__content-card {
    margin-top: 0;
    margin-left: 0;
    border-right:none;
    padding-top:clamp(1.5rem, 3vw, 2.5rem);
  }
  .feature_button{text-align:center;margin-bottom:-2.4rem}
}


/* ── Mobile (≤640px) ─────────────────────────────────────────────────────────── */
/*
 * Stack order:
 *   1. Quote + attribution
 *   2. Main photo (300px fixed height)
 *   3. Content card (small overlap preserved)
 *
 * Secondary image hidden — decorative context that doesn't earn
 * its space at this width.
 */

@media (max-width: 640px) {

  .story-feature {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .story-feature__left {
    margin-right:0;
  }
  .story-feature__quote-mark {
    margin-left: -30px;
    transform:translate(0, -15px);
  }

  .story-feature__small-image {
    display: none;
  }

  .story-feature__right {
    grid-template-rows: 300px auto;
  }

  /* Image: no longer spanning — sits in its explicit 300px row only */
  .story-feature__main-image {
    grid-row: 1;
    grid-column: 1;
    height: 300px;
  }

  .story-feature__main-image img {
    height: 100%;
  }

  .story-feature__content-card {
    grid-row: 2;
    margin-top: 20px;
    margin-left: 0;
    padding: 1.5rem 1.25rem;
    border-right:none;
  }

  .story-feature__cta {
    display: block;
    text-align: center;
  }
  .feature_button{text-align:center;margin-bottom:-3rem;}
}