/* MPC responsive design system — shared across Semplice pages. */
:root {
    --mpc-content-max: 1320px;
    --mpc-gutter: 32px;
    --mpc-section-space: 96px;
    --mpc-copy-max: 760px;
    --smp-grid-width-desktop: var(--mpc-content-max);
    --smp-grid-outer-desktop: var(--mpc-gutter);
    --smp-grid-outer-tablet: var(--mpc-gutter);
    --smp-grid-outer-mobile: var(--mpc-gutter);
    --smp-grid-gap-desktop: 30px;
    --smp-grid-gap-mobile: 22px;
}

html,
body,
#content-holder,
#content-holder .sections {
    max-width: 100%;
    overflow-x: clip;
}

#content-holder h1,
#content-holder h2,
#content-holder h3,
#content-holder h4 {
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: break-word;
}

#content-holder p,
#content-holder li {
    overflow-wrap: break-word;
}

/* Wide desktop */
@media screen and (min-width: 1440px) {
    :root {
        --mpc-content-max: 1360px;
        --mpc-gutter: 48px;
        --mpc-section-space: 112px;
    }

    #content-holder h1 { font-size: clamp(4rem, 4.5vw, 5rem) !important; line-height: 1.06 !important; }
    #content-holder h2 { font-size: clamp(3rem, 3.5vw, 4rem) !important; line-height: 1.1 !important; }
    #content-holder h3 { font-size: clamp(2.1rem, 2.5vw, 2.8rem) !important; line-height: 1.16 !important; }
    #content-holder h4 { font-size: 1.65rem !important; line-height: 1.25 !important; }
}

/* Desktop */
@media screen and (min-width: 992px) and (max-width: 1439.98px) {
    :root {
        --mpc-content-max: 1240px;
        --mpc-gutter: 32px;
        --mpc-section-space: 88px;
    }

    #content-holder h1 { font-size: clamp(3.5rem, 5vw, 4.45rem) !important; line-height: 1.07 !important; }
    #content-holder h2 { font-size: clamp(2.65rem, 4vw, 3.45rem) !important; line-height: 1.11 !important; }
    #content-holder h3 { font-size: clamp(1.9rem, 3vw, 2.55rem) !important; line-height: 1.17 !important; }
    #content-holder h4 { font-size: 1.5rem !important; line-height: 1.25 !important; }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --mpc-gutter: 28px;
        --mpc-section-space: 72px;
        --smp-grid-gap-mobile: 24px;
    }

    #content-holder h1 { font-size: clamp(3rem, 7vw, 3.75rem) !important; line-height: 1.08 !important; }
    #content-holder h2 { font-size: clamp(2.25rem, 5.5vw, 3rem) !important; line-height: 1.12 !important; }
    #content-holder h3 { font-size: clamp(1.7rem, 4vw, 2.2rem) !important; line-height: 1.18 !important; }
    #content-holder h4 { font-size: 1.35rem !important; line-height: 1.25 !important; }
}

/* Phone */
@media screen and (max-width: 767.98px) {
    :root {
        --mpc-gutter: 20px;
        --mpc-section-space: 56px;
        --smp-grid-gap-mobile: 20px;
    }

    #content-holder h1 {
        font-size: clamp(2.1rem, 10vw, 2.75rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em;
    }

    #content-holder h2 {
        font-size: clamp(1.7rem, 7.6vw, 2.2rem) !important;
        line-height: 1.14 !important;
        letter-spacing: -.025em;
    }

    #content-holder h3 {
        font-size: clamp(1.35rem, 6vw, 1.7rem) !important;
        line-height: 1.2 !important;
    }

    #content-holder h4 {
        font-size: clamp(1.1rem, 4.8vw, 1.35rem) !important;
        line-height: 1.25 !important;
    }

    /* Prevent legacy page-level padding from producing different text edges.
       Media remains governed by its section, allowing intentional full bleed. */
    #content-holder .sections smp-content:not([data-module="image"]):not([data-module="gallery"]):not([data-module="lottie"]),
    #content-holder .sections .is-content:not(.smp-image):not(.semplice-lottie) {
        box-sizing: border-box;
        max-width: calc(100vw - (var(--mpc-gutter) * 2));
        margin-right: auto;
        margin-left: auto;
    }

    #content-holder .sections .is-content:not(.smp-image):not(.smp-code):not(.semplice-lottie) {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    #content-holder .mpc-article {
        width: calc(100vw - (var(--mpc-gutter) * 2));
    }

    #content-holder .info-button,
    #content-holder .info-button-alt,
    #content-holder .semplice-button {
        box-sizing: border-box;
        max-width: 100%;
        min-height: 46px;
        padding: 13px 20px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        white-space: normal;
    }
}

@media screen and (max-width: 389px) {
    :root { --mpc-gutter: 18px; }
}