/* 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%;
}
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;
    }
}