/* CAREpharma Core Ingredients library. Depends on root.css + style.css + home.css. */

/* ===== Page header (image hero) ===== */
.cp-ci-pagehead { position: relative; overflow: hidden; background: linear-gradient(180deg, #006f61 0%, #005344 100%); }
.cp-ci-pagehead__bg { position: absolute; inset: 0; z-index: 0; }
.cp-ci-pagehead__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-ci-pagehead::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(1, 114, 125, .6); }
.cp-ci-pagehead__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; padding: var(--space-64, 64px) var(--space-edge); }
.cp-ci-pagehead__eyebrow { text-transform: uppercase; font-size: var(--fs-small); line-height: 24px; color: var(--color-white); }
.cp-ci-pagehead h1 { font-size: var(--fs-h1); line-height: 57.6px; color: var(--color-white); }
.cp-ci-pagehead__sub { max-width: 680px; font-size: var(--fs-body); line-height: 30px; color: var(--color-white); }
.cp-ci-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); margin-top: var(--space-8); list-style: none; padding: 0; }
.cp-ci-badges li { background: rgba(255, 255, 255, .2); border: 1px solid var(--color-white); border-radius: var(--radius-pill); padding: var(--space-8) var(--space-16); font-size: var(--fs-small-2); color: var(--color-white); }

/* ===== Section header + catalog (one continuous light-mint band) ===== */
.cp-ci-hero { text-align: center; padding: var(--space-section) var(--space-edge) var(--space-16); background: var(--color-primary-50); }
.cp-ci-catalog { background: var(--color-primary-50); padding-top: var(--space-16); }
.cp-ci-hero .cp-ci-hero__eyebrow { text-transform: uppercase; font-size: var(--fs-small); line-height: 24px; color: var(--color-secondary-ink); margin-bottom: var(--space-8); }
.cp-ci-hero h2 { font-size: var(--fs-h2); line-height: 38.4px; color: var(--color-primary-900); }
.cp-ci-hero p { margin: var(--space-8) auto 0; max-width: 720px; font-size: var(--fs-small); line-height: 24px; color: var(--color-grey-400); }

/* ===== Category section ===== */
.cp-ci-cat + .cp-ci-cat { margin-top: var(--space-section); }
.cp-ci-cat__head { display: flex; align-items: center; gap: var(--space-16); margin-bottom: var(--space-32); }
.cp-ci-cat__head h2 { font-size: var(--fs-h3); line-height: 1.5; color: var(--color-primary-900); }
.cp-ci-count { flex: 0 0 auto; background: var(--color-secondary-50); color: var(--color-secondary-ink); font-size: var(--fs-small-2); line-height: 21px; padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); }

/* ===== Grid ===== */
.cp-ci-grid { display: grid; gap: var(--space-16); grid-template-columns: repeat(3, 1fr); }

/* ===== Card ===== */
.cp-ci-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-grey-100); border-radius: var(--radius-12); overflow: hidden; box-shadow: 0 10px 24px -8px rgba(0, 51, 41, .06); }
.cp-ci-card__head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); height: 118px; text-align: center; padding: 0 var(--space-16); color: var(--color-white); background: linear-gradient(180deg, #006b5e 0%, #004236 100%); }
.cp-ci-card__head h3 { color: var(--color-white); font-size: var(--fs-h3); line-height: 1.5; }
.cp-ci-card__link { color: inherit; text-decoration: none; }
.cp-ci-card__link:hover { text-decoration: underline; }
.cp-ci-card__more { margin-top: var(--space-8); align-self: flex-start; font-size: var(--fs-small-2); font-weight: var(--fw-bold); color: var(--color-primary); text-decoration: none; }
.cp-ci-card__more:hover { text-decoration: underline; }
.cp-ci-card__head .cp-ci-sub { font-size: var(--fs-small-2); line-height: 21px; font-weight: var(--fw-regular); color: var(--color-white); }
.cp-ci-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--space-8); padding: var(--space-16) var(--space-24) var(--space-24); color: var(--color-grey-500); }

.cp-ci-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.cp-ci-pill { font-size: var(--fs-small-2); line-height: 21px; padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); }
.cp-ci-pill--origin { background: var(--color-primary-50); color: var(--color-primary-700); }
.cp-ci-pill--tag { background: var(--color-secondary-50); color: var(--color-secondary-ink); }

.cp-ci-whatis-h { color: var(--color-primary-900); font-size: var(--fs-small); line-height: 24px; }
.cp-ci-whatis { color: var(--color-grey-500); font-size: var(--fs-small-2); line-height: 21px; }
.cp-ci-moa-label { color: var(--color-secondary-ink); font-size: var(--fs-small-2); line-height: 21px; text-transform: uppercase; }
.cp-ci-moa { color: var(--color-grey-500); font-size: var(--fs-small-2); line-height: 21px; }

.cp-ci-clinical { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-primary-50); border-radius: var(--radius-12); padding: var(--space-8) var(--space-16); }
.cp-ci-clinical__label { color: var(--color-primary-700); font-size: var(--fs-small-2); line-height: 21px; text-transform: uppercase; }
.cp-ci-clinical__stat { color: var(--color-primary-700); font-size: var(--fs-small); line-height: 24px; }
.cp-ci-clinical__note { color: var(--color-grey-500); font-size: var(--fs-small-2); line-height: 21px; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .cp-ci-hero { padding-block: 56px; }
  .cp-ci-pagehead__inner { padding-block: 48px; }
  .cp-ci-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .cp-ci-grid { grid-template-columns: 1fr; }
  .cp-ci-cat__head { flex-wrap: wrap; gap: var(--space-8); }
  .cp-ci-pagehead h1 { font-size: var(--fs-h2); line-height: 1.2; }
  .cp-ci-badges { flex-direction: column; align-items: stretch; width: 100%; }
  .cp-ci-badges li { width: 100%; text-align: center; }
}