/* ===================================================================
   PTB MED — Elementor bridge for archives, listings and templates
   -------------------------------------------------------------------
   Same contract as ptb-med-elementor.css: no new design decisions.
   Every rule here exists because a component authored for flat
   prototype markup meets Elementor's extra wrapper elements.
   =================================================================== */

/* ---------- Loop Grid → .roster-grid ----------

   The design class lands on the Loop Grid widget wrapper, but three boxes
   sit between it and the cards. Collapsing them means the cards become
   direct grid children, so every .roster-grid rule — including its media
   queries — keeps working unchanged. */

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

/* The avatar tint rotates every third card. With .e-loop-item collapsed the
   card is an only child, so the count has to move up one level. */
body.ptb-med .roster-grid .e-loop-item:nth-child(3n + 2 of .e-loop-item) .roster-avatar:not(.roster-avatar-photo) {
  color: var(--green-ink);
  background: var(--green-wash);
}

body.ptb-med .roster-grid .e-loop-item:nth-child(3n of .e-loop-item) .roster-avatar:not(.roster-avatar-photo) {
  color: var(--yellow-ink);
  background: var(--yellow-wash);
}

/* ---------- Card ---------- */

/* Elementor renders a container link as an absolutely positioned overlay.
   Guard against it ever being laid out as a grid cell. */
body.ptb-med .roster-card {
  position: relative;
}

body.ptb-med .roster-card > a.e-con-link {
  position: absolute;
  z-index: 2;
  inset: 0;
}

/* ---------- Avatar ---------- */

/* Initials are the default; the photo widget renders nothing at all when a
   doctor has no featured image, so plain adjacency is enough to choose. */
body.ptb-med.ptb-med .roster-avatar-photo + .roster-avatar-initials {
  display: none;
}

body.ptb-med .roster-avatar-initials .elementor-heading-title {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: 1;
}

body.ptb-med .roster-avatar-photo img {
  display: block;
}

/* ---------- Body ---------- */

/* .roster-body is a 3px flex column; widget wrappers must not stretch it. */
body.ptb-med .roster-body > .elementor-widget {
  width: auto;
  min-width: 0;
}

body.ptb-med .roster-name .elementor-heading-title {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--body);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ptb-med .roster-role .elementor-heading-title {
  display: block;
  color: var(--grey);
  font-size: var(--caption);
  font-weight: 400;
}

/* ---------- Link row ----------

   .roster-link keeps its design rules on the widget wrapper; only the nested
   anchor is restated, and the arrow is generated so the label stays editable. */

body.ptb-med .roster-link .elementor-button {
  display: flex;
  min-height: 0;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  padding: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
  box-shadow: none;
}

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

body.ptb-med .roster-link .elementor-button::after {
  color: var(--blue-ink);
  font-family: "Material Symbols Rounded";
  font-size: 17px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-weight: 400;
  line-height: 1;
  content: "arrow_forward";
  transition: transform 160ms ease;
}

body.ptb-med .roster-card:hover .roster-link .elementor-button::after {
  transform: translateX(4px);
}
/* Filter key: the card's canonical specialty, read by ptb-med.js. */
body.ptb-med.ptb-med .roster-key {
  display: none;
}

/* ---------- Archive heads ----------

   A section head on an archive carries the page's h1, where the prototype's
   in-page section heads carry an h2. Same type, different level. */

body.ptb-med.ptb-med .section-head h1 {
  margin-bottom: 0;
  font-size: var(--h2);
  font-weight: 500;
  line-height: 1.22;
}

@media (max-width: 620px) {
  body.ptb-med.ptb-med .section-head h1 {
    font-size: 27px;
  }
}

/* ---------- Loop Grid → .specialty-index ---------- */

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

/* The icon and the arrow are heading widgets so the glyph name stays
   editable in the panel; both must keep the Material Symbols face. */
body.ptb-med .specialty-icon .elementor-heading-title,
body.ptb-med .specialty-arrow .elementor-heading-title {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-variation-settings: inherit;
  font-weight: inherit;
  line-height: 1;
}

/* The prototype types the kicker in capitals; from the CMS it is the
   specialty's own title, cased by CSS. */
body.ptb-med.ptb-med .specialty-kicker {
  text-transform: uppercase;
}

body.ptb-med .specialty-kicker .elementor-heading-title,
body.ptb-med .specialty-meta .elementor-heading-title {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* The prototype's content wrapper is the cell's only child div, so the
   design system styles it as `.specialty-cell > div`. Under Elementor every
   widget is a div too, which drags the icon and the arrow into that rule.
   Both are restated here at a specificity that puts them back. */

body.ptb-med.ptb-med .specialty-cell > .elementor-widget.specialty-icon {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  place-items: center;
}

body.ptb-med.ptb-med .specialty-cell > .elementor-widget.specialty-arrow {
  display: block;
  width: auto;
  flex: 0 0 auto;
}

/* ---------- Sections that exist only to carry a CMS field ----------

   A specialty's clinical sections are authored per specialty and reviewed
   before publication. Until a field has content its whole section is
   removed, rather than shipping a heading with nothing under it.

   .ptb-dyn-body is the widget wrapper; the test is whether anything inside
   it rendered. A repeater set to hide-if-empty removes itself entirely,
   which the same selector catches. */

body.ptb-med.ptb-med .ptb-dyn:not(:has(.ptb-dyn-body :not(:empty))) {
  display: none;
}

/* ---------- Specialty hero ---------- */

body.ptb-med.ptb-med .section-head > .specialty-lead {
  max-width: 640px;
  margin: 0;
  color: var(--grey);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.7;
}

body.ptb-med .specialty-lead .elementor-heading-title {
  font: inherit;
}

/* ---------- Review trail ---------- */

body.ptb-med.ptb-med .specialty-review {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  border-top: 1px solid var(--line);
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  color: var(--grey);
  font-size: var(--caption);
}

body.ptb-med .specialty-review .elementor-heading-title {
  font: inherit;
  color: inherit;
}

/* ---------- Roster inside a narrower column ---------- */

body.ptb-med.ptb-med .roster-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 620px) {
  body.ptb-med.ptb-med .roster-grid-2 {
    grid-template-columns: 1fr;
  }
}
/* The prototype's cell is one big <a>; from the CMS the anchor is the meta
   line, so it carries the whole card's destination. */
body.ptb-med .specialty-meta .elementor-button {
  display: inline;
  min-height: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  padding: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
  box-shadow: none;
}

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

/* Cards made clickable by ptb-med.js. */
body.ptb-med .specialty-cell.is-clickable,
body.ptb-med .roster-card.is-clickable {
  cursor: pointer;
}
/* ---------- Loop Grid → .article-grid ---------- */

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

/* The rule border cycles blue / green / yellow; with .e-loop-item collapsed
   the count moves up a level, as it does for the roster. */
body.ptb-med .article-grid .e-loop-item:nth-child(3n + 2 of .e-loop-item) .article-card {
  border-top-color: var(--green);
}

body.ptb-med .article-grid .e-loop-item:nth-child(3n of .e-loop-item) .article-card {
  border-top-color: var(--yellow);
}

/* ---------- Article card built from widgets ---------- */

body.ptb-med.ptb-med .article-card > .article-kicker {
  color: var(--grey);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

body.ptb-med.ptb-med .article-card > .article-title {
  margin: var(--sp-4) 0 auto;
}

body.ptb-med.ptb-med .article-card > .article-arrow {
  width: auto;
  align-self: flex-end;
}

body.ptb-med .article-card .article-title .elementor-heading-title {
  max-width: 340px;
  margin: 0;
}

body.ptb-med .article-kicker .elementor-heading-title {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

body.ptb-med .article-card h3 a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Site search ---------- */

body.ptb-med.ptb-med .ptb-search {
  display: flex;
  max-width: 520px;
  gap: 8px;
  margin-bottom: var(--sp-8);
}

body.ptb-med.ptb-med .ptb-search input[type="search"] {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  padding: 0 16px;
  min-height: 50px;
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
}

body.ptb-med.ptb-med .ptb-search input[type="search"]:focus-visible {
  border-color: var(--blue-ink);
  outline: 2px solid var(--blue-wash);
}

body.ptb-med.ptb-med .ptb-search button {
  border: 1px solid var(--blue-deep);
  border-radius: 10px;
  color: var(--white);
  background: var(--blue-deep);
  padding: 0 var(--sp-6);
  min-height: 50px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

body.ptb-med.ptb-med .ptb-empty {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-8);
  color: var(--grey);
}
/* ---------- Plain WordPress pages ----------

   Legal and utility pages are ordinary WordPress content, not Elementor
   documents. The bridge hides the theme's page header and strips the main
   padding for builder pages; these rules put a readable measure back for the
   pages that never enter the builder. */

body.ptb-med:not(.elementor-page) main.site-main {
  width: min(100% - 48px, 760px);
  margin-inline: auto;
  padding: var(--sp-12) 0;
}

body.ptb-med:not(.elementor-page) .page-header {
  display: block;
  margin-bottom: var(--sp-8);
}

body.ptb-med:not(.elementor-page) .page-header .entry-title {
  margin: 0;
  font-size: var(--h2);
  font-weight: 500;
  line-height: 1.22;
}

body.ptb-med:not(.elementor-page) .page-content > * + * {
  margin-top: var(--sp-6);
}

body.ptb-med:not(.elementor-page) .page-content :is(h2, h3) {
  margin: var(--sp-8) 0 var(--sp-4);
  font-weight: 500;
}

body.ptb-med:not(.elementor-page) .page-content :is(p, li) {
  color: var(--grey);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.7;
}

body.ptb-med:not(.elementor-page) .page-content a {
  color: var(--blue-ink);
}

body.ptb-med:not(.elementor-page) .page-content ul {
  padding-left: 20px;
  list-style: disc;
}
/* ---------- Portrait placeholder ----------

   A doctor whose photograph has not been taken yet gets the roster avatar
   monogram at portrait size: the same 4:5 box, radius and hairline as the
   photograph, filled with the avatar wash instead of an image. It keeps the
   two columns of the hero and reads as a system element rather than a
   missing file. Flat on purpose - no shadow, so it never poses as a photo. */

body.ptb-med.ptb-med .doctor-portrait-monogram .portrait-initials {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--blue-wash);
  font-family: "Lora", Georgia, serif;
  color: var(--blue-ink);
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* A profile with only an experience band and a rating has two facts, not
   four. Above the tablet breakpoint the row divides by the count instead
   of leaving empty tracks; below it the design system already collapses
   the row to two columns. */

/* A lone rating tile hugs its content rather than filling a quarter of the
   row and reading as three missing ones. */
body.ptb-med.ptb-med .fact-pillars-1 {
  grid-template-columns: minmax(0, max-content);
}

@media (min-width: 1181px) {
  body.ptb-med.ptb-med .fact-pillars-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  body.ptb-med.ptb-med .fact-pillars-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Specialty description ----------

   Prose on the left, the common reasons to book on the right. Same two-
   column proportion as the profile layout, so a specialty page and a
   doctor page read as one family. */

body.ptb-med.ptb-med .specialty-about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: var(--sp-16);
}

body.ptb-med.ptb-med .specialty-about-text p {
  margin: 0 0 var(--sp-4);
  max-width: 640px;
  color: var(--grey);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.7;
}

body.ptb-med.ptb-med .specialty-about-text p:last-child {
  margin-bottom: 0;
}

body.ptb-med.ptb-med .specialty-when {
  margin-top: var(--sp-6);
  border-left: 3px solid var(--blue);
  padding-left: var(--sp-4);
  color: var(--ink-soft);
}

body.ptb-med.ptb-med .specialty-about-list h3 {
  margin: 0 0 var(--sp-4);
  font-size: 19px;
  font-weight: 500;
}

@media (max-width: 860px) {
  body.ptb-med.ptb-med .specialty-about {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* ---------- External link list ----------

   Institutional links. The host is shown so it is clear the link leaves
   the site and where it goes before the click. */

body.ptb-med.ptb-med .link-list {
  display: grid;
  gap: var(--sp-3);
  max-width: 900px;
}

body.ptb-med.ptb-med .link-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-4) var(--sp-6);
  transition: border-color 160ms ease, background 160ms ease;
}

body.ptb-med.ptb-med .link-item:hover {
  border-color: var(--blue-deep);
  background: var(--paper);
}

body.ptb-med.ptb-med .link-item-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

body.ptb-med.ptb-med .link-item-body strong {
  font-size: var(--body);
  font-weight: 600;
  line-height: 1.3;
}

body.ptb-med.ptb-med .link-item-body small {
  color: var(--grey);
  font-size: var(--caption);
  font-weight: 300;
  line-height: 1.55;
}

body.ptb-med.ptb-med .link-item-host {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--blue-ink);
  font-size: var(--caption);
  font-weight: 600;
}

body.ptb-med.ptb-med .link-item-host i {
  font-size: 17px;
  font-style: normal;
}

@media (max-width: 620px) {
  body.ptb-med.ptb-med .link-item {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}

/* ---------- НЗОК steps ----------

   .visit-topics was drawn inside the half-width column of the home page.
   On /nzok/ it sits in the full shell, so the reading measure is capped
   to the same 900px as the link list below it. */

body.ptb-med.ptb-med .nzok-steps {
  max-width: 900px;
}

/* ---------- Price list ----------

   One table per group, the same .price-table component the doctor profile
   uses. No jump navigation: the list is read by scrolling. */

body.ptb-med.ptb-med .price-group + .price-group {
  margin-top: var(--sp-12);
}

body.ptb-med.ptb-med .price-group {
  scroll-margin-top: 104px;
}

body.ptb-med.ptb-med .price-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--line);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-6);
  min-height: 64px;
}

body.ptb-med.ptb-med .price-group-head h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
}

body.ptb-med.ptb-med .price-subhead span:first-child {
  color: var(--blue-ink);
  font-size: var(--small);
  font-weight: 600;
}

body.ptb-med.ptb-med .price-subhead {
  background: var(--paper);
}

@media (max-width: 640px) {
  body.ptb-med.ptb-med .price-group-head h2 {
    font-size: 22px;
  }
}
/* ---------- Laboratory catalogue ----------

   One card per area of the Cibalab catalogue. The count is the point of the
   card, so it sits on the title's line rather than under it. */

body.ptb-med.ptb-med .lab-area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

body.ptb-med.ptb-med .lab-area {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-6);
}

body.ptb-med.ptb-med .lab-area-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

body.ptb-med.ptb-med .lab-area-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
}

body.ptb-med.ptb-med .lab-area-count {
  flex: none;
  border-radius: 999px;
  background: var(--paper);
  padding: 4px 12px;
  color: var(--blue-deep);
  font-size: var(--caption);
  font-weight: 600;
}

body.ptb-med.ptb-med .lab-area-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ptb-med.ptb-med .lab-area-examples li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--grey);
  font-size: var(--caption);
  font-weight: 300;
  line-height: 1.5;
}

@media (max-width: 900px) {
  body.ptb-med.ptb-med .lab-area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.ptb-med.ptb-med .lab-area-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Legal pages ----------

   Long prose, one column, measured for reading rather than for the grid. */

body.ptb-med.ptb-med .legal-body {
  max-width: 760px;
}

body.ptb-med.ptb-med .legal-body h2 {
  margin: var(--sp-10, 40px) 0 var(--sp-4);
  font-size: 26px;
  line-height: 1.3;
}

body.ptb-med.ptb-med .legal-body h2:first-child {
  margin-top: 0;
}

body.ptb-med.ptb-med .legal-body p {
  margin: 0 0 var(--sp-4);
  color: var(--grey);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.75;
}

body.ptb-med.ptb-med .legal-body strong {
  color: var(--blue-ink);
  font-weight: 600;
}

body.ptb-med.ptb-med .legal-note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-deep);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-8);
}

/* ---------- Footer legal links ----------

   On the bottom bar next to the copyright, because that is where people
   look for them and nowhere else. */

body.ptb-med.ptb-med .footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px) var(--sp-6);
}

body.ptb-med.ptb-med .footer-legal a {
  color: #b9bac2;
  font-size: 12px;
  text-decoration: none;
}

body.ptb-med.ptb-med .footer-legal a:hover {
  color: var(--white);
  text-decoration: underline;
}

@media (max-width: 640px) {
  body.ptb-med.ptb-med .footer-bottom {
    flex-direction: column;
    gap: var(--sp-4);
  }
}

/* ---------- Article body ----------

   Everything an editor can put in the WordPress editor, dressed in the v3
   design system. Written as element selectors inside .post-body because the
   markup comes from the editor and carries no classes of its own. */

body.ptb-med.ptb-med .post-body {
  max-width: 760px;
}

body.ptb-med.ptb-med .post-body > *:first-child {
  margin-top: 0;
}

body.ptb-med.ptb-med .post-body p {
  margin: 0 0 var(--sp-5, 20px);
  color: var(--grey);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
}

body.ptb-med.ptb-med .post-body h2 {
  margin: var(--sp-10, 40px) 0 var(--sp-4);
  color: var(--blue-ink);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
}

body.ptb-med.ptb-med .post-body h3 {
  margin: var(--sp-8) 0 var(--sp-3);
  color: var(--blue-ink);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
}

body.ptb-med.ptb-med .post-body h4 {
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--blue-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

body.ptb-med.ptb-med .post-body ul,
body.ptb-med.ptb-med .post-body ol {
  margin: 0 0 var(--sp-5, 20px);
  padding-left: 22px;
  color: var(--grey);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
}

body.ptb-med.ptb-med .post-body li {
  margin-bottom: var(--sp-2, 8px);
}

body.ptb-med.ptb-med .post-body li::marker {
  color: var(--blue-deep);
}

body.ptb-med.ptb-med .post-body strong,
body.ptb-med.ptb-med .post-body b {
  color: var(--blue-ink);
  font-weight: 600;
}

body.ptb-med.ptb-med .post-body a {
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.ptb-med.ptb-med .post-body a:hover {
  color: var(--blue-ink);
}

body.ptb-med.ptb-med .post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  margin: var(--sp-6) 0;
}

body.ptb-med.ptb-med .post-body figure {
  margin: var(--sp-8) 0;
}

body.ptb-med.ptb-med .post-body figure img {
  margin: 0;
}

body.ptb-med.ptb-med .post-body figcaption {
  margin-top: var(--sp-3);
  color: var(--grey);
  font-size: var(--caption);
  font-weight: 300;
  line-height: 1.6;
}

body.ptb-med.ptb-med .post-body blockquote {
  border-left: 3px solid var(--blue-deep);
  margin: var(--sp-8) 0;
  padding: var(--sp-2, 8px) 0 var(--sp-2, 8px) var(--sp-6);
}

body.ptb-med.ptb-med .post-body blockquote p {
  margin-bottom: 0;
  color: var(--blue-ink);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
}

body.ptb-med.ptb-med .post-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-10, 40px) 0;
}

body.ptb-med.ptb-med .post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-6) 0;
  font-size: var(--small);
}

body.ptb-med.ptb-med .post-body th,
body.ptb-med.ptb-med .post-body td {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-2, 8px);
  text-align: left;
}

body.ptb-med.ptb-med .post-body th {
  color: var(--blue-ink);
  font-weight: 600;
}

/* WordPress alignment and caption classes the editor emits. */
body.ptb-med.ptb-med .post-body .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

body.ptb-med.ptb-med .post-body .alignleft {
  float: left;
  margin: var(--sp-2, 8px) var(--sp-6) var(--sp-4) 0;
  max-width: 50%;
}

body.ptb-med.ptb-med .post-body .alignright {
  float: right;
  margin: var(--sp-2, 8px) 0 var(--sp-4) var(--sp-6);
  max-width: 50%;
}

body.ptb-med.ptb-med .post-body .wp-caption {
  max-width: 100%;
}

body.ptb-med.ptb-med .post-body .wp-caption-text {
  margin-top: var(--sp-2, 8px);
  color: var(--grey);
  font-size: var(--caption);
  font-weight: 300;
}

body.ptb-med.ptb-med .post-body::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 640px) {
  body.ptb-med.ptb-med .post-body h2 {
    font-size: 24px;
  }

  body.ptb-med.ptb-med .post-body .alignleft,
  body.ptb-med.ptb-med .post-body .alignright {
    float: none;
    margin: var(--sp-6) 0;
    max-width: 100%;
  }
}