/* CAREpharma ingredient detail page (/en/ingredients/<slug>).
   Depends on root.css + style.css + home.css. Layout from Figma node 2114:2001. */

/* ===== Hero (dark image, white text) ===== */
.cp-ing-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #006f61 0%, #005344 100%); }
.cp-ing-hero__bg { position: absolute; inset: 0; z-index: 0; }
.cp-ing-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-ing-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 51, 42, .35) 0%, rgba(0, 51, 42, .72) 100%); }
.cp-ing-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); text-align: left; padding: var(--space-64) var(--space-edge); }

.cp-ing-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-8); font-size: var(--fs-small-2); color: rgba(255, 255, 255, .75); }
.cp-ing-breadcrumb a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.cp-ing-breadcrumb a:hover { color: var(--color-white); text-decoration: underline; }

.cp-ing-hero__eyebrow { text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-small); line-height: 24px; color: var(--color-primary-soft); }
.cp-ing-hero h1 { font-size: var(--fs-h1); line-height: 1.2; color: var(--color-white); }
.cp-ing-hero__sub { max-width: 720px; font-size: var(--fs-body); line-height: 30px; color: var(--color-grey-50); }
.cp-ing-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-top: var(--space-8); }

/* ===== Body ===== */
.cp-ing-body { display: block; }
.cp-ing-body .cp-container { display: flex; flex-direction: column; gap: var(--space-32); }

/* Overview — summary only by default; two columns when a verified image exists */
.cp-ing-overview { display: block; }
.cp-ing-overview--img { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-32); align-items: start; }
.cp-ing-summary { display: flex; flex-direction: column; gap: var(--space-16); background: var(--color-white); border: 1px solid var(--color-grey-100); border-radius: var(--radius-24); padding: var(--space-32); }
/* top clears the sticky nav (~64px) + a gap so the image isn't hidden under it */
.cp-ing-figure { position: sticky; top: calc(64px + var(--space-24)); border-radius: var(--radius-24); overflow: hidden; background: var(--color-white); border: 1px solid var(--color-grey-100); }
.cp-ing-figure img { display: block; width: 100%; height: auto; }
.cp-ing-pill { align-self: flex-start; background: var(--color-primary-50); color: var(--color-primary-400, #00ada1); font-size: var(--fs-small); line-height: 24px; padding: var(--space-4) var(--space-16); border-radius: var(--radius-pill); }
.cp-ing-name { font-size: var(--fs-h1); line-height: 1.15; color: var(--color-primary); }
.cp-ing-active { font-size: var(--fs-h3); line-height: 1.4; color: var(--color-grey-500); }
.cp-ing-label { font-weight: var(--fw-bold); font-size: var(--fs-small); color: var(--color-primary); margin-top: var(--space-8); }
.cp-ing-text { font-size: var(--fs-small); line-height: 1.7; color: var(--color-grey-500); }
.cp-ing-benefits { display: flex; flex-direction: column; gap: var(--space-8); padding-left: var(--space-24); margin: 0; }
.cp-ing-benefits li { list-style: disc; font-size: var(--fs-small); line-height: 1.6; color: var(--color-grey-500); }

/* Content blocks */
.cp-ing-block { display: flex; flex-direction: column; gap: var(--space-16); }
.cp-ing-h2 { font-size: var(--fs-h2); line-height: 1.2; color: var(--color-primary); }
.cp-ing-note { background: var(--color-white); border-left: 4px solid var(--color-primary-soft); border-radius: var(--radius-12); padding: var(--space-16); box-shadow: 0 4px 14px -4px rgba(0, 51, 41, .05); }
.cp-ing-note h3 { font-size: var(--fs-h3); line-height: 1.3; color: var(--color-primary-800); margin-bottom: var(--space-8); }
.cp-ing-note p { font-size: var(--fs-small); line-height: 1.7; color: var(--color-grey-500); }

/* Clinical study cards */
.cp-ing-study { display: flex; gap: var(--space-16); background: var(--color-white); border-left: 4px solid var(--color-primary-soft); border-radius: var(--radius-12); padding: var(--space-16); box-shadow: 0 4px 14px -4px rgba(0, 51, 41, .05); }
.cp-ing-study:nth-child(even) { background: var(--color-bg-02); }
.cp-ing-study__num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-white); font-weight: var(--fw-bold); }
.cp-ing-study__body { display: flex; flex-direction: column; gap: var(--space-8); }
.cp-ing-study__body h3 { font-size: var(--fs-h3); line-height: 1.3; color: var(--color-primary-800); }
.cp-ing-study__result { font-size: var(--fs-small); line-height: 1.7; color: var(--color-grey-500); }
.cp-ing-study__result span { font-weight: var(--fw-bold); color: var(--color-primary); }
.cp-ing-study__meta { font-size: var(--fs-small); line-height: 1.6; color: var(--color-grey-300); word-break: break-word; }
.cp-ing-study__meta span { font-weight: var(--fw-bold); }
.cp-ing-study__meta a { color: var(--color-primary); text-decoration: underline; }

/* References */
.cp-ing-refs { display: flex; flex-direction: column; gap: var(--space-16); background: var(--color-primary-50); border-radius: var(--radius-24); padding: var(--space-32); }
.cp-ing-refs ol { display: flex; flex-direction: column; gap: var(--space-8); padding-left: var(--space-24); }
.cp-ing-refs li { list-style: decimal; font-size: var(--fs-small); line-height: 1.6; word-break: break-word; }
.cp-ing-refs a { color: var(--color-primary); text-decoration: underline; }
.cp-ing-disclaimer { font-size: var(--fs-small-2); line-height: 1.6; color: var(--color-grey-400); font-style: italic; }

.cp-ing-back { padding-top: var(--space-8); }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .cp-ing-hero__inner { padding: var(--space-64) var(--space-32); }
  .cp-ing-hero h1 { font-size: var(--fs-h2); }
  .cp-ing-name { font-size: var(--fs-h2); }
  .cp-ing-overview--img { grid-template-columns: 1fr; }
  .cp-ing-figure { position: static; order: -1; }
}

@media (max-width: 575.98px) {
  .cp-ing-hero__inner { padding: var(--space-32) var(--space-16); }
  .cp-ing-overview--img { gap: var(--space-16); }
  .cp-ing-summary { padding: var(--space-16); gap: var(--space-8); }
  .cp-ing-refs { padding: var(--space-16); gap: var(--space-8); }
  .cp-ing-study { flex-direction: column; gap: var(--space-8); }
}