/* Media+Text SFH2026 */
/* The 20px gutter lives on the PARENT so .sfh-container stays the un-padded
   inner the rest of the theme expects: 20 + ((vw-40)-1280)/2 == (vw-1280)/2,
   the same left edge as sections built as max-width 1320 + padding-inline 20.
   Without it this section had no horizontal padding at all, so below 1280px
   (i.e. every phone) its content sat flush against the screen edges. */
.sfh-mediatext { padding: clamp(36px, 5vw, 72px) 20px; }
.sfh-mediatext .sfh-container {
    max-width: var(--cms2-max-width, 1280px);
    margin: 0 auto;
}
.sfh-mt-heading {
    /* margin: 0 0 28px;  */
    margin: 0 0 0px 0px;
    text-transform: uppercase; font-weight: 800;
    font-size: clamp(30px, 3.6vw, 40px);
    color: #000;
}
/* stretch, not flex-start: the photo takes its height from the row so both
   columns end on the same line. The slides are position:absolute, so the media
   column has no intrinsic height of its own — the row is sized by the copy. */
.sfh-mt-cols { display: flex; gap: clamp(10px, 3vw, 44px); align-items: stretch; }
.sfh-mt-media { flex: 0 0 40%; display: flex; }
.sfh-mt-media-right .sfh-mt-media { order: 2; }
.sfh-mt-slider { position: relative; overflow: hidden; flex: 1; background: #f1f2f3; }
.sfh-mt-slider .cms2-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.sfh-mt-slider .cms2-slide.active { opacity: 1; z-index: 1; }
.sfh-mt-slider img { 
    width: 100%; height: 100%; object-fit: cover; display: block;}
.sfh-mt-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: #17181a;
    cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.sfh-mt-arrow svg { width: 16px; height: 11px; }
.sfh-mt-arrow-prev { left: 10px; }
.sfh-mt-arrow-next { right: 10px; }

.sfh-mt-copy { flex: 1; }
.sfh-mt-body { color: rgb(0,0,0, 0.70); font-size: 18px; line-height: 1.75; }
.sfh-mt-body p { margin: 0 0 1em; }
/* red quote callout (Figma) — use a blockquote in the rich text */
.sfh-mt-body blockquote {
    margin: 1.4em 0 0; padding: 22px 26px; background: #be202e; color: #fff;
    font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.5;
}
.sfh-mt-body blockquote p { margin: 0; }
.sfh-mt-video { margin-top: 22px; aspect-ratio: 16 / 9; }
.sfh-mt-video iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; display: block; }

@media (max-width: 820px) {
    .sfh-mt-cols { flex-direction: column; }
    .sfh-mt-media { flex: none; width: 100%; order: unset !important; }
    /* Stacked, the heading has to lead — a section title reading AFTER its photo
       is not how anyone scans a page. The copy column is flattened so its
       children become items of the same column as the photo, which is what lets
       the heading move ahead of it; everything else keeps source order. */
    .sfh-mt-copy { display: contents; }
    .sfh-mt-heading { 
        /* order: -1;  */
        margin-top: 18px;
    }
    /* stacked, so there is no copy column to match: the ratio has to come back
       or the absolutely-positioned slides leave the slider zero pixels tall */
    .sfh-mt-slider { aspect-ratio: 4 / 5; }
}