/* ===================================================================
   PTB MED — Elementor bridge layer
   -------------------------------------------------------------------
   ptb-med-proto.scoped.css carries the design system at specificity
   (0,3,x). This file only does what that file cannot:

     - stop Elementor containers imposing their own width/padding/gap
     - give containers a sane layout default WITHOUT outranking the
       design system (see the note on :where() in section 3)
     - fill the gaps Elementor's global widget defaults would fill
       with the wrong value
     - dress the native Button widget as the prototype's .button, so
       button text and links stay editable in the Elementor panel

   No new design decisions live here.
   =================================================================== */

/* ---------- 1. Theme chrome ---------- */

body.ptb-med main.site-main,
body.ptb-med .page-content {
  margin: 0;
  padding: 0;
  max-width: none;
}

body.ptb-med .page-header,
body.ptb-med .site-header:not(.header),
body.ptb-med .site-footer:not(.footer) {
  display: none;
}

/* ---------- 2. Container neutralisation ---------- */

body.ptb-med .e-con,
body.ptb-med .e-con-inner {
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
  --container-widget-width: 100%;
  /* Default gap 0 (the design layer spaces with margins), but only as the
     variable defaults: a container with an explicit Flex Gap in the panel
     sets --row-gap/--column-gap at element specificity and wins. Native
     sections built 31.08.2026+ rely on this. */
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
}

body.ptb-med .e-con > .e-con-inner {
  max-width: none;
  padding: 0;
}

/* ---------- 3. Container layout defaults ----------

   Every rule below is wrapped in :where() so it keeps the specificity of
   `body.ptb-med .e-con` alone (0,2,1): high enough to beat Elementor's own
   container defaults, low enough that EVERY design-system rule still wins,
   including the ones inside media queries.

   This matters more than it looks. Stating `display: grid` unconditionally
   for .hero-grid, .model-grid and friends froze the desktop layout at tablet
   and phone widths, because the prototype collapses those same grids to a
   single column inside @media blocks that could no longer take effect.

   Containers whose class already declares `display` in the design system need
   no entry here at all: those rules sit at (0,3,0) and win on their own. */

body.ptb-med .e-con:where(.ptb-band) {
  display: block;
  width: 100%;
  max-width: none;
}

body.ptb-med .e-con:where(.shell) {
  display: block;
  max-width: none;
}

/* Wrappers the prototype leaves as plain block divs. Elementor would make
   them flex columns, which re-wraps their paragraphs. */
body.ptb-med .e-con:where(.hero-copy, .model-content, .trust-content,
  .trust-rating, .visit-content, .lab-main, .faq-intro, .footer-brand,
  .final-cta-copy, .section-side, .admission-body) {
  display: block;
}

/* Elementor defaults containers to a column; these are rows in the prototype. */
body.ptb-med .e-con:where(.actions, .visit-actions, .doctor-filter,
  .utility-inner, .utility-location, .utility-meta, .header-actions) {
  flex-direction: row;
}

/* Rows nested inside another row shrink to their content. */
body.ptb-med .e-con:where(.utility-location, .utility-meta, .header-actions) {
  width: auto;
}

/* ---------- 4. Filling Elementor's global widget defaults ---------- */

/* Elementor paints every heading with the kit's primary colour and forces
   line-height 1. The design system inherits both from context. */
body.ptb-med .elementor-widget-heading .elementor-heading-title {
  color: inherit;
  line-height: inherit;
}

body.ptb-med .elementor-widget-heading {
  width: 100%;
}

body.ptb-med .elementor-widget-text-editor {
  width: 100%;
}

/* Strip the editor's paragraph margins; the design class on the wrapper
   (.lead, .visit-address, …) stays in charge of type and spacing. */
body.ptb-med .elementor-widget-text-editor > p {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

body.ptb-med .elementor-widget-text-editor > p + p {
  margin-top: 0.9em;
}

body.ptb-med .elementor-widget-image,
body.ptb-med .elementor-widget-image figure {
  width: 100%;
  margin: 0;
}

body.ptb-med .elementor-widget-html {
  width: 100%;
}

/* A run of repeated siblings (.facts-row article, …) is emitted as one HTML
   block so :nth-child() ordering survives. display:contents removes the
   wrapper's own box so the items remain direct children of the grid. */
body.ptb-med .elementor-widget:where(.ptb-group),
body.ptb-med :where(.ptb-group) > .elementor-shortcode {
  display: contents;
}

/* ---------- 5. Native Button widget dressed as .button ----------

   The prototype's .button / .secondary-action / .text-link styles target the
   <a> itself. On a Button widget that anchor is nested inside the wrapper the
   CSS class lands on, so the component styles are restated here against
   .elementor-button. The trailing Material Symbols glyph is generated with
   ::after, which keeps the label and URL editable in the Elementor panel. */

body.ptb-med .ptb-button .elementor-button,
body.ptb-med .ptb-secondary .elementor-button,
body.ptb-med .ptb-textlink .elementor-button {
  font-family: "Inter", Arial, sans-serif;
  line-height: inherit;
  text-decoration: none;
  box-shadow: none;
}

body.ptb-med .ptb-button .elementor-button-content-wrapper,
body.ptb-med .ptb-secondary .elementor-button-content-wrapper,
body.ptb-med .ptb-textlink .elementor-button-content-wrapper {
  display: contents;
}

body.ptb-med .ptb-button .elementor-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--blue-deep);
  border-radius: 10px;
  color: var(--white);
  background: var(--blue-deep);
  padding: 0 var(--sp-6);
  font-size: 15px;
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body.ptb-med .ptb-button .elementor-button:hover {
  border-color: #106184;
  background: #106184;
  transform: translateY(-1px);
}

body.ptb-med .ptb-button-arrow .elementor-button::after,
body.ptb-med .ptb-textlink .elementor-button::after {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  line-height: 1;
  content: "arrow_forward";
}

body.ptb-med .ptb-button-arrow .elementor-button::after {
  font-size: 18px;
}

body.ptb-med .ptb-button-small .elementor-button {
  min-height: 46px;
  padding-inline: 18px;
}

body.ptb-med .ptb-button-white .elementor-button {
  border-color: var(--white);
  color: var(--ink);
  background: var(--white);
}

body.ptb-med .ptb-button-white .elementor-button:hover {
  border-color: var(--blue);
  color: var(--white);
  background: var(--blue-deep);
}

body.ptb-med .ptb-secondary .elementor-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  padding: 0 var(--sp-6);
  font-size: 15px;
  font-weight: 500;
  transition: 160ms ease;
}

body.ptb-med .ptb-secondary .elementor-button:hover {
  color: var(--white);
  background: var(--ink);
}

body.ptb-med .ptb-textlink .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  padding: 8px 0;
  min-height: 0;
  font-size: var(--small);
  font-weight: 600;
  transition: 160ms ease;
}

body.ptb-med .ptb-textlink .elementor-button:hover {
  border-color: var(--blue-ink);
  color: var(--blue-ink);
  background: transparent;
}

body.ptb-med .ptb-textlink .elementor-button::after {
  font-size: 17px;
  color: var(--blue-ink);
}

/* A text link is inline-flex in the prototype; the widget wrapper around it is
   a block, so it is made a flex row to avoid an extra inline line box. */
body.ptb-med .elementor-widget-button:where(.ptb-textlink) {
  display: flex;
  justify-content: flex-start;
}

/* ---------- 6. Baseline reconciliation with hello-elementor's reset ----------

   The prototype was authored against browser defaults plus its own reset.
   hello-elementor adds a further reset; these two rules undo the parts the
   prototype does not expect, and sit low enough that any design rule wins. */

body.ptb-med figcaption {
  line-height: inherit;
}

body.ptb-med :is(h1, h2, h3, h4, h5, h6) {
  line-height: inherit;
}

/* ---------- 7. v3 page-build additions ----------

   Two things the v3 templates need that sections 1-6 do not cover:
   a generic block wrapper, and stand-ins for design rules written as
   `parent > p` — a text-editor widget sits where the prototype has the
   paragraph, so the rule is restated against the widget and the <p>
   inherits it through the `font: inherit` reset in section 4. */

body.ptb-med .e-con:where(.ptb-block) {
  display: block;
}

body.ptb-med .section-head > .elementor-widget-text-editor,
body.ptb-med .section-side > .elementor-widget-text-editor {
  max-width: 640px;
  margin: 0;
  color: var(--grey);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.7;
}

body.ptb-med .diagnostics-section .section-head > .elementor-widget-text-editor {
  color: rgba(255, 255, 255, 0.85);
}

body.ptb-med .trust-content > .elementor-widget-text-editor {
  max-width: 680px;
  margin: var(--sp-6) 0 0;
  color: var(--grey);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.7;
}

/* Button widget variants the prototype expresses with context selectors. */

body.ptb-med .ptb-button-ne .elementor-button::after {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  line-height: 1;
  font-size: 18px;
  content: "north_east";
}

body.ptb-med .final-cta .ptb-button-white .elementor-button {
  color: var(--blue-ink);
}

body.ptb-med .final-cta .ptb-button-white .elementor-button:hover {
  border-color: var(--blue-wash);
  color: var(--blue-ink);
  background: var(--blue-wash);
}

/* ---------- 8. Loop Grid ----------

   A Loop Grid widget wears the prototype's grid class (.specialty-index,
   .article-grid). Elementor puts two wrappers between that widget and the
   cards; both are removed from the box tree so the cards themselves become
   the grid items and the prototype's grid-template applies unchanged. */

body.ptb-med .ptb-loop > .elementor-loop-container,
body.ptb-med .ptb-loop .e-loop-item {
  display: contents;
}

/* Heading widgets used as styled labels: the design class sits on the widget
   wrapper, so the rendered tag takes its type from it instead of from the
   kit. Opt-in, because most headings are styled through their own tag. */
body.ptb-med .elementor-widget-heading:where(.ptb-inherit) .elementor-heading-title {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* .article-card > span and .article-card i, restated for the widget wrappers
   that stand in their place. */
body.ptb-med .ptb-article-kicker {
  color: var(--grey);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.ptb-med .ptb-article-arrow {
  align-self: flex-end;
  margin-top: auto;
  color: var(--blue-ink);
  font-size: 20px;
  transition: transform 160ms ease;
}

body.ptb-med .article-card:hover .ptb-article-arrow {
  transform: translateX(4px);
}

/* Whole-card link. The prototype draws a specialty cell and an article card as
   one <a>; built from a loop template the card is a container, so the link is
   an overlay that covers it and carries the accessible name. Both cards are
   position: relative in the design system. */

body.ptb-med .ptb-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

body.ptb-med .ptb-card-link .elementor-button {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

body.ptb-med .ptb-card-link .elementor-button::after {
  content: none;
}

/* Post Terms renders its terms as links; inside a card they are decoration. */
body.ptb-med .ptb-article-kicker a {
  color: inherit;
}

/* Eyebrow text coming from a field is stored in sentence case. */
body.ptb-med .ptb-upper {
  text-transform: uppercase;
}

/* A doctor with no portrait yet gets a single-column hero instead of an
   empty first grid column. */
body.ptb-med .doctor-hero-grid:not(:has(.doctor-portrait)) {
  display: block;
}

/* The search bar's submit is a real <button>; the prototype styled an <a>. */
body.ptb-med button.button {
  cursor: pointer;
  font-family: inherit;
}

/* ---------- 9. Header built from native widgets ----------

   The header used to be two HTML blocks. It is now containers and widgets so
   the menu, the logo, the phone and the CTA stay editable in the panel and in
   Appearance, Menus. Nothing here is a new design decision: every value is
   the one the prototype already states for .brand, nav and .phone-action.

   Icons: the design draws them as Material Symbols ligatures, which no
   Elementor icon control can emit. Generating them with ::before keeps the
   widgets native and spares the site a second icon font. */

body.ptb-med .brand > .elementor-widget-image,
body.ptb-med .brand > .elementor-widget-image figure {
  width: auto;
  flex: 0 0 auto;
}

body.ptb-med.ptb-med .brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.ptb-med.ptb-med .brand-name .elementor-heading-title {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

body.ptb-med.ptb-med .brand-tagline {
  color: var(--grey);
  font-size: 11px;
}

/* The pin sits inside the paragraph, not on the container: Elementor already
   uses ::before and ::after on every .e-con for its background overlays. */

body.ptb-med.ptb-med .utility-location p::before {
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--blue-ink);
  font-size: 16px;
  line-height: 1;
  vertical-align: -3px;
  margin-inline-end: 8px;
  content: "location_on";
}

body.ptb-med .utility-location .elementor-widget-text-editor,
body.ptb-med .utility-meta .elementor-widget-text-editor {
  width: auto;
}

/* Nav menu widget, desktop */

/* Elementor makes every widget wrapper a flex column and every container a
   flex column. The prototype's .brand is a row and its <nav> is a plain block
   holding the list, the toggle and the dropdown. */

body.ptb-med.ptb-med .brand {
  flex-direction: row;
  flex-wrap: nowrap;
}

body.ptb-med.ptb-med .site-nav {
  display: block;
  position: static;
}

/* The widget was given the laptop dropdown, for which Elementor generates no
   stylesheet, so the two states are stated here against the design's own
   collapse point rather than against an Elementor breakpoint. */

@media (min-width: 1181px) {
  body.ptb-med.ptb-med .site-nav .elementor-nav-menu--main {
    display: flex;
  }

  body.ptb-med.ptb-med .site-nav .elementor-menu-toggle,
  body.ptb-med.ptb-med .site-nav .elementor-nav-menu--dropdown {
    display: none;
  }
}

body.ptb-med.ptb-med .site-nav .elementor-nav-menu {
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
}

body.ptb-med.ptb-med .site-nav .elementor-nav-menu--main .elementor-item {
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  background: transparent;
  padding: 10px 2px;
  font-size: 15px;
  font-weight: 500;
  transition: border-color 160ms ease, color 160ms ease;
}

body.ptb-med.ptb-med .site-nav .elementor-nav-menu--main .elementor-item:hover,
body.ptb-med.ptb-med .site-nav .elementor-nav-menu--main .elementor-item:focus,
body.ptb-med.ptb-med .site-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
  border-bottom-color: var(--blue);
  color: var(--ink);
  background: transparent;
}

/* The hamburger, drawn in the same icon family as the rest of the site. */

body.ptb-med.ptb-med .site-nav .elementor-menu-toggle {
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  background: var(--white);
  padding: 0;
  transition: 160ms ease;
}

body.ptb-med.ptb-med .site-nav .elementor-menu-toggle:hover {
  border-color: var(--blue-deep);
  color: var(--blue-ink);
}

body.ptb-med.ptb-med .site-nav .elementor-menu-toggle i,
body.ptb-med.ptb-med .site-nav .elementor-menu-toggle svg {
  display: none;
}

body.ptb-med.ptb-med .site-nav .elementor-menu-toggle::before {
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 24px;
  line-height: 1;
  content: "menu";
}

body.ptb-med.ptb-med .site-nav .elementor-menu-toggle.elementor-active::before {
  content: "close";
}

/* Phone action: an icon-only link needs a real accessible name, so the label
   stays in the widget and is hidden visually rather than deleted. */

body.ptb-med .ptb-phone .elementor-button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  background: var(--white);
  padding: 0;
  box-shadow: none;
  transition: 160ms ease;
}

body.ptb-med .ptb-phone .elementor-button:hover {
  border-color: var(--blue-deep);
  color: var(--blue-ink);
}

body.ptb-med .ptb-phone .elementor-button-content-wrapper {
  display: contents;
}

body.ptb-med .ptb-phone .elementor-button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.ptb-med .ptb-phone .elementor-button::before {
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 22px;
  line-height: 1;
  content: "call";
}

/* Under the design's own collapse point the row becomes brand, actions,
   hamburger, and the dropdown hangs off the header rather than off the
   46px-wide widget that triggers it. */

@media (max-width: 1180px) {
  body.ptb-med.ptb-med .header-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }

  body.ptb-med.ptb-med .header-inner > .brand {
    margin-right: auto;
  }

  /* Elementor makes every container a positioned box. The dropdown has to
     hang off the full-width band, not off the 1240px shell. */
  body.ptb-med.ptb-med .header-inner {
    position: static;
  }

  body.ptb-med.ptb-med .header-inner > .site-nav {
    order: 3;
    width: auto;
    flex: 0 0 auto;
  }

  /* The row is tight here, so the brand gives way and the call to action
     keeps its single line. */
  body.ptb-med.ptb-med .header-inner > .brand {
    min-width: 0;
  }

  body.ptb-med.ptb-med .header-actions .ptb-button .elementor-button {
    white-space: nowrap;
  }

  body.ptb-med.ptb-med .site-nav .elementor-nav-menu--main {
    display: none;
  }

  body.ptb-med.ptb-med .site-nav .elementor-menu-toggle {
    display: flex;
  }

  body.ptb-med.ptb-med .site-nav .elementor-nav-menu--dropdown {
    display: block;
    position: absolute;
    z-index: 9997;
    margin-top: 0;
    top: 100%;
    right: 0;
    left: 0;
    width: auto;
    border-bottom: 1px solid var(--line);
    background: var(--white);
    box-shadow: 0 30px 50px rgba(10, 11, 27, 0.1);
    padding: 8px 0 12px;
  }

  body.ptb-med.ptb-med .site-nav .elementor-nav-menu--dropdown .elementor-nav-menu {
    flex-direction: column;
    gap: 0;
  }

  body.ptb-med.ptb-med .site-nav .elementor-nav-menu--dropdown .elementor-item {
    border-bottom: 0;
    color: var(--ink-soft);
    background: transparent;
    padding: 14px calc((100% - min(calc(100% - 40px), 760px)) / 2);
    font-size: 16px;
  }
}

@media (max-width: 860px) {
  body.ptb-med.ptb-med .utility-hours {
    display: none;
  }
}

@media (max-width: 620px) {
  body.ptb-med.ptb-med .brand-name .elementor-heading-title {
    font-size: 18px;
  }

  body.ptb-med.ptb-med .brand-tagline {
    max-width: 170px;
    font-size: 10px;
  }

  body.ptb-med.ptb-med .header-actions .ptb-button {
    display: none;
  }

  body.ptb-med .ptb-phone .elementor-button {
    width: 44px;
    height: 44px;
  }
}

/* The template is wrapped in <header class="elementor-location-header">, whose
   box is exactly as tall as the header itself. A sticky element can only
   travel inside its containing block, so `position: sticky` on .header never
   moved a pixel. Removing the wrapper's box hands .header the viewport again.
   The inner container is itself a <header>, so the banner landmark stays. */

body.ptb-med .elementor-location-header {
  display: contents;
}

/* ---------- image-box lockups (merged heading+text pairs, 30.08.2026) ----------
   An imageless Image Box replaces each adjacent heading+text pair. The design
   layer keeps styling titles by tag/context; these rules neutralize Elementor's
   stock image-box chrome and re-attach the old paragraph classes to the
   description via ib-* markers on the widget. */
body.ptb-med .elementor-widget-image-box .elementor-image-box-wrapper {
  display: block;
  text-align: inherit;
}
body.ptb-med .elementor-widget-image-box .elementor-image-box-title {
  margin-bottom: 0;
}
body.ptb-med .elementor-widget-image-box .elementor-image-box-description {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
/* .lead */
body.ptb-med .ib-lead .elementor-image-box-description {
  max-width: 620px;
  margin: var(--sp-6) 0 0;
  color: var(--grey);
  font-size: var(--body-lg);
  font-weight: 300;
  line-height: 1.7;
}
body.ptb-med .page-hero .ib-lead .elementor-image-box-description {
  max-width: 640px;
}
/* .model-intro */
body.ptb-med .ib-model-intro .elementor-image-box-description {
  margin: var(--sp-6) 0 0;
  color: var(--grey);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.7;
}
/* .visit-address */
body.ptb-med .ib-visit-address .elementor-image-box-description {
  max-width: 560px;
  margin: var(--sp-4) 0 0;
  color: var(--grey);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.65;
}
/* .trust-content > p */
body.ptb-med .trust-content .elementor-image-box-description {
  max-width: 680px;
  margin: var(--sp-6) 0 0;
  color: var(--grey);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.7;
}
@media (max-width: 620px) {
  body.ptb-med .ib-lead .elementor-image-box-description {
    margin-top: var(--sp-4);
    font-size: var(--body);
  }
}

/* ---------- brand lockup as image-box (30.08.2026) ----------
   One image-box replaces logo image + brand-text container (heading+tagline).
   Supersedes the .brand-text / .brand-name / .brand-tagline rules above.
   The design layer's .brand img rule (48px, 42px at 620) still hits the img. */
body.ptb-med.ptb-med .brand > .elementor-widget-image-box {
  width: auto;
  flex: 0 0 auto;
}
body.ptb-med .brand .elementor-widget-image-box .elementor-image-box-wrapper {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-align: left;
}
body.ptb-med.ptb-med .brand .elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img {
  flex: 0 0 auto;
  width: 48px;
  margin: 0;
}
body.ptb-med.ptb-med .brand .elementor-image-box-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
body.ptb-med.ptb-med .brand .elementor-image-box-title {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}
body.ptb-med.ptb-med .brand .elementor-image-box-description {
  margin: 0;
  color: var(--grey);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
}
@media (max-width: 620px) {
  body.ptb-med.ptb-med .brand .elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img {
    width: 42px;
  }
  body.ptb-med.ptb-med .brand .elementor-image-box-title {
    font-size: 18px;
  }
  body.ptb-med.ptb-med .brand .elementor-image-box-description {
    max-width: 170px;
    font-size: 10px;
  }
}

/* ---------- section-head merged pairs (30.08.2026, round 2) ----------
   Image-box replaces heading + section-head paragraph on every section head;
   the description takes over the old > .elementor-widget-text-editor role.
   ib-admission-lede replicates the admission lede (ink, 400, centered by its
   section). Descriptions may carry shortcodes — rendered by the
   ptb_imagebox_shortcodes filter in functions.php. */
body.ptb-med .section-head .elementor-image-box-description {
  max-width: 640px;
  margin: var(--sp-4) 0 0;
  color: var(--grey);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.7;
}
body.ptb-med .diagnostics-section .section-head .elementor-image-box-description {
  color: rgba(255, 255, 255, 0.85);
}
body.ptb-med .ib-admission-lede .elementor-image-box-description {
  max-width: none;
  margin: var(--sp-4) 0 0;
  color: var(--ink);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.6;
}

/* ---------- native listing cards (JetEngine, 31.08.2026) ----------
   Section 2 neutralises container gaps site-wide because the design layer
   spaces things with margins. Listing items are built natively with
   Elementor container gaps, so the stock behaviour is restored inside them.
   Remove section 2 altogether once every section is native. */
body.ptb-med .jet-listing-grid__item .e-con {
  gap: var(--row-gap) var(--column-gap);
}

/* ---------- repeater check bullets ---------- JetEngine's Dynamic Repeater can style the item but not a glyph inside it, so the green check disc of .admission-card li / .lab-areas li is a tiny utility class used in the repeater item format. */
body.ptb-med .jet-listing-dynamic-repeater__item { position: relative; }
body.ptb-med .ptb-check { position: absolute; top: 3px; left: 0; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--green); font-size: 9px; font-weight: 700; line-height: 1; }

/* ---------- icon glyph width before the icon font loads (02.11.2026) ----------
   Until Material Symbols arrives, a ligature renders as its name
   ("arrow_forward" ≈ 90px). The header CTA then pushed the menu onto two
   lines for ~60ms and the page jumped 24px (CLS 0.4 at 1440). Capping each
   glyph at one em keeps every box its final size from the first paint. */
body.ptb-med .ptb-button-arrow .elementor-button::after,
body.ptb-med .ptb-textlink .elementor-button::after,
body.ptb-med .ptb-button-ne .elementor-button::after,
body.ptb-med .material-symbols-rounded .elementor-heading-title,
body.ptb-med span.material-symbols-rounded {
  display: inline-block;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
}