/* CAREpharma Success Stories page. Depends on root.css + style.css + home.css. */

/* ===== Hero (night-earth map, white text over dark overlay) ===== */
.cp-stories-hero {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-16);
  text-align: center; min-height: 391px; padding: var(--space-64) var(--space-edge);
  background: url("../../images/carepharma-life/stories-page/success-stories-l.webp") center/cover no-repeat;
}
.cp-stories-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); pointer-events: none; }
.cp-stories-hero > * { position: relative; z-index: 1; }
.cp-stories-hero .cp-stories-hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-small); color: var(--color-white); }
.cp-stories-hero h1 { color: var(--color-white); }
.cp-stories-hero p { max-width: 720px; font-size: var(--fs-body); color: var(--color-white); opacity: .9; }

/* ===== Global split (image + text + tags) ===== */
.cp-stories-split { display: flex; gap: var(--space-64); align-items: center; }
.cp-stories-split__img { flex: 0 0 540px; width: 540px; height: 440px; object-fit: cover; border-radius: var(--radius-24); }
.cp-stories-split__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.cp-stories-split__text h2 { color: var(--color-primary-900); }
.cp-stories-split__text p { color: var(--color-grey-500); font-size: var(--fs-small); }
.cp-stories-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.cp-stories-tag { background: var(--color-primary-50); color: var(--color-primary-700); padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); font-size: var(--fs-small-2); }
.cp-stories-tag-sep { color: var(--color-grey-300); }

/* ===== Outcomes (case-study cards) ===== */
.cp-stories-outcomes { background: var(--color-primary-50); }
.cp-stories-outcomes__head { text-align: center; margin-bottom: var(--space-32); }
.cp-stories-outcomes__head h2 { color: var(--color-primary-900); }
.cp-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); align-items: stretch; }
.cp-case-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-grey-100); border-radius: var(--radius-24); box-shadow: 0 12px 30px -8px rgba(0,51,41,.07); overflow: hidden; }
.cp-case-card__head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); height: 168px; text-align: center; color: var(--color-white); background: linear-gradient(180deg, #006b5e 0%, #004236 100%); }
.cp-case-card__head span { font-size: var(--fs-small-2); }
.cp-case-card__head h3 { color: var(--color-white); font-size: var(--fs-h2); }
.cp-case-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); }
.cp-case-card__cat { color: var(--color-primary-700); font-size: var(--fs-small-2); }
.cp-case-block p:first-child { color: var(--color-grey-300); font-size: var(--fs-small-2); margin-bottom: var(--space-4); }
.cp-case-block p:last-child { color: var(--color-grey-500); font-size: var(--fs-small); }
.cp-case-card__outcome { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-8); background: var(--color-primary-50); border-radius: var(--radius-12); padding: var(--space-16); }
.cp-case-card__outcome-label { color: var(--color-primary-700); font-size: var(--fs-small-2); display: flex; align-items: center; gap: var(--space-8); }
.cp-star { flex: 0 0 auto; width: 15px; height: 15px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M6.20343 4.71747C6.70653 3.61454 8.29347 3.61454 8.79657 4.71747C8.99825 5.15963 9.42289 5.46633 9.90661 5.51314C11.0877 5.62743 11.5545 7.10423 10.6697 7.89488C10.2972 8.22775 10.1319 8.73991 10.2437 9.22681L10.2546 9.27449C10.5284 10.4673 9.29567 11.444 8.19704 10.9047L8.15132 10.8822C7.74052 10.6806 7.25948 10.6806 6.84868 10.8822L6.80296 10.9047C5.70433 11.444 4.47163 10.4673 4.7454 9.27449L4.75635 9.22681C4.86809 8.73991 4.70278 8.22775 4.33028 7.89488C3.44551 7.10423 3.91234 5.62743 5.09339 5.51314C5.57711 5.46633 6.00175 5.15963 6.20343 4.71747Z' fill='%23945013'/%3E%3C/svg%3E"); }
.cp-case-card__outcome-hl { color: var(--color-primary-700); font-size: var(--fs-small); }
.cp-case-card__outcome-desc { color: var(--color-grey-500); font-size: var(--fs-small-2); }

/* ===== CTA band (image + overlay, white pill) ===== */
.cp-stories-cta { position: relative; text-align: center; color: var(--color-white); padding: var(--space-section) var(--space-edge); background: url("../../images/carepharma-life/expertise-page/science-l.webp") center/cover no-repeat; overflow: hidden; }
.cp-stories-cta::before { content: ""; position: absolute; inset: 0; background: rgba(0,40,45,.4); }
.cp-stories-cta > * { position: relative; z-index: 1; }
.cp-stories-cta__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-small); color: rgba(255,255,255,.85); margin-bottom: var(--space-16); }
.cp-stories-cta h2 { color: var(--color-white); font-size: var(--fs-h1); }
.cp-stories-cta p { margin: var(--space-16) auto var(--space-24); max-width: 760px; font-size: var(--fs-small); color: rgba(255,255,255,.85); }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .cp-stories-hero { min-height: 360px; padding-block: 48px; background-image: url("../../images/carepharma-life/stories-page/success-stories-m.webp"); }
  .cp-stories-split { flex-direction: column; align-items: stretch; gap: var(--space-32); }
  .cp-stories-split__img { order: -1; flex: 0 0 auto; width: 100%; height: 300px; }
  .cp-case-grid { grid-template-columns: 1fr; gap: var(--space-16); }
  .cp-stories-cta { padding-block: 56px; background-image: url("../../images/carepharma-life/expertise-page/science-m.webp"); }
}
@media (max-width: 575.98px) {
  .cp-stories-hero { min-height: 340px; background-image: url("../../images/carepharma-life/stories-page/success-stories-s.webp"); background-position: center bottom; }
  .cp-stories-cta { background-image: url("../../images/carepharma-life/expertise-page/science-s.webp"); }
  /* stacked full-width tags with down arrows (matches Figma 2154-1083) */
  .cp-stories-tags { flex-direction: column; align-items: stretch; width: 100%; gap: var(--space-8); }
  .cp-stories-tag { text-align: center; }
  .cp-stories-tag-sep { align-self: center; transform: rotate(90deg); }
  .cp-case-card__head { height: 100px; }
  .cp-case-card__body { padding: var(--space-16); }
}