/* ==========================================================================
   Database-managed pages: templates, blog, breadcrumb, video testimonials.
   Uses the site's own palette and type (see core.css :root) so these pages
   sit naturally next to the hand-built ones.
   ========================================================================== */

.ct { --ct-ink:#101722; --ct-soft:#57616D; --ct-navy:#0B2244; --ct-blue:#0F62C5; --ct-gold:#C7A06B; --ct-line:#E7DFC9; --ct-paper:#FBF8F0;
  color:var(--ct-ink); font-family:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
.ct-wrap { max-width:1480px; margin:0 auto; padding:6px 32px 64px; }
/* Content pages share the same 1480px rail and left gutter as every other page
   so the breadcrumb lines up at the same place and the top gap matches. The
   article itself keeps a comfortable reading width, left-aligned under the
   breadcrumb (rather than the old centred 900px column). */
.ct--standard .ct-wrap { max-width:1480px; }
.ct--standard .ip-article { max-width:900px; margin-left:0; margin-right:auto; }
.ct--full-width .ct-wrap { max-width:1480px; }

/* --- breadcrumb (plain variant on content/blog pages; elsewhere the page's
       own breadcrumb styles apply, and the hero variant keeps its styling) */
.ct .site-crumbs--plain { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:13.5px; line-height:1.5; color:#57616D; margin:4px 0 18px; letter-spacing:.01em; }
.ct .site-crumbs--plain a { color:#0F62C5; text-decoration:none; }
.ct .site-crumbs--plain a:hover { text-decoration:underline; text-underline-offset:2px; }
.ct .site-crumbs--plain .hx-sep { opacity:.45; }
.ct .site-crumbs--plain .hx-cur { color:#0B2244; font-weight:600; }
.ct .site-crumbs--plain .site-crumbs__text { color:#57616D; }

/* --- preview bar */
.ct-preview-bar { position:sticky; top:0; z-index:50; background:#FDF3D7; color:#6B4A12; border-bottom:1px solid #E9CF8F; padding:10px 20px; font:600 14px/1.4 "Raleway",sans-serif; text-align:center; }

/* --- headings */
.ct-title { font-family:"Montserrat","Segoe UI",sans-serif; font-size:clamp(30px,4.6vw,48px); line-height:1.14; color:#0B2244; font-weight:600; letter-spacing:-.01em; margin:0 0 14px; }
.ct-meta { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; color:#57616D; font-size:14px; margin:0 0 22px; }
.ct-meta a { color:#0F62C5; text-decoration:none; }
.ct-chip { display:inline-block; background:#E7F0FC; color:#0B2244; border-radius:999px; padding:3px 11px; font-size:12.5px; font-weight:600; text-decoration:none; }
.ct-chip:hover { background:#d6e6fb; }

/* --- article tags row (rebuilt from the imported post-footer in ContentPage::articleBody) */
.ip-tags { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:32px 0 0; padding-top:22px; border-top:1px solid #E7DFC9; }
.ip-tags__label { color:#0B2244; font-weight:600; font-size:14.5px; margin-right:2px; }
.ip-tags .ct-chip { padding:7px 15px; font-size:13px; border:1px solid #CBDCF6; background:#EEF4FD; line-height:1.2; }
.ip-tags .ct-chip:hover { background:#dbe8fb; border-color:#9FBDEE; }

/* --- two-column layout */
.ct-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:start; }
@media (max-width:980px) { .ct-grid { grid-template-columns:1fr; gap:28px; } }

/* --- featured picture */
.ct-cover { margin:0 0 26px; border-radius:16px; overflow:hidden; background:#E7F0FC; aspect-ratio:16/8; box-shadow:0 10px 30px rgba(11,34,68,.12); }
.ct-cover img { width:100%; height:100%; object-fit:cover; display:block; margin:0; border-radius:0; }

/* --- article body reuses .ip-article typography (imported-page.css) */
.ct .ip-article { max-width:none; }
.ct .ip-article > :first-child { margin-top:0; }
.ct .ip-article iframe { max-width:100%; }

/* --- home-style landing body (exosome, diet): a wide, full-page measure, with
       the first content image floated beside the intro text, then full width. */
.ct--landing .ip-article { max-width:1180px; margin-inline:auto; }
.ct--landing .ip-article .landing-lead-media { float:left; width:min(42%,440px); margin:4px 32px 18px 0; }
.ct--landing .ip-article .landing-lead-media img { width:100%; height:auto; display:block; margin:0; border-radius:14px; box-shadow:0 12px 30px rgba(11,34,68,.14); }
@media (max-width:640px) { .ct--landing .ip-article .landing-lead-media { float:none; width:100%; margin:0 0 18px; } }

/* --- sidebar */
.ct-aside { display:flex; flex-direction:column; gap:20px; position:sticky; top:96px; }
@media (max-width:980px) { .ct-aside { position:static; } }
.ct-box { background:#fff; border:1px solid #E7DFC9; border-radius:16px; padding:18px 18px 16px; box-shadow:0 1px 1px rgba(11,35,64,.04), 0 8px 22px -12px rgba(11,35,64,.18); }
.ct-box h2, .ct-box h3 { font-family:"Montserrat","Segoe UI",sans-serif; font-size:19px; color:#0B2244; margin:0 0 12px; font-weight:600; }
.ct-list { list-style:none; margin:0; padding:0; }
.ct-list li { margin:0; padding:9px 0; border-top:1px solid #F0EADB; font-size:14.5px; line-height:1.45; }
.ct-list li:first-child { border-top:0; padding-top:0; }
.ct-list a { color:#0B2244; text-decoration:none; }
.ct-list a:hover { color:#0F62C5; text-decoration:underline; text-underline-offset:2px; }
.ct-list .ct-mini { display:flex; gap:10px; align-items:flex-start; }
.ct-list .ct-mini img { width:62px; height:46px; object-fit:cover; border-radius:8px; flex:none; background:#E7F0FC; }
.ct-list time { display:block; color:#6B7581; font-size:12.5px; margin-top:2px; }
.ct-chips { display:flex; flex-wrap:wrap; gap:6px; }

.ct-cta { background:linear-gradient(160deg,#0B2244,#0F3D7A); color:#fff; border:0; }
.ct-cta h2, .ct-cta h3 { color:#fff; }
.ct-cta p { color:rgba(255,255,255,.86); font-size:14.5px; line-height:1.55; margin:0 0 14px; }
.ct-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border-radius:999px; padding:11px 16px; font-weight:600; font-size:14.5px; text-decoration:none; margin-top:8px; }
.ct-btn--gold { background:#C7A06B; color:#0B2244; }
.ct-btn--gold:hover { background:#d6b47f; }
.ct-btn--ghost { border:1px solid rgba(255,255,255,.5); color:#fff; }
.ct-btn--ghost:hover { background:rgba(255,255,255,.08); }

/* --- sub-pages */
.ct-children { margin:34px 0 0; }
.ct-children h2 { font-family:"Montserrat","Segoe UI",sans-serif; color:#0B2244; font-size:24px; margin:0 0 14px; }

/* --- blog cards */
.ct-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:22px; }
.ct-card { display:flex; flex-direction:column; background:#fff; border:1px solid #E7DFC9; border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease; }
.ct-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px -18px rgba(11,34,68,.35); }
.ct-card__img { aspect-ratio:16/10; background:#E7F0FC center/cover no-repeat; display:block; }
.ct-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
.ct-card__body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.ct-card__date { color:#6B7581; font-size:12.5px; }
.ct-card__title { font-family:"Montserrat","Segoe UI",sans-serif; font-size:16.8px; line-height:1.35; color:#0B2244; margin:0; font-weight:600; }
.ct-card__text { color:#57616D; font-size:14.72px; line-height:1.55; margin:0; }
.ct-card__more { margin-top:auto; color:#0F62C5; font-weight:700; font-size:12.8px; }

.ct-intro { color:#57616D; font-size:17px; line-height:1.78; max-width:760px; margin:0 0 26px; }
.ct-cats { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.ct-cats a { border:1px solid #E7DFC9; background:#fff; color:#0B2244; border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:600; text-decoration:none; }
.ct-cats a[aria-current="page"], .ct-cats a:hover { background:#0B2244; color:#fff; border-color:#0B2244; }

.ct-pager { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin:34px 0 0; }
.ct-pager a, .ct-pager span { min-width:40px; text-align:center; padding:8px 13px; border-radius:10px; border:1px solid #E7DFC9; background:#fff; color:#0B2244; text-decoration:none; font-weight:600; font-size:14px; }
.ct-pager a:hover { border-color:#0F62C5; color:#0F62C5; }
.ct-pager [aria-current="page"] { background:#0B2244; border-color:#0B2244; color:#fff; }
.ct-pager .ct-gap { border:0; background:none; }

/* --- video testimonials (shared by the grid and per-page sections) */
.vt-section { max-width:1480px; margin:0 auto; padding:clamp(36px,5vw,64px) 20px; }
.vt-section h2 { font-family:"Montserrat","Segoe UI",sans-serif; color:#0B2244; font-size:clamp(19px,2.1vw,24px); margin:0 0 18px; font-weight:600; }
.vt-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.vt-card { background:#fff; border:1px solid #E7DFC9; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.vt-thumb { position:relative; display:block; width:100%; aspect-ratio:16/9; background:#0B2244; border:0; padding:0; cursor:pointer; overflow:hidden; }
.vt-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease, opacity .25s ease; opacity:.92; }
.vt-thumb:hover img, .vt-thumb:focus-visible img { transform:scale(1.04); opacity:1; }
.vt-thumb iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vt-play { position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:rgba(199,160,107,.95); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.vt-play svg { width:24px; height:24px; fill:#0B2244; margin-left:3px; }
.vt-body { padding:12px 14px 14px; }
.vt-title { font-size:14.5px; line-height:1.45; color:#0B2244; font-weight:600; margin:0; }
.vt-tags { margin-top:6px; color:#6B7581; font-size:12.5px; }
.vt-thumb:focus-visible { outline:3px solid #C7A06B; outline-offset:2px; }
.vt-card[hidden], .pmh-chips [hidden] { display:none !important; }

/* =========================================================================
   IMAGE-LIST CARD GRID — four-per-row "Articles You May Interest"-style cards
   -------------------------------------------------------------------------
   Imported index pages (Diseases Treated, Patient Guide) store each item as a
   bare "image link + heading" pair with no wrapper, so the browser stacks them
   as full-width banners. ContentPage::cardifyImageLists() groups each run into
   .dt-grid / .dt-card; this styles them like the site's article cards — white
   rounded card, a uniform image height via a fixed aspect ratio, the title
   below, and a gentle hover lift. Four to a row on desktop, degrading to
   3 / 2 / 1 columns on narrower screens. Handles both card shapes: a bare
   <a><img></a> (h3 title) and a <figure><a><img></a></figure> (h2 title).
   ========================================================================= */
.dt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:24px 0 36px;}
.dt-card{display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(16,23,34,.09);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(11,34,68,.05),0 10px 24px -18px rgba(11,34,68,.35);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.dt-card:hover{transform:translateY(-4px);border-color:rgba(15,98,197,.35);
  box-shadow:0 18px 36px -16px rgba(11,34,68,.45);}
.dt-card figure{margin:0;}
.dt-card figure,
.dt-card > a:first-child{display:block;line-height:0;}
.dt-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  display:block;background:var(--pine-pale,#E7F0FC);}
.dt-card h2,
.dt-card h3{margin:0;padding:16px 18px 18px;font-family:var(--sans);
  font-size:15.5px;line-height:1.4;font-weight:600;color:var(--ink,#101722);}
.dt-card h2 a,
.dt-card h3 a{color:inherit;text-decoration:none;}
.dt-card h2 a:hover,
.dt-card h3 a:hover{color:var(--pine,#0F62C5);text-decoration:underline;}
/* Optional category line under the title (e.g. "Neurodisorders"). */
.dt-card h2,
.dt-card h3{padding-bottom:6px;}
.dt-card .dt-cat{margin:0;padding:0 18px 16px;font-family:var(--sans);
  font-size:13px;line-height:1.3;color:var(--ink-soft,#57616D);}
@media (max-width:1040px){.dt-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.dt-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media (max-width:460px){.dt-grid{grid-template-columns:1fr;}}