/* ==========================================================================
   DMC SHARED SECTION-COMPONENT LIBRARY  (editable-page conversion, #11516)
   --------------------------------------------------------------------------
   BEM components used by the locked section partials in
   templates/partials/sections/*.  Every value here is a 1:1 extraction of the
   inline styles that previously lived in the page bodies, so a converted page
   renders pixel-identically to its inline-HTML baseline.

   Rules are scoped under `.dmc-body` so they beat the theme's element-level
   defaults (`.dmc-body h2`, `.dmc-body a`, …) — the recurring CSS-specificity
   gotcha (see the dmc-grav-theme memory).  Components carry NO inline styles.
   ========================================================================== */

:root {
  --c-teal:      #4caad4;   /* brand teal — pills, accents, links            */
  --c-teal-2:    #3d9bbf;   /* darker teal — stat-bar alternating cells      */
  --c-teal-dark: #3a99c3;   /* hover                                         */
  --c-grey:      #748d95;   /* body / headings                               */
  --c-tint:      #e8f5fb;   /* pale-teal pill + panel + timeline rail        */
  --c-tint-2:    #f8fbfd;   /* very-pale card / quote / panel background      */
  --c-card:      #f1f3f4;   /* feature-card background                       */
  --c-white:     #ffffff;
  --c-shadow:    0 4px 15px rgba(0,0,0,0.1);
}

/* Sections wrapper — replaces the old `.dmc-prose` container. Mirrors the
   prose base (font-size + line-height 1.75) the inline-HTML body inherited, so
   text-block heights stay identical; `overflow-x: clip` reproduces the prose
   clip that kept the negatively positioned timeline dots from triggering
   horizontal scroll on mobile. */
.dmc-body .c-sections { color: var(--c-grey); font-size: 1.0625rem; line-height: 1.75; overflow-x: clip; }

/* ── shared atoms ──────────────────────────────────────────────────────── */
.dmc-body .c-eyebrow {
  display: inline-block; background: var(--c-tint); color: var(--c-teal);
  padding: .35rem 1rem; border-radius: 999px; font-size: .85rem;
  font-weight: 600; margin-bottom: 1rem;
}

/* ── intro-split ───────────────────────────────────────────────────────── */
.dmc-body .c-intro {
  display: flex; gap: 3rem; align-items: center;
  margin-bottom: 2.5rem; flex-wrap: wrap;
}
.dmc-body .c-intro__col   { flex: 1; min-width: 280px; }
.dmc-body .c-intro__media { flex: 1; min-width: 280px; }
.dmc-body .c-intro__heading { color: var(--c-grey); font-size: 2rem; margin: 0 0 1rem; }
.dmc-body .c-intro__body p  { color: var(--c-grey); font-size: 1rem; line-height: 1.7; margin: 0 0 1rem; }
.dmc-body .c-intro--lead .c-intro__body p { font-size: 1.05rem; }
.dmc-body .c-intro__img {
  width: 100%; max-width: 480px; border-radius: 12px; box-shadow: var(--c-shadow);
  margin: 1rem 0;
}
.dmc-body .c-intro__quote {
  border-left: 4px solid var(--c-teal); margin: 1.5rem 0; padding: 1rem 1.5rem;
  background: var(--c-tint-2); border-radius: 0 8px 8px 0;
}
.dmc-body .c-intro__quote-text { color: var(--c-grey); font-style: italic; font-size: 1rem; line-height: 1.7; margin: 0; }
.dmc-body .c-intro__quote-attr { color: var(--c-teal); font-size: .85rem; font-weight: 600; margin: .5rem 0 0; }

/* ── stat-bar ──────────────────────────────────────────────────────────── */
.dmc-body .c-statbar {
  display: flex; border-radius: 12px; overflow: hidden;
  margin-bottom: 2.5rem; flex-wrap: wrap;
}
.dmc-body .c-statbar__cell {
  flex: 1; background: var(--c-teal); padding: 1.5rem;
  text-align: center; min-width: 130px;
}
.dmc-body .c-statbar__cell--alt { background: var(--c-teal-2); }
.dmc-body .c-statbar__value { color: var(--c-white); font-size: 1.5rem; font-weight: 700; }
.dmc-body .c-statbar__label { color: rgba(255,255,255,0.85); font-size: .85rem; margin-top: .25rem; }

/* ── section header (eyebrow + heading + optional lead) ────────────────── */
.dmc-body .c-section { margin-bottom: 2.5rem; }
.dmc-body .c-section__title { color: var(--c-grey); font-size: 2rem; margin: 0 0 1.5rem; }
.dmc-body .c-section--tight .c-section__title { margin: 0 0 .75rem; }
.dmc-body .c-section__lead { color: var(--c-grey); font-size: 1rem; line-height: 1.7; margin-bottom: 1.5rem; }

/* ── timeline ──────────────────────────────────────────────────────────── */
.dmc-body .c-timeline {
  position: relative; padding-left: 2rem; border-left: 3px solid var(--c-tint);
}
.dmc-body .c-timeline__item { margin-bottom: 1.5rem; position: relative; }
.dmc-body .c-timeline__dot {
  position: absolute; left: -2.6rem; top: .25rem; width: 1.2rem; height: 1.2rem;
  background: var(--c-teal); border-radius: 50%; border: 3px solid var(--c-white);
  box-shadow: 0 0 0 2px var(--c-teal);
}
.dmc-body .c-timeline__card { background: var(--c-tint-2); border-radius: 10px; padding: 1.25rem 1.5rem; }
.dmc-body .c-timeline__item--highlight .c-timeline__card {
  background: var(--c-tint); border: 2px solid var(--c-teal);
}
.dmc-body .c-timeline__year  { color: var(--c-teal); font-size: .9rem; font-weight: 700; margin-bottom: .25rem; }
.dmc-body .c-timeline__title { color: var(--c-grey); font-weight: 600; font-size: 1rem; margin-bottom: .35rem; }
.dmc-body .c-timeline__body  { color: var(--c-grey); font-size: .95rem; line-height: 1.6; margin: 0; }

/* ── gallery ───────────────────────────────────────────────────────────── */
.dmc-body .c-gallery__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.dmc-body .c-gallery__img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; margin: 1rem 0; }

/* ── feature-cards (icon chip + title + body) ─────────────────────────── */
.dmc-body .c-feature--panel {
  background: var(--c-tint-2); border-radius: 12px; padding: 2rem;
}
.dmc-body .c-feature--panel .c-section__title { font-size: 1.75rem; }
.dmc-body .c-feature__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}
.dmc-body .c-feature__grid--gap { margin-bottom: 2.5rem; }
.dmc-body .c-feature__card { background: var(--c-card); border-radius: 12px; padding: 1.75rem; }
.dmc-body .c-feature__icon {
  width: 48px; height: 48px; background: var(--c-tint); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.dmc-body .c-feature__icon img { width: 30px; height: 30px; object-fit: contain; }
.dmc-body .c-feature__title { color: var(--c-grey); font-size: 1.1rem; margin: 0 0 .5rem; }
.dmc-body .c-feature__body  { color: var(--c-grey); font-size: .95rem; line-height: 1.6; margin: 0; }

/* ── badge-grid (accreditations / logos) ──────────────────────────────── */
.dmc-body .c-badge-grid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.dmc-body .c-badge-grid__card { background: var(--c-tint-2); border-radius: 10px; padding: 1.25rem; text-align: center; }
.dmc-body .c-badge-grid__img {
  display: block; width: 80px; max-width: 100%; height: 60px; object-fit: contain;
  margin: 1rem auto .75rem;
}
.dmc-body .c-badge-grid__name { color: var(--c-grey); font-weight: 600; font-size: .9rem; }
.dmc-body .c-badge-grid__desc { color: var(--c-grey); font-size: .8rem; margin: .25rem 0 0; }

/* ── checklist-columns ─────────────────────────────────────────────────── */
.dmc-body .c-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 2.5rem; }
.dmc-body .c-checklist__col   { background: var(--c-tint-2); border-radius: 12px; padding: 1.75rem; }
.dmc-body .c-checklist__title { color: var(--c-teal); font-size: 1.2rem; margin: 0 0 1rem; }
.dmc-body .c-checklist__list  { list-style: none; padding: 0; margin: 0; }
.dmc-body .c-checklist__item  { color: var(--c-grey); padding: .4rem 0; border-bottom: 1px solid var(--c-tint); font-size: .95rem; margin-bottom: .5rem; }
.dmc-body .c-checklist__item:last-child { border-bottom: none; }
.dmc-body .c-checklist__tick  { color: var(--c-teal); margin-right: .5rem; }

/* ── cta-banner ────────────────────────────────────────────────────────── */
.dmc-body .c-cta {
  background: linear-gradient(135deg, #4caad4 0%, #4caad4 100%);
  border-radius: 12px; padding: 3rem 2.5rem; text-align: center;
  position: relative; overflow: hidden; margin-bottom: 1rem;
}
.dmc-body .c-cta__blob { position: absolute; border-radius: 50%; }
.dmc-body .c-cta__blob--tr { top: -30px; right: -30px; width: 120px; height: 120px; background: rgba(255,255,255,0.08); }
.dmc-body .c-cta__blob--bl { bottom: -40px; left: -20px; width: 160px; height: 160px; background: rgba(255,255,255,0.05); }
.dmc-body .c-cta__title { color: var(--c-white); font-size: 1.75rem; margin: 0 0 .75rem; position: relative; }
.dmc-body .c-cta__text  { position: relative; }
.dmc-body .c-cta__text p { color: var(--c-white); font-size: 1.15rem; margin: 0 0 1.5rem; }
.dmc-body .c-cta__text strong { color: var(--c-white); }
.dmc-body a.c-cta__btn {
  display: inline-block; background: var(--c-white); color: var(--c-teal);
  padding: .85rem 2.25rem; border-radius: 999px; font-weight: 700;
  font-size: 1.1rem; text-decoration: none; position: relative;
}
.dmc-body a.c-cta__btn:hover { color: var(--c-teal); background: var(--c-white); }

/* ── responsive (mirrors the #11464 inline-grid mobile-stack exactly) ──── */
/* Original collapsed repeat(2,1fr) → 1fr at ≤768px; repeat(3) was NOT
   collapsed (stayed 3-col). Reproduce that behaviour with classes. */
@media (max-width: 768px) {
  .dmc-body .c-feature__grid { grid-template-columns: 1fr; }
  .dmc-body .c-checklist      { grid-template-columns: 1fr; }
}