/* ==========================================================================
   success_story.css
   Used by  : success_stories.html  |  story.html
   Depends  : style.css  (all custom properties, .glass-card, .glass-panel,
              .page-bg, .eyebrow, .btn-cta, .section-heading)
   Load order: style.css → success_story.css

   Specificity strategy — zero !important:
     .glass-X.modifier  (0,2,0)  always beats  .glass-X  (0,1,0)
     .parent child       (0,1,1)  always beats  child     (0,0,1)
   ========================================================================== */


/* ─────────────────────────────────────────────────────────────────────────
   1. STORY LISTING CARDS  (success_stories.html)
   Markup: <article class="glass-card story-list-card">
───────────────────────────────────────────────────────────────────────── */

/* Zeros glass-card's native 40px padding so the photo sits flush */
.glass-card.story-list-card {
  padding    : 0;
  overflow   : hidden;
  display    : flex;
  flex-direction: column;
  height     : 100%;
}

.story-img-frame {
  width          : 100%;
  height         : 240px;
  overflow       : hidden;
  flex-shrink    : 0;
  background-color: var(--color-cream);
}

.story-img-frame img {
  width         : 100%;
  height        : 100%;
  object-fit    : cover;
  object-position: top;
  display       : block;
  transition    : transform 0.45s ease;
}

.glass-card:hover .story-img-frame img { transform: scale(1.04); }

.story-card-body {
  padding       : 20px 22px 24px;
  display       : flex;
  flex-direction: column;
  flex          : 1;
}

/* .story-card-body h3 (0,1,1) overrides global h3 (0,0,1) clamp size */
.story-card-body h3 {
  font-size  : 1.12rem;
  line-height: 1.35;
  margin-bottom: 4px;
}

.story-card-excerpt {
  flex          : 1;
  font-size     : 0.94rem;
  line-height   : 1.7;
  margin-bottom : 20px;
}

.story-card-btn {
  display      : block;
  text-align   : center;
  padding      : 11px 20px;
  background   : var(--color-maroon);
  color        : #fff;
  font-family  : 'Inter', sans-serif;
  font-size    : 0.88rem;
  font-weight  : 700;
  text-decoration: none;
  border-radius: 999px;
  transition   : background var(--transition-base), transform var(--transition-base);
}

.story-card-btn:visited,
.story-card-btn:focus { color: #fff; }

.story-card-btn:hover {
  background: var(--color-brick);
  color     : #fff;
  transform : translateY(-2px);
}


/* ─────────────────────────────────────────────────────────────────────────
   2. OPENING HOOK  (story.html)
   Markup: <div class="glass-panel impact-summary-quote">
           Combined selector (0,2,0) adds left-border without overriding
           the glass-panel background via !important.
───────────────────────────────────────────────────────────────────────── */

.glass-panel.impact-summary-quote {
  border-left  : 5px solid var(--color-gold);
  padding      : 36px 44px;
  text-align   : center;
  margin-bottom: 24px;
}

/* Semantic: <p> inside <blockquote>, never an <h*> element */
.story-hook-text {
  font-family : 'Playfair Display', serif;
  font-size   : clamp(1.05rem, 2.4vw, 1.28rem);
  font-weight : 500;
  font-style  : italic;
  line-height : 1.85;
  color       : var(--color-maroon);
  margin-bottom: 16px;
  text-align  : center;
}

.story-hook__attr {
  display       : block;
  font-family   : 'Inter', sans-serif;
  font-size     : 0.78rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color         : var(--color-brown);
}


/* ─────────────────────────────────────────────────────────────────────────
   3. MAIN NARRATIVE PANEL  (story.html)
   Markup: <div class="glass-panel story-panel">
───────────────────────────────────────────────────────────────────────── */

.glass-panel.story-panel {
  padding      : 44px;
  margin-bottom: 24px;
}

/* h1 colour + size from style.css; only spacing adjusted here */
.story-panel__name { margin-bottom: 8px; }
.story-panel__role { margin-bottom: 28px; }


/* ─────────────────────────────────────────────────────────────────────────
   4. RESPONSIVE VIDEO
   Desktop (> 992px): fixed 380px — appropriate height beside text column.
   Mobile  (≤ 992px): intrinsic 16:9 ratio when columns stack full-width.
───────────────────────────────────────────────────────────────────────── */

.story-video-wrap {
  width        : 100%;
  height       : 380px;
  border-radius: var(--radius-lg);
  overflow     : hidden;
  border       : 4px solid #fff;
  box-shadow   : var(--shadow-md);
}

.story-video-wrap iframe {
  width : 100%;
  height: 100%;
  border: none;
}

.story-video__meta { padding-top: 14px; }


/* ─────────────────────────────────────────────────────────────────────────
   5. STORY BODY TEXT
───────────────────────────────────────────────────────────────────────── */

/* <p> and <strong> base styles from style.css; spacing only here */
.desc p            { margin-bottom: 1.2rem; }
.desc p:last-child { margin-bottom: 0; }

.desc blockquote {
  font-family : 'Playfair Display', serif;
  font-size   : 1.05rem;
  font-style  : italic;
  line-height : 1.8;
  color       : var(--color-maroon);
  border-left : 4px solid var(--color-gold);
  padding     : 8px 0 8px 20px;
  margin      : 22px 0;
}


/* ─────────────────────────────────────────────────────────────────────────
   6. DONATE CTA PANEL  (story.html)
   Markup: <div class="glass-panel cta-story-footer">
───────────────────────────────────────────────────────────────────────── */

.glass-panel.cta-story-footer {
  background   : linear-gradient(135deg, rgba(255,255,255,0.82), rgba(253,250,246,0.92));
  border       : 1px solid rgba(244, 164, 96, 0.22);
  box-shadow   : var(--shadow-md);
  padding      : 52px;
  text-align   : center;
  margin-bottom: 40px;
}

/* h2 colour from style.css; spacing only */
.glass-panel.cta-story-footer h2 { margin-bottom: 12px; }

.story-cta-sub {
  max-width    : 540px;
  margin       : 0 auto 28px;
  text-align   : center;
}

.story-cta-link {
  font-family: 'Inter', sans-serif;
  font-size  : 0.9rem;
  font-weight: 600;
  color      : var(--color-brown);
  text-decoration: none;
  transition : color var(--transition-base);
}

.story-cta-link:hover { color: var(--color-maroon); }


/* ─────────────────────────────────────────────────────────────────────────
   7. BREADCRUMB
   .breadcrumb.custom-breadcrumb (0,2,0) beats Bootstrap .breadcrumb (0,1,0)
───────────────────────────────────────────────────────────────────────── */

.breadcrumb.custom-breadcrumb {
  background: transparent;
  padding   : 0;
  margin    : 0;
}

.custom-breadcrumb .breadcrumb-item a {
  color      : var(--color-brown);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size  : 0.88rem;
  font-weight: 500;
  transition : color var(--transition-base);
}

.custom-breadcrumb .breadcrumb-item a:hover { color: var(--color-orange); }

.custom-breadcrumb .breadcrumb-item.active {
  color      : var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size  : 0.88rem;
}


/* ─────────────────────────────────────────────────────────────────────────
   8. MISC
───────────────────────────────────────────────────────────────────────── */

.info-designation {
  display     : block;
  font-family : 'Inter', sans-serif;
  font-size   : 0.84rem;
  font-style  : italic;
  letter-spacing: 0.3px;
  color       : var(--text-muted);
}


/* ─────────────────────────────────────────────────────────────────────────
   9. RESPONSIVE
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
  /* Columns stack → switch to intrinsic 16:9 ratio */
  .story-video-wrap {
    position      : relative;
    height        : 0;
    padding-bottom: 56.25%;
  }

  .story-video-wrap iframe {
    position: absolute;
    inset   : 0;
    height  : 100%;
  }

  .glass-panel.story-panel      { padding: 32px 24px; }
  .glass-panel.cta-story-footer { padding: 40px 28px; }
}

@media (max-width: 768px) {
  .glass-panel.impact-summary-quote { padding: 28px 20px; }
  .glass-panel.story-panel          { padding: 24px 16px; }
  .glass-panel.cta-story-footer     { padding: 32px 16px; }
  .story-img-frame                  { height: 200px; }
  .desc blockquote                  { font-size: 1rem; padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-img-frame img,
  .story-card-btn { transition: none; }
  .glass-card:hover .story-img-frame img { transform: none; }
}