/**
 * About page — Elementor HTML-band compatibility with MPT inner-page CSS.
 *
 * Band containers carry .mpt-inner / .mpt-inner-band classes. Elementor kit
 * padding on .e-con / .e-con-inner stacks on top of theme spacing; neutralize
 * Elementor chrome and re-assert theme section rhythm (same approach as Home).
 */

/* ---------- Elementor chrome reset on About bands ---------- */
body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner,
body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner-about {
    --container-max-width: 100%;
    --padding-top: 0px;
    --padding-right: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --margin-top: 0px;
    --margin-right: 0px;
    --margin-bottom: 0px;
    --margin-left: 0px;
    width: 100%;
    max-width: var(--mpt-container);
    min-width: 0;
    margin-inline: auto !important;
    margin-block: 0 !important;
    padding-inline: var(--mpt-gutter-desktop) !important;
    padding-block: clamp(2.5rem, 5vw, 4.5rem) !important;
    box-sizing: border-box;
}

body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner.mpt-inner-band {
    max-width: none !important;
    width: 100% !important;
    padding-inline: max(var(--mpt-gutter-desktop), calc((100% - var(--mpt-container)) / 2)) !important;
}

body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner.mpt-inner-hero {
    padding-block: clamp(3rem, 6.5vw, 5.5rem) !important;
}

body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner > .e-con-inner {
    --container-max-width: 100%;
    max-width: none !important;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0;
}

body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner > .e-con-inner > .elementor-widget-html,
body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner .elementor-widget-html,
body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner .elementor-widget-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Soft band background must paint on the full-bleed container */
body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner.mpt-inner-band--soft {
    background: var(--mpt-color-surface-soft);
}

@media (max-width: 768px) {
    body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner {
        padding-inline: var(--mpt-gutter-mobile) !important;
        padding-block: var(--mpt-section-spacing-mobile) !important;
    }

    body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner.mpt-inner-band {
        padding-inline: var(--mpt-gutter-mobile) !important;
    }

    body.mpt-theme.mpt-inner-page--about .elementor .e-con.mpt-inner.mpt-inner-hero {
        padding-block-start: var(--mpt-space-7) !important;
    }
}

/* ---------- Hybrid native-widget helpers (safe if reintroduced later) ---------- */
body.mpt-theme.mpt-inner-page--about .e-con.mpt-inner-hero__layout,
body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-group,
body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-vision,
body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-whympt__stage {
    display: grid;
}

body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-hero__body .elementor-widget-text-editor .elementor-widget-container {
    display: grid;
    gap: 0.85rem;
}

body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-hero__body .elementor-widget-text-editor p {
    margin: 0;
}

body.mpt-theme.mpt-inner-page--about .e-con.mpt-inner-hero__copy {
    display: grid;
    align-content: center;
    gap: 0;
}

body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-group__media,
body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-hero__visual,
body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-whympt__media {
    min-width: 0;
}

body.mpt-theme.mpt-inner-page--about .elementor-widget-image.mpt-inner-media__img img,
body.mpt-theme.mpt-inner-page--about .elementor-widget-image.mpt-about-whympt__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.mpt-theme.mpt-inner-page--about .e-con.mpt-inner-media.mpt-inner-media--about-hero,
body.mpt-theme.mpt-inner-page--about .e-con.mpt-inner-media.mpt-inner-media--about-group {
    position: relative;
    overflow: hidden;
    height: 100%;
}

body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-hero__visual .e-con.mpt-inner-media--about-hero .elementor-widget-image,
body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-group__media .e-con.mpt-inner-media--about-group .elementor-widget-image {
    height: 100%;
}

body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-whympt__media {
    position: relative;
}

body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-whympt__media .elementor-widget-image {
    height: 100%;
}

body.mpt-theme.mpt-inner-page--about .e-con.mpt-about-whympt__media .elementor-widget-html {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body.mpt-theme.mpt-inner-page--about .elementor-widget-heading.mpt-eyebrow .elementor-heading-title,
body.mpt-theme.mpt-inner-page--about .elementor-widget-heading.mpt-eyebrow--pill .elementor-heading-title {
    margin: 0;
}

body.mpt-theme.mpt-inner-page--about .elementor-widget-heading.mpt-about-group__caption .elementor-heading-title {
    margin: 0;
}

body.mpt-theme.mpt-inner-page--about .elementor-widget-text-editor .mpt-about-group__lede,
body.mpt-theme.mpt-inner-page--about .elementor-widget-text-editor .mpt-about-group__aside,
body.mpt-theme.mpt-inner-page--about .elementor-widget-text-editor .mpt-about-whympt__lede {
    margin: 0;
}

body.mpt-theme.mpt-inner-page--about .mpt-inner-actions .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.78rem 1.15rem;
    border-radius: var(--mpt-radius-pill);
    border: 1px solid transparent;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body.mpt-theme.mpt-inner-page--about .mpt-inner-actions .mpt-button--light .elementor-button {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 255, 255, 0.96);
    color: var(--mpt-color-deep);
}

body.mpt-theme.mpt-inner-page--about .mpt-inner-actions .mpt-button--light .elementor-button:hover,
body.mpt-theme.mpt-inner-page--about .mpt-inner-actions .mpt-button--light .elementor-button:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--mpt-color-deep);
}

body.mpt-theme.mpt-inner-page--about .elementor-widget-container > .mpt-about-whympt__shade {
    display: block;
}