/* ==========================================================================
   Shared Frontend Layout
   Surface primitives
   ========================================================================== */

.frontend-layout-surface {
    --frontend-composition-section-gap: clamp(24px, 3vw, 48px);
    --frontend-composition-column-gap: clamp(16px, 2vw, 32px);
    --frontend-composition-row-gap: var(--frontend-composition-column-gap);

    /* Composition content safety, separate from Section Appearance and Grid Gap.
       An explicit 0px can opt out without changing custom padding values. */
    --frontend-composition-content-inline-safety: clamp(16px, 2vw, 32px);
	
	/*
     * Shared Heading defaults.
     *
     * Contract:
     * platform safe fallback
     *     ← future global Design Settings
     *     ← local Section override
     */

    --frontend-heading-title-font-family:
        var(
            --frontend-design-heading-title-font-family,
            "Source Serif 4", Georgia, "Times New Roman", serif
        );

    --frontend-heading-title-font-size:
        var(
            --frontend-design-heading-title-font-size,
            clamp(32px, 3.2vw, 46px)
        );

    --frontend-heading-title-font-weight:
        var(
            --frontend-design-heading-title-font-weight,
            700
        );

    --frontend-heading-title-line-height:
        var(
            --frontend-design-heading-title-line-height,
            1.08
        );

    --frontend-heading-title-color:
        var(
            --frontend-design-heading-title-color,
            #132A22
        );

    --frontend-heading-title-margin-top:
        var(
            --frontend-design-heading-title-margin-top,
            0px
        );

    --frontend-heading-title-margin-bottom:
        var(
            --frontend-design-heading-title-margin-bottom,
            10px
        );

    --frontend-heading-subtitle-font-family:
        var(
            --frontend-design-heading-subtitle-font-family,
            "Manrope", Arial, sans-serif
        );

    --frontend-heading-subtitle-font-size:
        var(
            --frontend-design-heading-subtitle-font-size,
            16px
        );

    --frontend-heading-subtitle-font-weight:
        var(
            --frontend-design-heading-subtitle-font-weight,
            400
        );

    --frontend-heading-subtitle-line-height:
        var(
            --frontend-design-heading-subtitle-line-height,
            1.6
        );

    --frontend-heading-subtitle-color:
        var(
            --frontend-design-heading-subtitle-color,
            #667069
        );

    --frontend-heading-alignment:
        var(
            --frontend-design-heading-alignment,
            left
        );
	    position: relative;
        width: 100%;
        min-width: 0;
    }

/* ==========================================================================
   Composition
   Section → Boundary → Heading → Grid → Slot → Module
   ========================================================================== */

.frontend-composition-section {
    width: 100%;
    min-width: 0;
}

/* ==========================================================================
   Composition Section Appearance — Margin / Padding (P3.4)
   --------------------------------------------------------------------------
   The Appearance variables belong to the *outer* box:
   - contained: shared .container (P3.2 forwards variables here)
   - full_width_contained / full_width: <section> itself

   No override => preserve the prior gap and centering.
   Explicit 0 => override the corresponding spacing, including the section gap.
   CSS Grid column-gap and the fluid boundary safety padding are independent.
   ========================================================================== */

.frontend-layout-surface > .frontend-composition-section-container {
    max-width: max(0px, calc(100% - var(--frontend-composition-section-margin-left, 0px) - var(--frontend-composition-section-margin-right, 0px)));
    margin-top: var(--frontend-composition-section-margin-top, 0px);
    margin-right: var(--frontend-composition-section-margin-right, auto);
    margin-bottom: var(--frontend-composition-section-margin-bottom, 0px);
    margin-left: var(--frontend-composition-section-margin-left, auto);
    padding-top: var(--frontend-composition-section-padding-top, 0px);
    padding-right: var(--frontend-composition-section-padding-right, 0px);
    padding-bottom: var(--frontend-composition-section-padding-bottom, 0px);
    padding-left: var(--frontend-composition-section-padding-left, 0px);
}

.frontend-layout-surface > .frontend-composition-section:not(.frontend-composition-section--contained) {
    max-width: max(0px, calc(100% - var(--frontend-composition-section-margin-left, 0px) - var(--frontend-composition-section-margin-right, 0px)));
    margin-top: var(--frontend-composition-section-margin-top, 0px);
    margin-right: var(--frontend-composition-section-margin-right, 0px);
    margin-bottom: var(--frontend-composition-section-margin-bottom, 0px);
    margin-left: var(--frontend-composition-section-margin-left, 0px);
    padding-top: var(--frontend-composition-section-padding-top, 0px);
    padding-right: var(--frontend-composition-section-padding-right, 0px);
    padding-bottom: var(--frontend-composition-section-padding-bottom, 0px);
    padding-left: var(--frontend-composition-section-padding-left, 0px);
}

.frontend-composition-section + .frontend-composition-section,
.frontend-layout-surface > .container + .frontend-composition-section,
.frontend-layout-surface > .frontend-composition-section + .container,
.frontend-layout-surface > .container + .container {
    margin-top: var(--frontend-composition-section-margin-top, var(--frontend-composition-section-gap));
}

/*
 * contained
 * Section and content are constrained by the shared .container wrapper.
 */
.frontend-composition-section--contained {
    width: 100%;
    min-width: 0;
}

/*
 * full_width_contained
 * Section surface spans the available width.
 * Its content remains constrained by the shared .container wrapper.
 */
.frontend-composition-section--full_width_contained {
    width: 100%;
    min-width: 0;
}

/*
 * full_width
 * Section surface and structural content span the available width.
 */
.frontend-composition-section--full_width {
    width: 100%;
    min-width: 0;
}

.frontend-composition-boundary {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.frontend-composition-boundary--contained {
    width: 100%;
    min-width: 0;
}

/* The content of contained sections receives the same structural safety
   as full-width sections. This is independent of custom Section padding. */
.frontend-layout-surface .frontend-composition-section--contained > .frontend-composition-boundary--contained,
.frontend-layout-surface .frontend-composition-section--full_width_contained > .container > .frontend-composition-boundary--contained {
    padding-inline: var(--frontend-composition-content-inline-safety);
}

.frontend-composition-boundary--fluid {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding-inline: var(--frontend-composition-content-inline-safety);
}

/* ==========================================================================
   Composition Heading
   --------------------------------------------------------------------------
   Default presentation belongs to the frontend design layer.

   Local Section Settings expose only sparse overrides through:
   --frontend-section-heading-*

   Future global Design Settings can override:
   --frontend-design-heading-*
   ========================================================================== */

.frontend-composition-heading {
    width: 100%;
    min-width: 0;
    margin-bottom: 24px;

    text-align: var(
        --frontend-section-heading-alignment,
        var(--frontend-heading-alignment)
    );
}

/* ==========================================================================
   Typography V2 — semantic heading levels inside Composition only.
   H1–H6 CSS values come from the validated Admin typography tokens.
   Existing Section Appearance overrides retain precedence at every breakpoint.
   A missing Typography V2 value falls back to existing shared design defaults.
   This does not affect heading tags used by Hero, cards, filters, or menus.
   ========================================================================== */

h1.frontend-composition-heading__title {
    --frontend-composition-heading-desktop-font-size:
        var(--vm-typography-h1-desktop-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-tablet-font-size:
        var(--vm-typography-h1-tablet-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-mobile-font-size:
        var(--vm-typography-h1-mobile-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-font-weight:
        var(--vm-typography-h1-weight, var(--frontend-heading-title-font-weight));
    --frontend-composition-heading-line-height:
        var(--vm-typography-h1-line-height, var(--frontend-heading-title-line-height));
    --frontend-composition-heading-letter-spacing:
        var(--vm-typography-h1-letter-spacing, var(--frontend-design-heading-title-letter-spacing, normal));
}

h2.frontend-composition-heading__title {
    --frontend-composition-heading-desktop-font-size:
        var(--vm-typography-h2-desktop-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-tablet-font-size:
        var(--vm-typography-h2-tablet-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-mobile-font-size:
        var(--vm-typography-h2-mobile-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-font-weight:
        var(--vm-typography-h2-weight, var(--frontend-heading-title-font-weight));
    --frontend-composition-heading-line-height:
        var(--vm-typography-h2-line-height, var(--frontend-heading-title-line-height));
    --frontend-composition-heading-letter-spacing:
        var(--vm-typography-h2-letter-spacing, var(--frontend-design-heading-title-letter-spacing, normal));
}

h3.frontend-composition-heading__title {
    --frontend-composition-heading-desktop-font-size:
        var(--vm-typography-h3-desktop-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-tablet-font-size:
        var(--vm-typography-h3-tablet-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-mobile-font-size:
        var(--vm-typography-h3-mobile-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-font-weight:
        var(--vm-typography-h3-weight, var(--frontend-heading-title-font-weight));
    --frontend-composition-heading-line-height:
        var(--vm-typography-h3-line-height, var(--frontend-heading-title-line-height));
    --frontend-composition-heading-letter-spacing:
        var(--vm-typography-h3-letter-spacing, var(--frontend-design-heading-title-letter-spacing, normal));
}

h4.frontend-composition-heading__title {
    --frontend-composition-heading-desktop-font-size:
        var(--vm-typography-h4-desktop-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-tablet-font-size:
        var(--vm-typography-h4-tablet-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-mobile-font-size:
        var(--vm-typography-h4-mobile-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-font-weight:
        var(--vm-typography-h4-weight, var(--frontend-heading-title-font-weight));
    --frontend-composition-heading-line-height:
        var(--vm-typography-h4-line-height, var(--frontend-heading-title-line-height));
    --frontend-composition-heading-letter-spacing:
        var(--vm-typography-h4-letter-spacing, var(--frontend-design-heading-title-letter-spacing, normal));
}

h5.frontend-composition-heading__title {
    --frontend-composition-heading-desktop-font-size:
        var(--vm-typography-h5-desktop-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-tablet-font-size:
        var(--vm-typography-h5-tablet-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-mobile-font-size:
        var(--vm-typography-h5-mobile-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-font-weight:
        var(--vm-typography-h5-weight, var(--frontend-heading-title-font-weight));
    --frontend-composition-heading-line-height:
        var(--vm-typography-h5-line-height, var(--frontend-heading-title-line-height));
    --frontend-composition-heading-letter-spacing:
        var(--vm-typography-h5-letter-spacing, var(--frontend-design-heading-title-letter-spacing, normal));
}

h6.frontend-composition-heading__title {
    --frontend-composition-heading-desktop-font-size:
        var(--vm-typography-h6-desktop-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-tablet-font-size:
        var(--vm-typography-h6-tablet-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-mobile-font-size:
        var(--vm-typography-h6-mobile-size, var(--frontend-heading-title-font-size));
    --frontend-composition-heading-font-weight:
        var(--vm-typography-h6-weight, var(--frontend-heading-title-font-weight));
    --frontend-composition-heading-line-height:
        var(--vm-typography-h6-line-height, var(--frontend-heading-title-line-height));
    --frontend-composition-heading-letter-spacing:
        var(--vm-typography-h6-letter-spacing, var(--frontend-design-heading-title-letter-spacing, normal));
}

.frontend-composition-heading__title {
    margin-top: var(
        --frontend-section-heading-title-margin-top,
        var(--frontend-heading-title-margin-top)
    );
    margin-bottom: var(
        --frontend-section-heading-title-margin-bottom,
        var(--frontend-heading-title-margin-bottom)
    );
    color: var(
        --frontend-section-heading-title-color,
        var(--frontend-heading-title-color)
    );
    font-family:
        var(--frontend-heading-title-font-family);
    font-size: var(
        --frontend-section-heading-title-font-size,
        var(--frontend-composition-heading-desktop-font-size, var(--frontend-heading-title-font-size))
    );
    font-weight: var(
        --frontend-section-heading-title-font-weight,
        var(--frontend-composition-heading-font-weight, var(--frontend-heading-title-font-weight))
    );
    line-height: var(
        --frontend-composition-heading-line-height,
        var(--frontend-heading-title-line-height)
    );
    letter-spacing: var(
        --frontend-composition-heading-letter-spacing,
        var(--frontend-design-heading-title-letter-spacing, normal)
    );
}

.frontend-composition-heading__subtitle {
    margin: 0;
    color:
        var(--frontend-heading-subtitle-color);
    font-family:
        var(--frontend-heading-subtitle-font-family);
    font-size: var(
        --frontend-section-heading-subtitle-font-size,
        var(--frontend-heading-subtitle-font-size)
    );
    font-weight:
        var(--frontend-heading-subtitle-font-weight);
    line-height:
        var(--frontend-heading-subtitle-line-height);
}

/* ==========================================================================
   Composition structural grid
   ========================================================================== */

.frontend-composition-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--frontend-composition-column-gap);
    row-gap: var(--frontend-composition-row-gap);
    width: 100%;
    min-width: 0;
}

/* Slot Appearance remains independent of Section spacing and Grid gap.
   Auto width lets the grid item fit its margins inside the allocated tracks;
   border-box keeps padding inside the resulting column box. */
.frontend-composition-slot {
    grid-column: span var(--frontend-composition-span, 12);
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    margin-top: var(--frontend-composition-slot-margin-top, 0px);
    margin-right: var(--frontend-composition-slot-margin-right, 0px);
    margin-bottom: var(--frontend-composition-slot-margin-bottom, 0px);
    margin-left: var(--frontend-composition-slot-margin-left, 0px);
    padding-top: var(--frontend-composition-slot-padding-top, 0px);
    padding-right: var(--frontend-composition-slot-padding-right, 0px);
    padding-bottom: var(--frontend-composition-slot-padding-bottom, 0px);
    padding-left: var(--frontend-composition-slot-padding-left, 0px);
}

/* ==========================================================================
   Shared frontend responsive contract
   --------------------------------------------------------------------------
   base                 >= 1200px
   tablet_landscape      992px - 1199px
   tablet_portrait       768px - 991px
   mobile_landscape      576px - 767px
   mobile_portrait      <= 575px

   Fiecare context non-base cade direct la valoarea base.
   Dacă nici base nu este suprascrisă, rămâne defaultul CSS shared.
   ========================================================================== */

/* Desktop/Laptop: compact shared lateral protection for Composition content.
   Section and Slot Appearance remain independently configurable. */
@media (min-width: 1200px) {
    .frontend-layout-surface {
        --frontend-composition-content-inline-safety: clamp(15px, 1vw, 20px);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* Slot Appearance: this interval falls directly back to base. */
    .frontend-composition-slot {
        margin-top: var(--frontend-composition-slot-margin-top-tablet-landscape, var(--frontend-composition-slot-margin-top, 0px));
        margin-right: var(--frontend-composition-slot-margin-right-tablet-landscape, var(--frontend-composition-slot-margin-right, 0px));
        margin-bottom: var(--frontend-composition-slot-margin-bottom-tablet-landscape, var(--frontend-composition-slot-margin-bottom, 0px));
        margin-left: var(--frontend-composition-slot-margin-left-tablet-landscape, var(--frontend-composition-slot-margin-left, 0px));
        padding-top: var(--frontend-composition-slot-padding-top-tablet-landscape, var(--frontend-composition-slot-padding-top, 0px));
        padding-right: var(--frontend-composition-slot-padding-right-tablet-landscape, var(--frontend-composition-slot-padding-right, 0px));
        padding-bottom: var(--frontend-composition-slot-padding-bottom-tablet-landscape, var(--frontend-composition-slot-padding-bottom, 0px));
        padding-left: var(--frontend-composition-slot-padding-left-tablet-landscape, var(--frontend-composition-slot-padding-left, 0px));
    }

    /* Section Appearance responsive: tablet_landscape; sparse overrides fall back to base. */
    .frontend-layout-surface > .frontend-composition-section-container {
        max-width: max(0px, calc(100% - var(--frontend-composition-section-margin-left-tablet-landscape, var(--frontend-composition-section-margin-left, 0px)) - var(--frontend-composition-section-margin-right-tablet-landscape, var(--frontend-composition-section-margin-right, 0px))));
        margin-top: var(--frontend-composition-section-margin-top-tablet-landscape, var(--frontend-composition-section-margin-top, 0px));
        margin-right: var(--frontend-composition-section-margin-right-tablet-landscape, var(--frontend-composition-section-margin-right, auto));
        margin-bottom: var(--frontend-composition-section-margin-bottom-tablet-landscape, var(--frontend-composition-section-margin-bottom, 0px));
        margin-left: var(--frontend-composition-section-margin-left-tablet-landscape, var(--frontend-composition-section-margin-left, auto));
        padding-top: var(--frontend-composition-section-padding-top-tablet-landscape, var(--frontend-composition-section-padding-top, 0px));
        padding-right: var(--frontend-composition-section-padding-right-tablet-landscape, var(--frontend-composition-section-padding-right, 0px));
        padding-bottom: var(--frontend-composition-section-padding-bottom-tablet-landscape, var(--frontend-composition-section-padding-bottom, 0px));
        padding-left: var(--frontend-composition-section-padding-left-tablet-landscape, var(--frontend-composition-section-padding-left, 0px));
    }

    .frontend-layout-surface > .frontend-composition-section:not(.frontend-composition-section--contained) {
        max-width: max(0px, calc(100% - var(--frontend-composition-section-margin-left-tablet-landscape, var(--frontend-composition-section-margin-left, 0px)) - var(--frontend-composition-section-margin-right-tablet-landscape, var(--frontend-composition-section-margin-right, 0px))));
        margin-top: var(--frontend-composition-section-margin-top-tablet-landscape, var(--frontend-composition-section-margin-top, 0px));
        margin-right: var(--frontend-composition-section-margin-right-tablet-landscape, var(--frontend-composition-section-margin-right, 0px));
        margin-bottom: var(--frontend-composition-section-margin-bottom-tablet-landscape, var(--frontend-composition-section-margin-bottom, 0px));
        margin-left: var(--frontend-composition-section-margin-left-tablet-landscape, var(--frontend-composition-section-margin-left, 0px));
        padding-top: var(--frontend-composition-section-padding-top-tablet-landscape, var(--frontend-composition-section-padding-top, 0px));
        padding-right: var(--frontend-composition-section-padding-right-tablet-landscape, var(--frontend-composition-section-padding-right, 0px));
        padding-bottom: var(--frontend-composition-section-padding-bottom-tablet-landscape, var(--frontend-composition-section-padding-bottom, 0px));
        padding-left: var(--frontend-composition-section-padding-left-tablet-landscape, var(--frontend-composition-section-padding-left, 0px));
    }

    .frontend-composition-section + .frontend-composition-section,
    .frontend-layout-surface > .container + .frontend-composition-section,
    .frontend-layout-surface > .frontend-composition-section + .container,
    .frontend-layout-surface > .container + .container {
        margin-top: var(
            --frontend-composition-section-margin-top-tablet-landscape,
            var(--frontend-composition-section-margin-top, var(--frontend-composition-section-gap))
        );
    }


    .frontend-composition-grid {
        column-gap: var(
            --frontend-composition-column-gap-tablet-landscape,
            var(--frontend-composition-column-gap)
        );
    }

    .frontend-composition-heading__title {
        font-size: var(
            --frontend-section-heading-title-font-size-tablet-landscape,
            var(
                --frontend-section-heading-title-font-size,
                var(--frontend-composition-heading-tablet-font-size, var(--frontend-heading-title-font-size))
            )
        );

        margin-top: var(
            --frontend-section-heading-title-margin-top-tablet-landscape,
            var(
                --frontend-section-heading-title-margin-top,
                var(--frontend-heading-title-margin-top)
            )
        );

        margin-bottom: var(
            --frontend-section-heading-title-margin-bottom-tablet-landscape,
            var(
                --frontend-section-heading-title-margin-bottom,
                var(--frontend-heading-title-margin-bottom)
            )
        );
    }

    .frontend-composition-heading__subtitle {
        font-size: var(
            --frontend-section-heading-subtitle-font-size-tablet-landscape,
            var(
                --frontend-section-heading-subtitle-font-size,
                var(--frontend-heading-subtitle-font-size)
            )
        );
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Slot Appearance: this interval falls directly back to base. */
    .frontend-composition-slot {
        margin-top: var(--frontend-composition-slot-margin-top-tablet-portrait, var(--frontend-composition-slot-margin-top, 0px));
        margin-right: var(--frontend-composition-slot-margin-right-tablet-portrait, var(--frontend-composition-slot-margin-right, 0px));
        margin-bottom: var(--frontend-composition-slot-margin-bottom-tablet-portrait, var(--frontend-composition-slot-margin-bottom, 0px));
        margin-left: var(--frontend-composition-slot-margin-left-tablet-portrait, var(--frontend-composition-slot-margin-left, 0px));
        padding-top: var(--frontend-composition-slot-padding-top-tablet-portrait, var(--frontend-composition-slot-padding-top, 0px));
        padding-right: var(--frontend-composition-slot-padding-right-tablet-portrait, var(--frontend-composition-slot-padding-right, 0px));
        padding-bottom: var(--frontend-composition-slot-padding-bottom-tablet-portrait, var(--frontend-composition-slot-padding-bottom, 0px));
        padding-left: var(--frontend-composition-slot-padding-left-tablet-portrait, var(--frontend-composition-slot-padding-left, 0px));
    }

    /* Section Appearance responsive: tablet_portrait; sparse overrides fall back to base. */
    .frontend-layout-surface > .frontend-composition-section-container {
        max-width: max(0px, calc(100% - var(--frontend-composition-section-margin-left-tablet-portrait, var(--frontend-composition-section-margin-left, 0px)) - var(--frontend-composition-section-margin-right-tablet-portrait, var(--frontend-composition-section-margin-right, 0px))));
        margin-top: var(--frontend-composition-section-margin-top-tablet-portrait, var(--frontend-composition-section-margin-top, 0px));
        margin-right: var(--frontend-composition-section-margin-right-tablet-portrait, var(--frontend-composition-section-margin-right, auto));
        margin-bottom: var(--frontend-composition-section-margin-bottom-tablet-portrait, var(--frontend-composition-section-margin-bottom, 0px));
        margin-left: var(--frontend-composition-section-margin-left-tablet-portrait, var(--frontend-composition-section-margin-left, auto));
        padding-top: var(--frontend-composition-section-padding-top-tablet-portrait, var(--frontend-composition-section-padding-top, 0px));
        padding-right: var(--frontend-composition-section-padding-right-tablet-portrait, var(--frontend-composition-section-padding-right, 0px));
        padding-bottom: var(--frontend-composition-section-padding-bottom-tablet-portrait, var(--frontend-composition-section-padding-bottom, 0px));
        padding-left: var(--frontend-composition-section-padding-left-tablet-portrait, var(--frontend-composition-section-padding-left, 0px));
    }

    .frontend-layout-surface > .frontend-composition-section:not(.frontend-composition-section--contained) {
        max-width: max(0px, calc(100% - var(--frontend-composition-section-margin-left-tablet-portrait, var(--frontend-composition-section-margin-left, 0px)) - var(--frontend-composition-section-margin-right-tablet-portrait, var(--frontend-composition-section-margin-right, 0px))));
        margin-top: var(--frontend-composition-section-margin-top-tablet-portrait, var(--frontend-composition-section-margin-top, 0px));
        margin-right: var(--frontend-composition-section-margin-right-tablet-portrait, var(--frontend-composition-section-margin-right, 0px));
        margin-bottom: var(--frontend-composition-section-margin-bottom-tablet-portrait, var(--frontend-composition-section-margin-bottom, 0px));
        margin-left: var(--frontend-composition-section-margin-left-tablet-portrait, var(--frontend-composition-section-margin-left, 0px));
        padding-top: var(--frontend-composition-section-padding-top-tablet-portrait, var(--frontend-composition-section-padding-top, 0px));
        padding-right: var(--frontend-composition-section-padding-right-tablet-portrait, var(--frontend-composition-section-padding-right, 0px));
        padding-bottom: var(--frontend-composition-section-padding-bottom-tablet-portrait, var(--frontend-composition-section-padding-bottom, 0px));
        padding-left: var(--frontend-composition-section-padding-left-tablet-portrait, var(--frontend-composition-section-padding-left, 0px));
    }

    .frontend-composition-section + .frontend-composition-section,
    .frontend-layout-surface > .container + .frontend-composition-section,
    .frontend-layout-surface > .frontend-composition-section + .container,
    .frontend-layout-surface > .container + .container {
        margin-top: var(
            --frontend-composition-section-margin-top-tablet-portrait,
            var(--frontend-composition-section-margin-top, var(--frontend-composition-section-gap))
        );
    }


    .frontend-composition-grid {
        column-gap: var(
            --frontend-composition-column-gap-tablet-portrait,
            var(--frontend-composition-column-gap)
        );
    }

    .frontend-composition-heading__title {
        font-size: var(
            --frontend-section-heading-title-font-size-tablet-portrait,
            var(
                --frontend-section-heading-title-font-size,
                var(--frontend-composition-heading-tablet-font-size, var(--frontend-heading-title-font-size))
            )
        );

        margin-top: var(
            --frontend-section-heading-title-margin-top-tablet-portrait,
            var(
                --frontend-section-heading-title-margin-top,
                var(--frontend-heading-title-margin-top)
            )
        );

        margin-bottom: var(
            --frontend-section-heading-title-margin-bottom-tablet-portrait,
            var(
                --frontend-section-heading-title-margin-bottom,
                var(--frontend-heading-title-margin-bottom)
            )
        );
    }

    .frontend-composition-heading__subtitle {
        font-size: var(
            --frontend-section-heading-subtitle-font-size-tablet-portrait,
            var(
                --frontend-section-heading-subtitle-font-size,
                var(--frontend-heading-subtitle-font-size)
            )
        );
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    /* Slot Appearance: this interval falls directly back to base. */
    .frontend-composition-slot {
        margin-top: var(--frontend-composition-slot-margin-top-mobile-landscape, var(--frontend-composition-slot-margin-top, 0px));
        margin-right: var(--frontend-composition-slot-margin-right-mobile-landscape, var(--frontend-composition-slot-margin-right, 0px));
        margin-bottom: var(--frontend-composition-slot-margin-bottom-mobile-landscape, var(--frontend-composition-slot-margin-bottom, 0px));
        margin-left: var(--frontend-composition-slot-margin-left-mobile-landscape, var(--frontend-composition-slot-margin-left, 0px));
        padding-top: var(--frontend-composition-slot-padding-top-mobile-landscape, var(--frontend-composition-slot-padding-top, 0px));
        padding-right: var(--frontend-composition-slot-padding-right-mobile-landscape, var(--frontend-composition-slot-padding-right, 0px));
        padding-bottom: var(--frontend-composition-slot-padding-bottom-mobile-landscape, var(--frontend-composition-slot-padding-bottom, 0px));
        padding-left: var(--frontend-composition-slot-padding-left-mobile-landscape, var(--frontend-composition-slot-padding-left, 0px));
    }

    /* Section Appearance responsive: mobile_landscape; sparse overrides fall back to base. */
    .frontend-layout-surface > .frontend-composition-section-container {
        max-width: max(0px, calc(100% - var(--frontend-composition-section-margin-left-mobile-landscape, var(--frontend-composition-section-margin-left, 0px)) - var(--frontend-composition-section-margin-right-mobile-landscape, var(--frontend-composition-section-margin-right, 0px))));
        margin-top: var(--frontend-composition-section-margin-top-mobile-landscape, var(--frontend-composition-section-margin-top, 0px));
        margin-right: var(--frontend-composition-section-margin-right-mobile-landscape, var(--frontend-composition-section-margin-right, auto));
        margin-bottom: var(--frontend-composition-section-margin-bottom-mobile-landscape, var(--frontend-composition-section-margin-bottom, 0px));
        margin-left: var(--frontend-composition-section-margin-left-mobile-landscape, var(--frontend-composition-section-margin-left, auto));
        padding-top: var(--frontend-composition-section-padding-top-mobile-landscape, var(--frontend-composition-section-padding-top, 0px));
        padding-right: var(--frontend-composition-section-padding-right-mobile-landscape, var(--frontend-composition-section-padding-right, 0px));
        padding-bottom: var(--frontend-composition-section-padding-bottom-mobile-landscape, var(--frontend-composition-section-padding-bottom, 0px));
        padding-left: var(--frontend-composition-section-padding-left-mobile-landscape, var(--frontend-composition-section-padding-left, 0px));
    }

    .frontend-layout-surface > .frontend-composition-section:not(.frontend-composition-section--contained) {
        max-width: max(0px, calc(100% - var(--frontend-composition-section-margin-left-mobile-landscape, var(--frontend-composition-section-margin-left, 0px)) - var(--frontend-composition-section-margin-right-mobile-landscape, var(--frontend-composition-section-margin-right, 0px))));
        margin-top: var(--frontend-composition-section-margin-top-mobile-landscape, var(--frontend-composition-section-margin-top, 0px));
        margin-right: var(--frontend-composition-section-margin-right-mobile-landscape, var(--frontend-composition-section-margin-right, 0px));
        margin-bottom: var(--frontend-composition-section-margin-bottom-mobile-landscape, var(--frontend-composition-section-margin-bottom, 0px));
        margin-left: var(--frontend-composition-section-margin-left-mobile-landscape, var(--frontend-composition-section-margin-left, 0px));
        padding-top: var(--frontend-composition-section-padding-top-mobile-landscape, var(--frontend-composition-section-padding-top, 0px));
        padding-right: var(--frontend-composition-section-padding-right-mobile-landscape, var(--frontend-composition-section-padding-right, 0px));
        padding-bottom: var(--frontend-composition-section-padding-bottom-mobile-landscape, var(--frontend-composition-section-padding-bottom, 0px));
        padding-left: var(--frontend-composition-section-padding-left-mobile-landscape, var(--frontend-composition-section-padding-left, 0px));
    }

    .frontend-composition-section + .frontend-composition-section,
    .frontend-layout-surface > .container + .frontend-composition-section,
    .frontend-layout-surface > .frontend-composition-section + .container,
    .frontend-layout-surface > .container + .container {
        margin-top: var(
            --frontend-composition-section-margin-top-mobile-landscape,
            var(--frontend-composition-section-margin-top, var(--frontend-composition-section-gap))
        );
    }


    .frontend-composition-grid {
        column-gap: var(
            --frontend-composition-column-gap-mobile-landscape,
            var(--frontend-composition-column-gap)
        );
    }

    .frontend-composition-heading__title {
        font-size: var(
            --frontend-section-heading-title-font-size-mobile-landscape,
            var(
                --frontend-section-heading-title-font-size,
                var(--frontend-composition-heading-mobile-font-size, var(--frontend-heading-title-font-size))
            )
        );

        margin-top: var(
            --frontend-section-heading-title-margin-top-mobile-landscape,
            var(
                --frontend-section-heading-title-margin-top,
                var(--frontend-heading-title-margin-top)
            )
        );

        margin-bottom: var(
            --frontend-section-heading-title-margin-bottom-mobile-landscape,
            var(
                --frontend-section-heading-title-margin-bottom,
                var(--frontend-heading-title-margin-bottom)
            )
        );
    }

    .frontend-composition-heading__subtitle {
        font-size: var(
            --frontend-section-heading-subtitle-font-size-mobile-landscape,
            var(
                --frontend-section-heading-subtitle-font-size,
                var(--frontend-heading-subtitle-font-size)
            )
        );
    }
}

@media (max-width: 575px) {
    /* Slot Appearance: this interval falls directly back to base. */
    .frontend-composition-slot {
        margin-top: var(--frontend-composition-slot-margin-top-mobile-portrait, var(--frontend-composition-slot-margin-top, 0px));
        margin-right: var(--frontend-composition-slot-margin-right-mobile-portrait, var(--frontend-composition-slot-margin-right, 0px));
        margin-bottom: var(--frontend-composition-slot-margin-bottom-mobile-portrait, var(--frontend-composition-slot-margin-bottom, 0px));
        margin-left: var(--frontend-composition-slot-margin-left-mobile-portrait, var(--frontend-composition-slot-margin-left, 0px));
        padding-top: var(--frontend-composition-slot-padding-top-mobile-portrait, var(--frontend-composition-slot-padding-top, 0px));
        padding-right: var(--frontend-composition-slot-padding-right-mobile-portrait, var(--frontend-composition-slot-padding-right, 0px));
        padding-bottom: var(--frontend-composition-slot-padding-bottom-mobile-portrait, var(--frontend-composition-slot-padding-bottom, 0px));
        padding-left: var(--frontend-composition-slot-padding-left-mobile-portrait, var(--frontend-composition-slot-padding-left, 0px));
    }

    /* Section Appearance responsive: mobile_portrait; sparse overrides fall back to base. */
    .frontend-layout-surface > .frontend-composition-section-container {
        max-width: max(0px, calc(100% - var(--frontend-composition-section-margin-left-mobile-portrait, var(--frontend-composition-section-margin-left, 0px)) - var(--frontend-composition-section-margin-right-mobile-portrait, var(--frontend-composition-section-margin-right, 0px))));
        margin-top: var(--frontend-composition-section-margin-top-mobile-portrait, var(--frontend-composition-section-margin-top, 0px));
        margin-right: var(--frontend-composition-section-margin-right-mobile-portrait, var(--frontend-composition-section-margin-right, auto));
        margin-bottom: var(--frontend-composition-section-margin-bottom-mobile-portrait, var(--frontend-composition-section-margin-bottom, 0px));
        margin-left: var(--frontend-composition-section-margin-left-mobile-portrait, var(--frontend-composition-section-margin-left, auto));
        padding-top: var(--frontend-composition-section-padding-top-mobile-portrait, var(--frontend-composition-section-padding-top, 0px));
        padding-right: var(--frontend-composition-section-padding-right-mobile-portrait, var(--frontend-composition-section-padding-right, 0px));
        padding-bottom: var(--frontend-composition-section-padding-bottom-mobile-portrait, var(--frontend-composition-section-padding-bottom, 0px));
        padding-left: var(--frontend-composition-section-padding-left-mobile-portrait, var(--frontend-composition-section-padding-left, 0px));
    }

    .frontend-layout-surface > .frontend-composition-section:not(.frontend-composition-section--contained) {
        max-width: max(0px, calc(100% - var(--frontend-composition-section-margin-left-mobile-portrait, var(--frontend-composition-section-margin-left, 0px)) - var(--frontend-composition-section-margin-right-mobile-portrait, var(--frontend-composition-section-margin-right, 0px))));
        margin-top: var(--frontend-composition-section-margin-top-mobile-portrait, var(--frontend-composition-section-margin-top, 0px));
        margin-right: var(--frontend-composition-section-margin-right-mobile-portrait, var(--frontend-composition-section-margin-right, 0px));
        margin-bottom: var(--frontend-composition-section-margin-bottom-mobile-portrait, var(--frontend-composition-section-margin-bottom, 0px));
        margin-left: var(--frontend-composition-section-margin-left-mobile-portrait, var(--frontend-composition-section-margin-left, 0px));
        padding-top: var(--frontend-composition-section-padding-top-mobile-portrait, var(--frontend-composition-section-padding-top, 0px));
        padding-right: var(--frontend-composition-section-padding-right-mobile-portrait, var(--frontend-composition-section-padding-right, 0px));
        padding-bottom: var(--frontend-composition-section-padding-bottom-mobile-portrait, var(--frontend-composition-section-padding-bottom, 0px));
        padding-left: var(--frontend-composition-section-padding-left-mobile-portrait, var(--frontend-composition-section-padding-left, 0px));
    }

    .frontend-composition-section + .frontend-composition-section,
    .frontend-layout-surface > .container + .frontend-composition-section,
    .frontend-layout-surface > .frontend-composition-section + .container,
    .frontend-layout-surface > .container + .container {
        margin-top: var(
            --frontend-composition-section-margin-top-mobile-portrait,
            var(--frontend-composition-section-margin-top, var(--frontend-composition-section-gap))
        );
    }


    .frontend-composition-grid {
        column-gap: var(
            --frontend-composition-column-gap-mobile-portrait,
            var(--frontend-composition-column-gap)
        );
    }

    .frontend-composition-heading__title {
        font-size: var(
            --frontend-section-heading-title-font-size-mobile-portrait,
            var(
                --frontend-section-heading-title-font-size,
                var(--frontend-composition-heading-mobile-font-size, var(--frontend-heading-title-font-size))
            )
        );

        margin-top: var(
            --frontend-section-heading-title-margin-top-mobile-portrait,
            var(
                --frontend-section-heading-title-margin-top,
                var(--frontend-heading-title-margin-top)
            )
        );

        margin-bottom: var(
            --frontend-section-heading-title-margin-bottom-mobile-portrait,
            var(
                --frontend-section-heading-title-margin-bottom,
                var(--frontend-heading-title-margin-bottom)
            )
        );
    }

    .frontend-composition-heading__subtitle {
        font-size: var(
            --frontend-section-heading-subtitle-font-size-mobile-portrait,
            var(
                --frontend-section-heading-subtitle-font-size,
                var(--frontend-heading-subtitle-font-size)
            )
        );
    }
}

/*
 * Existing mobile structural behaviour:
 * slots stack full-width at <= 767px.
 */
@media (max-width: 767px) {
    .frontend-composition-slot {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   ZF3.6 — Shared standard-page spacing below the global Visual Menu
   Applies only when content_top actually contains a Visual Menu and the next
   sibling is a non-Composition content root. Composition section appearance,
   Hero and the content_top band retain their own spacing contracts.
   ========================================================================== */
.frontend-layout-surface
    > .frontend-position-visibility[data-frontend-position-visibility="content_top"]:has(.visual-menu)
    + :is(main, section, article):not(.frontend-composition-section) {
    margin-top: 40px;
}