/* Presentation classes are assigned to the original headings and cells.
   The title, TOC, review cards, city widgets and clinic profiles keep their own roles. */
body:is(.icl-comparison-article,.icl-column-article) #container .p-single__content .post_content {
  --chapter-color: var(--lp-region, #11726f);
  --chapter-accent: var(--lp-accent, #a7ded2);
  --chapter-paper: color-mix(in srgb, var(--chapter-color) 38%, #153650);
  --subheading-ink: color-mix(in srgb, var(--chapter-color) 42%, #122e42);
  --subheading-line: color-mix(in srgb, var(--chapter-color) 26%, white);

  /* #rating-data also names a legacy chapter rule with ID specificity. */
  & h2:is(.icl-content-section,#rating-data) {
    margin: clamp(44px,5.2vw,64px) 0 clamp(18px,2.2vw,25px) !important;
    padding: clamp(15px,2vw,22px) clamp(14px,2.6vw,27px) !important;
    border: 0 !important;
    border-inline-start: 5px solid var(--chapter-accent) !important;
    border-radius: 0 !important;
    background: var(--chapter-paper) !important;
    color: #fff !important;
    font-size: clamp(21px,2.1vw,28px) !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
    letter-spacing: -.018em;
    text-align: start !important;
    text-shadow: none;
    box-shadow: none !important;
  }
  & h2.icl-content-section::before,
  & h2.icl-content-section::after { content: none !important; }
  & h2.icl-content-section :is(a,strong,b,span,font) { color: inherit !important; }
  & h2.icl-content-section a { text-decoration: underline !important; }
  & h3.icl-content-topic {
    margin: clamp(29px,3.5vw,40px) 0 12px !important;
    padding: 5px 0 5px 12px !important;
    border: 0 !important;
    border-inline-start: 4px solid var(--chapter-color) !important;
    background: none !important;
    color: var(--subheading-ink) !important;
    font-size: clamp(18px,1.65vw,22px) !important;
    line-height: 1.55 !important;
    font-weight: 800 !important;
  }
  & h4.icl-content-detail {
    margin: clamp(22px,2.5vw,29px) 0 8px !important;
    padding: 0 0 6px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--subheading-line) !important;
    background: none !important;
    color: #354c5d !important;
    font-size: clamp(16px,1.28vw,18px) !important;
    line-height: 1.6 !important;
    font-weight: 750 !important;
  }
  & .icl-content-section + .icl-content-topic,
  & .icl-content-topic + .icl-content-detail { margin-top: 14px !important; }
  & :is(h3,h4).icl-content-question {
    margin: 22px 0 9px !important;
    padding: 10px 13px !important;
    border: 0 !important;
    color: var(--subheading-ink) !important;
    background: color-mix(in srgb,var(--chapter-color) 7%,white) !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    line-height: 1.6 !important;
  }
  /* A few old Gutenberg profiles are plain headings without the ranked card component. */
  & .tcdce-body > h3.icl-content-profile {
    margin: 30px 0 12px !important;
    padding: 10px 0 0 !important;
    background: none !important;
    border: 0 !important;
    border-top: 2px solid var(--chapter-color) !important;
    color: #173950 !important;
    font-size: clamp(20px,1.8vw,24px) !important;
  }
}

/* Each matrix preserves its native orientation and one scrolling ancestor.
   An ordinary checklist or medical data table never receives these classes. */
body.icl-comparison-article #container .p-single__content .post_content table.icl-clinic-matrix {
  --axis-width: 94px;
  --clinic-width: 144px;
  --clinic-count: 3;
  --matrix-line: #ced9df;
  --matrix-winner: #fff8dc;
  --matrix-gold: #bd952d;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;

  &.icl-matrix-horizontal {
    min-width: calc(var(--axis-width) + var(--clinic-count) * var(--clinic-width)) !important;
  }
  &.icl-matrix-horizontal:has(thead > tr:first-child > :nth-child(5)) { --clinic-count: 4; }
  &.icl-matrix-horizontal:has(thead > tr:first-child > :nth-child(6)) { --clinic-count: 5; }
  &.icl-matrix-horizontal:has(thead > tr:first-child > :nth-child(7)) { --clinic-count: 6; }
  &.icl-matrix-horizontal:has(thead > tr:first-child > :nth-child(8)) { --clinic-count: 7; }
  &.icl-matrix-vertical { min-width: 650px !important; }
  & > :is(thead,tbody) > tr > :is(th,td) {
    padding: 9px 10px !important;
    border-color: var(--matrix-line) !important;
    font-size: 14px !important;
    line-height: 1.56 !important;
    vertical-align: middle !important;
    overflow-wrap: anywhere !important;
  }
  /* The pinned comparison axis or clinic name remains visible during a swipe. */
  & > :is(thead,tbody) > tr > :first-child {
    width: var(--axis-width) !important;
    min-width: var(--axis-width) !important;
    max-width: var(--axis-width) !important;
    position: sticky !important;
    inset-inline-start: 0 !important;
    z-index: 2 !important;
    color: #203d51 !important;
    background: #edf2f4 !important;
    box-shadow: 1px 0 0 #aebfc9 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    text-align: start !important;
  }
  & > thead > tr > :is(th,td),
  &.icl-matrix-vertical:not(:has(> thead)) > tbody > tr:first-child > :is(th,td) {
    padding: 8px !important;
    color: #173950 !important;
    background: #f3f6f7 !important;
    border-bottom: 2px solid #7f97a7 !important;
    font-weight: 800 !important;
    line-height: 1.43 !important;
    text-align: center !important;
  }
  & > thead > tr > :first-child,
  &.icl-matrix-vertical:not(:has(> thead)) > tbody > tr:first-child > :first-child {
    color: #fff !important;
    background: #173950 !important;
    border-bottom-color: #173950 !important;
  }
  & > thead :is(a,strong,b,font) {
    color: inherit !important;
    line-height: inherit !important;
  }
  & > thead > tr > th > a {
    display: block;
    text-decoration: underline !important;
    text-decoration-color: #90a4b0 !important;
    text-underline-offset: 3px;
  }
  & > thead > tr > th a > strong + br { display: none; }
  /* Works with the original direct image and with a responsive picture wrapper. */
  & > thead > tr > th :is(img,.icl-matrix-logo) {
    display: block !important;
    box-sizing: border-box;
    width: min(100%,122px) !important;
    max-width: 100% !important;
    height: 45px !important;
    max-height: 45px !important;
    margin: 5px auto 0 !important;
    padding: 2px 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    object-fit: contain !important;
  }
  & > thead > tr > th picture.icl-matrix-logo > img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  & > :is(thead,tbody) > tr > .icl-matrix-first {
    background: var(--matrix-winner) !important;
  }
  & > tbody > tr > :is(.highlight,.my-blue-highlight-col):not(.icl-matrix-first) {
    background: #fff !important;
  }
  &.icl-matrix-horizontal > :is(thead,tbody) > tr > .icl-matrix-first {
    border-inline-start: 2px solid var(--matrix-gold) !important;
  }
  & > thead > tr > .icl-matrix-first { border-bottom-color: var(--matrix-gold) !important; }
  & .icl-matrix-rank.icl-matrix-first > strong {
    display: inline-block;
    padding: 2px 9px;
    color: #513c0d !important;
    background: #f1d47b;
    border: 1px solid #c8a651;
    line-height: 1.5;
  }
  & .my-blue-stars { color: #885f08 !important; }
  & .icl-matrix-fee .icl-comparison-price {
    color: #203d51;
    font-size: 1.06em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  & .icl-matrix-first .icl-comparison-price { color: #9c2e21; }
  & :is(.my-blue-btn,.btn-3d,.btn-orange-3d) {
    width: 100% !important;
    min-height: 44px;
    padding: 5px 3px !important;
    border: 1px solid #91a5b0 !important;
    border-radius: 3px !important;
    color: #164563 !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
  }
  & :is(.my-blue-btn,.btn-3d,.btn-orange-3d)::after { content: none !important; }
  & :is(.my-blue-btn,.btn-3d,.btn-orange-3d):is(:hover,:focus-visible) {
    background: #edf3f6 !important;
    border-color: #395e75 !important;
  }
}
@container comparison-copy (min-width: 730px) {
  body.icl-comparison-article #container .p-single__content .post_content table.icl-clinic-matrix {
    --axis-width: 90px;
    --clinic-width: 118px;
    & > :is(thead,tbody) > tr > :is(th,td) { padding-inline: 7px !important; }
  }
}

/* The phone SVGs have their own tall composition. The intrinsic size of the
   selected source takes precedence over the dimensions of the fallback WebP. */
body.icl-comparison-article #container .p-single__content .post_content figure:has(> picture.icl-content-figure) {
  width: 100% !important;
  max-width: 840px !important;
  margin-inline: auto !important;
}
body.icl-comparison-article #container .post_content picture.icl-content-figure {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}
/* Reserve the selected artwork's height before the theme's lazy image loads. */
body.icl-comparison-article #container .post_content picture.icl-content-figure:has(img[src*="selection-4points"]) {
  aspect-ratio: 840 / 443;
}
body.icl-comparison-article #container .post_content picture.icl-content-figure:has(img[src*="visit-plan"]) {
  aspect-ratio: 840 / 440;
}
body.icl-comparison-article #container .post_content picture.icl-content-figure > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}
@media (max-width: 700px) {
  body.icl-comparison-article #container .p-single__content .post_content figure:has(> picture.icl-content-figure) {
    max-width: 410px !important;
  }
  body.icl-comparison-article #container .post_content picture.icl-content-figure:has(img[src*="selection-4points"]) {
    aspect-ratio: 360 / 662;
  }
  body.icl-comparison-article #container .post_content picture.icl-content-figure:has(img[src*="visit-plan"]) {
    aspect-ratio: 360 / 938;
  }
}