/* ===========================================================================
   cms.css — CMS-driven components (sections, cards, bands, admin-authored UI)
   ---------------------------------------------------------------------------
   LOAD ORDER: this file is loaded AFTER theme.css, so its declarations win for
   any property both files set. Components owned here — .cardgrid, .topstrip,
   .ctaband, .tcard, .prose, .phero and others — must be edited here, not in
   theme.css, or the change will be silently overridden.
   =========================================================================== */

/* ==========================================================================
   CMS component layer
   Loaded after theme.css. Adds the components the dynamic site needs that
   the static concept did not have — listings, cards, forms, search,
   pagination and utility pages — built on the approved token set so they
   inherit the same art direction.
   ========================================================================== */

/* --- Top strip & promo banners ----------------------------------------- */
.topstrip { background: var(--jade-2); color: #fff; font-size: var(--t-xs); }
.topstrip__in { display: flex; align-items: center; justify-content: space-between;
                gap: 1rem; flex-wrap: wrap; padding: .5rem 0; }
.topstrip p, .topstrip a { display: flex; align-items: center; gap: .375rem; margin: 0; color: #fff; }
.topstrip svg { width: 14px; height: 14px; }

.promo { background: var(--jade); color: #fff; }
.promo__in { display: flex; align-items: center; justify-content: center;
             gap: 1rem; flex-wrap: wrap; padding: .625rem 0; font-size: var(--t-sm); }
.promo p { margin: 0; }
.promo .btn { background: #fff; color: var(--jade-2); border-color: #fff; }

/* --- Masthead search ---------------------------------------------------- */
.masthead__search { position: relative; display: none; }
.masthead__search input {
  width: 190px; height: 38px; padding: 0 2.25rem 0 .75rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--mist); font-size: var(--t-sm); color: var(--ink);
}
.masthead__search input:focus { outline: none; border-color: var(--jade); background: #fff; }
.masthead__search button {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: .375rem; color: var(--slate-2); cursor: pointer;
}
@media (min-width: 1100px) { .masthead__search { display: block; } }

.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__text b { font: 700 1.0625rem/1.2 var(--display); color: var(--navy); letter-spacing: -.02em; }
.brand__text span { font-size: var(--t-xxs); color: var(--slate-2); }

/* --- Drawer sub-navigation ---------------------------------------------- */
.drawer__sub { list-style: none; padding: 0 0 .5rem 1rem; margin: 0; }
.drawer__sub a { font-size: var(--t-sm); color: var(--slate); padding: .5rem 0; display: block; }
.drawer__foot { display: flex; flex-direction: column; gap: .5rem;
                padding-top: 1rem; margin-top: auto; border-top: 1px solid var(--line); }

/* --- Interior page hero -------------------------------------------------- */
.phero { padding: var(--s6) 0 var(--s4); background: var(--mist); border-bottom: 1px solid var(--line); }
.phero h1 { font-size: var(--t-h1); letter-spacing: -.03em; max-width: 20ch; }
.phero .lead { max-width: var(--measure); margin-top: var(--s2); }
.phero .label { margin-bottom: var(--s1); }
.phero__actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: var(--s3); }
.phero--treatment { background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%); }
.phero--article { background: var(--paper); border-bottom: 0; padding-bottom: var(--s2); }
.phero--article h1 { max-width: 24ch; }

/* --- Prose (editor output) ---------------------------------------------- */
.prose { max-width: var(--measure); font-size: var(--t-base); line-height: 1.75; color: var(--slate); }
.prose > * + * { margin-top: var(--s2); }
.prose h2 { font-size: var(--t-h2); color: var(--ink); margin-top: var(--s5); letter-spacing: -.02em; }
.prose h3 { font-size: var(--t-h3); color: var(--ink); margin-top: var(--s4); }
.prose h4 { font-size: var(--t-h4); color: var(--ink); margin-top: var(--s3); }
.prose p { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .5rem; }
.prose a { color: var(--jade); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--jade-2); }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose img { border-radius: var(--r-md); margin: var(--s3) 0; height: auto; }
.prose figure { margin: var(--s3) 0; }
.prose figcaption { font-size: var(--t-xs); color: var(--slate-2); margin-top: .5rem; }
.prose blockquote { border-left: 3px solid var(--jade); padding-left: var(--s3);
                    font-size: var(--t-lead); color: var(--ink); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); display: block; overflow-x: auto; }
.prose th, .prose td { padding: .75rem; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { background: var(--mist); font-weight: 600; color: var(--ink); }
.prose code { background: var(--mist); padding: .125rem .375rem; border-radius: var(--r-xs); font-size: .9em; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); }

.section--narrow > .shell { max-width: min(820px, 100% - 2.5rem); }
.section--tight { padding-top: var(--s4); padding-bottom: var(--s4); }

/* --- Section design variants (chosen in the builder) -------------------- */
.section--bg-mist  { background: var(--mist); }
.section--bg-navy  { background: var(--navy); color: #C8D3E2; }
.section--bg-navy h2, .section--bg-navy h3, .section--bg-navy h4 { color: #fff; }
/* .label and .lead carry their own dark colours from the light-ground design,
   so on a navy band they rendered dark-on-dark (measured 1.7:1 and 2.0:1,
   below the 4.5:1 WCAG AA floor). Invert them with the band. */
.section--bg-navy .label { color: #8FE0CF; }
.section--bg-navy .lead,
.section--bg-navy p:not([class]),
.section--bg-navy li { color: rgba(255, 255, 255, .78); }
.section--bg-navy a:not(.btn) { color: #8FE0CF; }
.section--bg-navy .tlink { color: #8FE0CF; }
.section--bg-jade  { background: var(--jade); color: #D7E5E8; }
.section--bg-jade h2, .section--bg-jade h3 { color: #fff; }
.section--bg-amber { background: var(--amber-soft); }
.section--space-tight { padding-top: var(--s4); padding-bottom: var(--s4); }
.section--space-loose { padding-top: var(--s8); padding-bottom: var(--s8); }
.section--full > .shell { max-width: 100%; padding-left: 0; padding-right: 0; }

/* --- Card grids ---------------------------------------------------------- */
/* A 260px floor let six cards land as 4 + 2 on a wide screen, leaving an
   orphan row. A 300px floor caps the grid at three columns, so six cards read
   as a balanced 3 + 3 and four as 2 + 2. */
.cardgrid { display: grid; gap: var(--card-gap, var(--s3));
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cardgrid[data-columns="2"] { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cardgrid[data-columns="4"] { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.tcard, .dcard {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tcard:hover, .dcard:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.tcard__img, .dcard__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.tcard__img img, .dcard__img img { width: 100%; height: 100%; object-fit: cover; }
.tcard__ico { padding: var(--s3) var(--s3) 0; color: var(--jade); }
.tcard__body, .dcard__body { padding: var(--s3); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tcard__body h2, .tcard__body h3, .dcard__body h3 { font-size: var(--t-h4); color: var(--ink); letter-spacing: -.01em; }
.tcard__body p, .dcard__body p { font-size: var(--t-sm); color: var(--slate); }
.tcard__count { font-size: var(--t-xs); color: var(--slate-2); }
.tcard__more { margin-top: auto; display: inline-flex; align-items: center; gap: .375rem;
               font-size: var(--t-sm); font-weight: 600; color: var(--jade); }
.tcard__more svg { width: 15px; height: 15px; }

.dcard__img { aspect-ratio: 4 / 5; display: grid; place-items: center; }
.dcard__init { font: 700 2rem/1 var(--display); color: var(--slate-2); }
.dcard__role { font-size: var(--t-sm); color: var(--jade); font-weight: 600; }
.dcard__quals { font-size: var(--t-xs); color: var(--slate-2); }

/* --- Clinical lists ------------------------------------------------------ */
.clinical { list-style: none; padding: 0; display: grid; gap: .875rem; }
.clinical li { display: flex; flex-direction: column; gap: .25rem; padding-left: 1.375rem; position: relative; }
.clinical li::before { content: ""; position: absolute; left: 0; top: .5rem;
                       width: 7px; height: 7px; border-radius: 50%; background: var(--jade); }
.clinical b { color: var(--ink); font-size: var(--t-base); font-weight: 600; }
.clinical span { color: var(--slate); font-size: var(--t-sm); line-height: 1.65; }

.facts { display: grid; gap: 1px; background: var(--line);
         border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
         grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.facts > div { background: var(--paper); padding: var(--s2) var(--s3); }
.facts dt { font-size: var(--t-xxs); font-weight: 700; letter-spacing: .1em;
            text-transform: uppercase; color: var(--slate-2); }
.facts dd { font-size: var(--t-base); color: var(--ink); font-weight: 600; margin-top: .25rem; }

.treatment__fig { margin: 0 0 var(--s5); border-radius: var(--r-md); overflow: hidden; }
.treatment__fig img { width: 100%; height: auto; }

/* --- Blog layout --------------------------------------------------------- */
.blog__grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
@media (max-width: 980px) { .blog__grid { grid-template-columns: 1fr; } }

.blog__side, .article__side { display: flex; flex-direction: column; gap: var(--s3); position: sticky; top: 92px; }
@media (max-width: 980px) { .blog__side, .article__side { position: static; } }

.sidebox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); }
.sidebox h2 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .08em;
              color: var(--slate-2); margin-bottom: var(--s2); }
.sidebox--cta { background: var(--navy); border-color: var(--navy); color: #C8D3E2; }
.sidebox--cta h2 { color: #fff; text-transform: none; letter-spacing: -.01em; font-size: var(--t-h4); }
.sidebox--cta p { font-size: var(--t-sm); margin-bottom: var(--s2); }

.linklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.linklist li { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.linklist a { font-size: var(--t-sm); color: var(--slate); text-decoration: none; }
.linklist a:hover { color: var(--jade); }
.linklist em { font-style: normal; font-size: var(--t-xs); color: var(--slate-2); }
.linklist--center { align-items: center; }

.taglist { display: flex; flex-wrap: wrap; gap: .375rem; }
.taglist a { font-size: var(--t-xs); padding: .25rem .625rem; border-radius: var(--r-pill);
             background: var(--mist); color: var(--slate); text-decoration: none; }
.taglist a:hover { background: var(--jade-soft); color: var(--jade); }

.article__grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr) 280px;
                 align-items: start; padding-top: var(--s4); }
@media (max-width: 980px) { .article__grid { grid-template-columns: 1fr; } }
.article__meta { font-size: var(--t-sm); color: var(--slate-2); margin-top: var(--s2); }
.article__review { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--s2);
                   font-size: var(--t-sm); color: var(--jade); background: var(--jade-soft);
                   padding: .375rem .75rem; border-radius: var(--r-pill); }
.article__review svg { width: 15px; height: 15px; }
.article__fig { margin: var(--s3) 0; border-radius: var(--r-md); overflow: hidden; }
.article__disclaimer { font-size: var(--t-xs); color: var(--slate-2); line-height: 1.7;
                       border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s5); }

.toc ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.toc a { font-size: var(--t-sm); color: var(--slate); text-decoration: none; }
.toc a:hover { color: var(--jade); }
.toc__l3 { padding-left: .875rem; }

/* --- Search & filters ---------------------------------------------------- */
.filterbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--s4); }
.filterbar--center { justify-content: center; }
.filterbar input[type="search"], .filterbar select {
  height: 44px; padding: 0 .875rem; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); font-size: var(--t-sm); background: var(--paper); color: var(--ink);
}
.filterbar input[type="search"] { flex: 1; min-width: 200px; }
.filterbar input:focus, .filterbar select:focus { outline: none; border-color: var(--jade); }

.resultcount { font-size: var(--t-sm); color: var(--slate-2); margin-bottom: var(--s3); }
.empty-note { font-size: var(--t-base); color: var(--slate); padding: var(--s5) 0; text-align: center; }

.results { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.results a { display: flex; flex-direction: column; gap: .25rem; padding: var(--s3);
             border: 1px solid var(--line); border-radius: var(--r-md);
             background: var(--paper); text-decoration: none; }
.results a:hover { border-color: var(--jade); box-shadow: var(--sh-2); }
.results__type { font-size: var(--t-xxs); font-weight: 700; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--jade); }
.results b { font-size: var(--t-h4); color: var(--ink); }
.results span { font-size: var(--t-sm); color: var(--slate); }

/* --- Pagination ---------------------------------------------------------- */
.pager { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
         justify-content: center; margin-top: var(--s5); }
.pager__btn, .pager__page { padding: .5rem .875rem; border: 1px solid var(--line-2);
                            border-radius: var(--r-sm); font-size: var(--t-sm);
                            color: var(--slate); text-decoration: none; background: var(--paper); }
.pager__btn:hover, .pager__page:hover { border-color: var(--jade); color: var(--jade); }
.pager__page.is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager__btn.is-disabled { opacity: .45; pointer-events: none; }
.pager__gap { padding: 0 .375rem; color: var(--slate-2); }

/* --- Forms --------------------------------------------------------------- */
.form__grid { display: grid; gap: var(--s2); grid-template-columns: repeat(12, 1fr); }
.field--span12 { grid-column: span 12; }
.field--span6  { grid-column: span 6; }
.field--span4  { grid-column: span 4; }
.field--span3  { grid-column: span 3; }
@media (max-width: 640px) { .form__grid > .field { grid-column: span 12; } }

.form .field__help { font-size: var(--t-xs); color: var(--slate-2); margin-top: .25rem; }
.form .field__error { font-size: var(--t-xs); color: var(--amber); margin-top: .25rem; font-weight: 600; }
.form .has-error input, .form .has-error select, .form .has-error textarea { border-color: var(--amber); }
.form .req { color: var(--amber); }

.choices { display: flex; flex-direction: column; gap: .5rem; }
.choice { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--jade); }

.consent { display: flex; align-items: flex-start; gap: .625rem; margin-top: var(--s2);
           font-size: var(--t-sm); color: var(--slate); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: .125rem; accent-color: var(--jade); flex: none; }

.form__note { font-size: var(--t-xs); color: var(--slate-2); margin-top: var(--s2);
              display: flex; gap: .5rem; align-items: flex-start; line-height: 1.65; }
.form__note svg { width: 15px; height: 15px; flex: none; margin-top: .125rem; }
.form__privacy { font-size: var(--t-xs); color: var(--slate-2); text-align: center; margin-top: var(--s2); }
.form__done { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem;
              background: #E6F4EC; color: #0F7B4F; border-radius: var(--r-sm);
              font-size: var(--t-sm); margin-bottom: var(--s2); }

/* The honeypot must be unreachable by people but present for bots. */
.hp { position: absolute !important; left: -9999px; top: auto;
      width: 1px; height: 1px; overflow: hidden; }

.foot__news { margin-top: var(--s3); }
.foot__news label { display: block; font-size: var(--t-xs); color: #8FA0B8; margin-bottom: .5rem; }
.foot__newsRow { display: flex; gap: .375rem; }
.foot__newsRow input { flex: 1; min-width: 0; height: 40px; padding: 0 .75rem;
                       border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm);
                       background: rgba(255,255,255,.06); color: #fff; font-size: var(--t-sm); }
.foot__newsRow input::placeholder { color: rgba(255,255,255,.45); }

/* --- Notices ------------------------------------------------------------- */
.notice { display: flex; align-items: flex-start; gap: .75rem; padding: var(--s2) var(--s3);
          border-radius: var(--r-md); margin: var(--s3) 0; font-size: var(--t-sm); }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: .125rem; }
.notice ul { margin: .375rem 0 0 1rem; }
.notice--success { background: #E6F4EC; color: #0F7B4F; }
.notice--error   { background: var(--amber-soft); color: var(--amber); }
.notice--warning { background: var(--amber-soft); color: var(--amber); }
.notice--info    { background: var(--jade-soft); color: var(--jade); }

/* --- Gallery, awards, logo wall ----------------------------------------- */
.gallery { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gallery[data-columns="2"] { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.gallery[data-columns="4"] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.gallery__item { margin: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--mist); }
.gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery__item figcaption { font-size: var(--t-xs); color: var(--slate-2); padding: .5rem; }

.awards { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.award { display: flex; gap: var(--s2); padding: var(--s3); background: var(--paper);
         border: 1px solid var(--line); border-radius: var(--r-md); }
.award__ico { color: var(--jade); flex: none; }
.award h3 { font-size: var(--t-h4); color: var(--ink); }
.award__by { font-size: var(--t-xs); color: var(--slate-2); margin: .25rem 0 .5rem; }
.award p { font-size: var(--t-sm); color: var(--slate); }

.logowall__title { text-align: center; font-size: var(--t-sm); text-transform: uppercase;
                   letter-spacing: .1em; color: var(--slate-2); margin-bottom: var(--s3); }
.logowall__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s4); }
.logowall__grid img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .7; }
.logowall__grid a:hover img { filter: none; opacity: 1; }

.ins__logos { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s2); }

/* --- Media + text, CTA band --------------------------------------------- */
.mediatext { display: grid; gap: var(--s5); grid-template-columns: 1fr 1fr; align-items: center; }
.mediatext--flip > *:first-child { order: 2; }
@media (max-width: 860px) {
  .mediatext { grid-template-columns: 1fr; }
  .mediatext--flip > *:first-child { order: 0; }
}
.mediatext__fig { margin: 0; border-radius: var(--r-md); overflow: hidden; }

/* The band had no background of its own, so its white heading and lead sat on
   the page's white ground at a 1.0 contrast ratio — completely invisible.
   Giving it the navy ground the design intends makes the copy readable and
   matches the .proc / .reviews bands. */
.ctaband { background: var(--navy); color: rgba(255, 255, 255, .74); }
.ctaband h2, .ctaband h3 { color: #fff; }
.ctaband .lead { color: rgba(255, 255, 255, .74); }
.ctaband .label { color: #8FE0CF; }

.ctaband__in { display: flex; align-items: center; justify-content: space-between;
               gap: var(--s4); flex-wrap: wrap; }
.ctaband__actions { display: flex; gap: .625rem; flex-wrap: wrap; }
.ctaband h2 { font-size: var(--t-h2); letter-spacing: -.02em; }

/* --- Doctor profile ------------------------------------------------------ */
.doctor__quals { font-size: var(--t-sm); color: var(--jade); font-weight: 600; margin-top: .5rem; }

/* --- FAQ groups, sitemap ------------------------------------------------- */
.faqgroup + .faqgroup { margin-top: var(--s5); }
.faqgroup > h2 { font-size: var(--t-h3); margin-bottom: var(--s3); }

.sitemap { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sitemap__group h2 { font-size: var(--t-h4); margin-bottom: var(--s2);
                     padding-bottom: .5rem; border-bottom: 1px solid var(--line); }

/* --- Utility ------------------------------------------------------------- */
.center { text-align: center; }
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--danger { background: var(--amber); border-color: var(--amber); color: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { padding: .375rem .875rem; border-radius: var(--r-pill); border: 1px solid var(--line-2);
        font-size: var(--t-sm); color: var(--slate); text-decoration: none; }
.pill:hover { border-color: var(--jade); color: var(--jade); }

.wcard__n { font: 700 var(--t-h3)/1 var(--display); color: var(--jade); opacity: .35; }
.rev__photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.page__banner img { width: 100%; height: auto; max-height: 420px; object-fit: cover; }

/* On a phone the hospital note wrapped to three lines and consumed 119px above
   the header. The phone number is the part worth that space; the note repeats
   what the page already says. */
@media (max-width: 719px) {
  .topstrip__in > p { display: none; }
  .topstrip__in { justify-content: center; padding-block: .4rem; gap: .5rem; }
  .topstrip { font-size: var(--t-sm); }
}

/* Multi-column A-Z directory of every condition, restoring the listing the
   previous /services page carried. Columns collapse to one on a phone. */
/* CSS multi-column left every item full-width here because each <li> is a
   block that fills the column box; a grid gives predictable, equal tracks and
   keeps alphabetical order reading left-to-right per row. */
.linklist--columns { list-style: none; margin: 0; padding: 0;
                     display: grid; gap: .1rem var(--s4); }
.linklist--columns a { display: block; padding: .5rem .65rem; border-radius: var(--r-xs);
                       color: var(--slate); text-decoration: none; font-size: .9375rem;
                       transition: background .22s var(--ease), color .22s var(--ease); }
.linklist--columns a:hover { background: var(--paper); color: var(--jade); }
@media (min-width: 620px)  { .linklist--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .linklist--columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   Credential and procedure-card bullet lists
   --------------------------------------------------------------------------
   Values stored as "A · B · C" render as real <ul>s (see
   sections/surgeon-profile.php and sections/procedure-cards.php). Markers are
   drawn with ::before rather than list-style so the hanging indent lines up
   with the text column on wrapped items.
   ========================================================================== */
.credgrid__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .34rem; }
.credgrid__list li { position: relative; padding-left: .95rem; }
.credgrid__list li::before { content: ""; position: absolute; left: 0; top: .62em;
                             width: 4px; height: 4px; border-radius: 50%;
                             background: var(--jade); opacity: .5; }

.pcard__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .42rem;
               font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.62); }
.pcard__list li { position: relative; padding-left: .95rem; }
.pcard__list li::before { content: ""; position: absolute; left: 0; top: .6em;
                          width: 4px; height: 4px; border-radius: 50%; background: #8FE0CF; }

/* Three-across variant of the value-props grid. .why__grid is fixed at four
   columns, which leaves a ragged last row for any section with six items. */
@media (min-width: 1024px) { .why--3col .why__grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Surgeon profile — full-width credentials row
   --------------------------------------------------------------------------
   The credentials block is now a direct child of .surgeon__grid rather than of
   the copy column (see sections/surgeon-profile.php). Nested, its bullet lists
   pushed the right-hand column far past the portrait and left a tall empty
   block beneath the image on desktop.
   ========================================================================== */
.surgeon__cta { margin: 0; }
/* The block is a grid child now, so the row gap already spaces it — the
   old margin stacked on top of that and doubled the gap on mobile. */
.surgeon__grid > .credgrid { margin-top: 0; }

@media (min-width: 768px) {
  .surgeon__grid { align-items: start; row-gap: var(--s5); column-gap: var(--s6); }
  .surgeon__grid > .credgrid,
  .surgeon__grid > .surgeon__cta { grid-column: 1 / -1; }

  /* Fill the portrait column to the height of the copy beside it so the row
     has no dead space, capped so a very long biography cannot crop the photo
     beyond recognition. */
  .surgeon__fig { align-self: stretch; max-height: 720px; }
  .surgeon__fig img { height: 100%; object-fit: cover; object-position: center 30%; }
}

/* ------------------------------------------------------- credential cards */
.credgrid { box-shadow: var(--sh-1); }
.credgrid > div { display: flex; flex-direction: column;
                  transition: background .3s var(--ease); }
.credgrid > div:hover { background: var(--mist); }
.credgrid dt { align-items: center; gap: .6rem; margin-bottom: .8rem; color: var(--jade-2); }
.credgrid dt svg { width: 28px; height: 28px; padding: 7px; box-sizing: border-box; flex: none;
                   border-radius: var(--r-xs); background: var(--jade-soft); color: var(--jade); }
.credgrid dd { color: var(--slate); }

@media (min-width: 1024px) { .surgeon__grid > .credgrid { grid-template-columns: repeat(3, 1fr); } }