/* seo-fixes.css - added 2026-08-31 (T-020) */
/* AOS fade-left/right applies translateX(100px) before animating, creating a */
/* 100px horizontal scrollbar on mobile. Standard AOS remedy below. */
html, body { overflow-x: hidden; }
.banner-right-image img { max-width: 100%; height: auto; }

/* T-016: reserve intrinsic space for the hero and award badges so they do not
   shift layout while decoding (CLS). Ratios match the real files exactly. */
.banner-right-image img { aspect-ratio: 650 / 639; }
.banner-left-image img, .award-box img, .banner-award img { aspect-ratio: 10 / 7; height: auto; }

/* 2026-08-31 fix: the SEO editing pass added <figure class="sl-figure ..."> markup
   to article pages (Schroth Method etc.) but never shipped the CSS for those
   classes. Result: unstyled figures rendered at full intrinsic image size,
   overflowing the article column and looking stretched. Add proper responsive
   figure styling with left/right float variants that collapse to full-width
   on mobile. */
figure.sl-figure {
    display: block;
    margin: 1.25rem auto;
    max-width: 100%;
}

/* 2026-08-31 (round 3): sl-figure-right in the Schroth page was floating
   into the NEXT section — its image was taller than the paragraph beside
   it, so the following <h2> and <ul.include> wrapped around it, giving
   the appearance of huge vertical gaps between list items. Force each
   new section heading to clear any float above it. Applied narrowly to
   the article content wrapper so we don't accidentally clear elsewhere. */
.schroth-method-of-scoliosis h2,
.services-section h2.main-heading,
.services-section .comparison,
.services-section table,
.services-section > ul,
.services-section > p:has(+ h2) {
    clear: both;
}

/* 2026-08-31 (round 3): the checklist icons (verified.svg) have no
   intrinsic width/height — only a viewBox — so any UA that fell back
   to the 300×150 default was rendering each icon huge and every list-
   item ~150px tall. Force a real, small size. Applied to both the raw
   selector and the seo-a11y-tagged variant so it wins whichever runs
   first. */
ul.include li.list-item > img,
ul.include li.list-item img[src*="verified.svg"],
.list-item > img[src$=".svg"] {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    vertical-align: middle;
    display: inline-block;
    flex: none;
}
figure.sl-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 6px;
}
figure.sl-figure figcaption {
    font-size: 0.9em;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
    line-height: 1.4;
}
figure.sl-figure-right {
    float: right;
    max-width: 48%;
    margin: 0.25rem 0 1rem 1.5rem;
}
figure.sl-figure-left {
    float: left;
    max-width: 48%;
    margin: 0.25rem 1.5rem 1rem 0;
}
@media (max-width: 767px) {
    figure.sl-figure-right,
    figure.sl-figure-left {
        float: none;
        max-width: 100%;
        margin: 1rem 0;
    }
}