/**
 * Yusaso Platform — public page layout geometry.
 *
 * This file owns column grids, rail positioning, layout gaps, and responsive
 * stacking. Widgets own only the content placed inside these regions.
 */

main.content {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: calc(100vh - 15rem);
    align-content: start;
    padding: 0 15px;
}

/* Every normal page uses one explicit content surface. Physical layout
   templates own this wrapper; pages and feature styles must not recreate it. */
.page_content_wrapper {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: calc(100vh - 18rem);
    overflow: visible;
}

/* Public introductions live inside the content column so messages, headings,
   descriptions and top actions participate in the same responsive flow. */
.public_page_intro {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-top: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.public_page_intro_column {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.public_page_intro > .public_page_intro_column {
    grid-column: 1;
}

/* RETIRED 2026-08-29: page introductions formerly recreated the outer
   two- and three-column tracks above the physical layout. */

.public_three_column_layout {
    position: relative;
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr) 20rem;
    align-items: start;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    transform: none;
    column-gap: 1.875rem;
    row-gap: 1.875rem;
}

/* Decorative Theme frames belong to the layout surface, not a grid track.
   Keep the shared frame out of flow even when a Theme provides no frame art. */
.public_three_column_layout > .theme_surface_frame {
    position: absolute;
    inset: 0;
}

.public_three_column_layout > * {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
}

/* Desktop spacing below the shared navigation belongs to the page surface,
   not to an optional center-column introduction. This gives every physical
   layout the same starting line before any page content is loaded. */
@media (min-width: 87.501rem) {
    .page_content_wrapper {
        padding-block-start: 1rem;
    }

    .page_content_wrapper .public_page_intro {
        padding-block-start: 0;
    }
}

.public_single_column_layout {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.public_single_column_layout > .theme_surface_frame {
    position: absolute;
    inset: 0;
}

.public_single_column_center {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.public_three_column_layout.public_two_column_layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
}

.public_three_column_layout.public_two_column_layout > .public_two_column_main {
    grid-column: 1;
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.public_two_column_leading_widgets {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.public_responsive_widget_controls {
    display: none;
}

.public_three_column_layout.public_two_column_layout > .public_three_column_right {
    grid-column: 2;
}

.public_three_column_left {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.public_three_column_layout > .public_three_column_center,
.public_three_column_center {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.public_three_column_right {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
}

.public_three_column_left,
.public_three_column_right {
    display: grid;
    align-self: start;
    margin-block-start: 0;
    padding-block-start: 0;
    gap: 1rem;
}

/* Advertisement placement is stable regardless of which database-generated
   menus or page widgets are also assigned to a rail. */
.public_three_column_left > .widget_advertisement_placement,
.public_three_column_right > .widget_advertisement_placement {
    order: -10000;
    margin-block-start: 0;
}

/* Frozen communication workspaces reuse the standard three-column widths and
   Widget presentation while containing all scrolling inside their regions. */
.public_frozen_three_column_layout {
    height: var(--public-frozen-workspace-height, calc(100dvh - 12rem));
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

.public_frozen_three_column_layout > .public_three_column_left,
.public_frozen_three_column_layout > .public_three_column_right {
    display: flex;
    height: 100%;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    align-self: stretch;
    overflow: hidden;
}

.public_frozen_three_column_layout > .public_three_column_center {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.public_frozen_three_column_layout > :is(.public_three_column_left,.public_three_column_right) > .public_widget {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.public_frozen_three_column_layout > :is(.public_three_column_left,.public_three_column_right) > details.public_widget:not([open]) {
    flex: 0 0 auto;
}

.public_frozen_three_column_layout > :is(.public_three_column_left,.public_three_column_right) > .public_widget > .public_widget_content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (min-width: 50.0625rem) {
    .public_three_column_left,
    .public_three_column_right {
        position: sticky;
        display: flex;
        top: calc(var(--sticky-site-header-height, 0px) + 1rem);
        height: calc(100dvh - var(--sticky-site-header-height, 0px) - 2rem);
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - 2rem);
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
        overscroll-behavior: contain;
        scrollbar-gutter: auto;
    }

    .public_three_column_layout .public_responsive_widget_region {
        display: flex;
        height: 100%;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }

    .public_three_column_layout .public_responsive_widget_region > .public_widget,
    .public_three_column_layout > .public_three_column_right > .public_widget {
        display: flex;
        min-height: 0;
        height: var(--public-widget-preferred-height, auto);
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - 2rem);
        flex: 0 1 auto;
        flex-direction: column;
        overflow: hidden;
    }

    /* RETIRED 2026-08-30: growing every open Widget to fill the rail spread
       Widget headers apart and still clipped long content on short screens.
    .public_three_column_layout .public_responsive_widget_region > details.public_widget[open],
    .public_three_column_layout > .public_three_column_right > details.public_widget[open] {
        flex: 1 1 0;
    }
    */

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget:not([open]),
    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right > details.public_widget:not([open]) {
        flex: 0 0 auto;
    }

    .public_three_column_layout .public_responsive_widget_region > .public_widget > .public_widget_content,
    .public_three_column_layout > .public_three_column_right > .public_widget > .public_widget_content {
        flex: 1 1 auto;
        min-height: 0;
        max-height: var(--public-widget-content-max-height, none);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_widget_content.is_widget_content_overflowing {
        overflow-y: scroll;
        scrollbar-width: thin;
    }
}

/* Tablet assignments use the same linear regions as mobile while retaining
   an independent database order. */
@media (min-width: 50.001rem) and (max-width: 87.5rem) {
    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_responsive_widget_controls {
        position: fixed;
        z-index: 875;
        top: var(--sticky-site-header-height, 0px);
        left: max(.25rem, env(safe-area-inset-left));
        display: flex;
        grid-column: 1;
        grid-row: 1;
        width: fit-content;
        min-width: 0;
        justify-content: flex-start;
    }

    .public_page_intro,
    .public_page_intro_three_column,
    .public_page_intro_two_column,
    .public_three_column_layout,
    .public_three_column_layout.public_two_column_layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .public_page_intro > .public_page_intro_column,
    .public_three_column_layout > .public_three_column_center,
    .public_three_column_layout.public_two_column_layout > .public_two_column_main {
        grid-column: 1;
        grid-row: 2;
    }

    .public_three_column_layout.public_layout_without_left_widgets > .public_three_column_center,
    .public_three_column_layout.public_layout_without_left_widgets > .public_two_column_main {
        grid-row: 1;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left {
        position: sticky;
        z-index: 850;
        top: var(--sticky-site-header-height, 0px);
        grid-column: 1;
        grid-row: 1;
        height: auto;
        width: 100%;
        max-width: none;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region {
        display: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: none;
        gap: .25rem;
        overflow: visible;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open .public_responsive_widget_region {
        display: grid;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_center {
        grid-row: 3;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right {
        display: contents;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget {
        position: relative;
        z-index: 1;
        display: block;
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
        height: auto;
        min-height: 2.25rem;
        max-height: none;
        flex: none;
        order: var(--widget-tablet-order, 1000);
        overflow: visible;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget[open] {
        z-index: 2;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget > .public_widget_header {
        box-sizing: border-box;
        height: auto;
        min-height: 2.25rem;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget > .public_widget_content {
        position: absolute;
        z-index: 860;
        top: calc(100% + .25rem);
        left: 0;
        box-sizing: border-box;
        width: calc(300% + .5rem);
        height: auto;
        min-height: 0;
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - 4rem);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget:nth-of-type(3n + 2) > .public_widget_content {
        left: calc(-100% - .25rem);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget:nth-of-type(3n) > .public_widget_content {
        left: calc(-200% - .5rem);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right > * {
        grid-column: 1;
        min-width: 0;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) [data-widget-tablet-region="before_content"] {
        grid-row: 1;
        order: var(--widget-tablet-order, 1000);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right > *,
    .public_three_column_layout:not(.public_frozen_three_column_layout) [data-widget-tablet-region="after_content"] {
        grid-row: 3;
        order: var(--widget-tablet-order, 1000);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) :is(
        [data-widget-tablet-region="overlay"],
        .widget_advertisement_placement
    ) {
        position: fixed;
        z-index: 900;
        box-sizing: border-box;
        right: auto;
        bottom: 0;
        left: 50%;
        width: min(320px, 100vw);
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        margin: 0;
        overflow: hidden;
        transform: translateX(-50%);
        order: var(--widget-tablet-order, 1000);
    }
}

@media (max-width: 50rem) {
    .public_page_intro,
    .public_page_intro_three_column,
    .public_page_intro_two_column {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .public_page_intro > .public_page_intro_column {
        grid-column: 1;
    }

    .public_three_column_layout,
    .public_three_column_layout.public_two_column_layout {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        transform: none;
        column-gap: 0;
        row-gap: 1rem;
    }

    .public_three_column_layout > *,
    .public_three_column_left,
    .public_three_column_center,
    .public_three_column_right,
    .public_three_column_layout.public_two_column_layout > .public_two_column_main,
    .public_three_column_layout.public_two_column_layout > .public_three_column_right {
        grid-column: 1;
        position: static;
        max-height: none;
        overflow: visible;
    }

    .public_frozen_three_column_layout {
        height: auto;
        overflow: visible;
    }

    .public_frozen_three_column_layout > .public_three_column_left,
    .public_frozen_three_column_layout > .public_three_column_center,
    .public_frozen_three_column_layout > .public_three_column_right {
        height: auto;
        overflow: visible;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_responsive_widget_controls {
        position: fixed;
        z-index: 875;
        top: var(--sticky-site-header-height, 0px);
        left: max(.25rem, env(safe-area-inset-left));
        display: flex;
        grid-area: auto !important;
        grid-column: 1;
        grid-row: 1;
        width: fit-content;
        min-width: 0;
        gap: .35rem;
        justify-content: flex-start;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left {
        z-index: 850;
        grid-area: auto !important;
        grid-row: 1;
        width: 100%;
        max-width: none;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region {
        display: none;
        grid-template-columns: minmax(0, 1fr);
        max-height: none;
        gap: .25rem;
        overflow: visible;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region_shell {
        display: none;
        grid-area: auto !important;
        grid-column: 1;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open .public_responsive_widget_region {
        display: grid;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open .public_responsive_widget_region_shell {
        display: block;
        grid-row: 2;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left {
        grid-row: 2;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_center {
        grid-area: auto !important;
        grid-row: 2;
    }

    .public_three_column_layout.public_layout_without_left_widgets > .public_three_column_center,
    .public_three_column_layout.public_layout_without_left_widgets > .public_two_column_main {
        grid-row: 1;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout):not(.public_two_column_layout).has_mobile_widget_menu_open > .public_three_column_center {
        grid-row: 3;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right {
        display: contents;
        grid-row: 3;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget,
    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right > * {
        grid-column: 1;
        min-width: 0;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget {
        position: relative;
        z-index: 1;
        display: block;
        grid-row: auto;
        width: 100%;
        height: auto;
        min-height: 2.25rem;
        max-height: none;
        flex: none;
        order: var(--widget-mobile-order, 1000);
        overflow: visible;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget[open] {
        z-index: 2;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget > .public_widget_content {
        position: static;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - 4rem);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) [data-widget-mobile-region="before_content"] {
        grid-row: 1;
        order: var(--widget-mobile-order, 1000);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right > *,
    .public_three_column_layout:not(.public_frozen_three_column_layout) [data-widget-mobile-region="after_content"] {
        grid-row: 3;
        order: var(--widget-mobile-order, 1000);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) :is(
        [data-widget-mobile-region="overlay"],
        .widget_advertisement_placement
    ) {
        position: fixed;
        z-index: 900;
        box-sizing: border-box;
        right: auto;
        bottom: 0;
        left: 50%;
        width: min(320px, 100vw);
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        margin: 0;
        overflow: hidden;
        transform: translateX(-50%);
        order: var(--widget-mobile-order, 1000);
    }

    /* RETIRED 2026-08-29: duplicate mobile overlay geometry was merged into
       the canonical overlay rule immediately above. */

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left > :is(a.button, button) {
        flex: 0 1 auto;
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 87.5rem) {
    .public_three_column_layout:not(.public_frozen_three_column_layout) {
        --responsive-widget-menu-tab-height: 1.5rem;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_responsive_widget_controls {
        z-index: 902;
    }

    .public_responsive_widget_controls .public_responsive_widget_menu_button {
        display: inline-flex !important;
        box-sizing: border-box;
        width: auto !important;
        min-width: 3.25rem !important;
        height: var(--responsive-widget-menu-tab-height) !important;
        min-height: var(--responsive-widget-menu-tab-height) !important;
        margin: 0 !important;
        padding: .1rem .5rem !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: var(--font-sm) !important;
        line-height: 1 !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left.public_responsive_widget_region {
        position: fixed !important;
        z-index: 901 !important;
        top: calc(var(--sticky-site-header-height, 0px) + var(--responsive-widget-menu-tab-height)) !important;
        right: .25rem !important;
        left: .25rem !important;
        display: grid !important;
        box-sizing: border-box !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - var(--responsive-widget-menu-tab-height) - .25rem) !important;
        margin: 0 !important;
        padding: .5rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: var(--primary-font-color) !important;
        background: var(--primary-color) !important;
        border: 1px solid var(--primary-accent-color) !important;
        border-radius: 0 var(--page-field-radius) var(--page-field-radius) var(--page-field-radius) !important;
        box-shadow: var(--box-shadow) !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_center {
        grid-row: 2 !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left.public_responsive_widget_region > details.public_widget > .public_widget_content {
        position: static !important;
        inset: auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left.public_responsive_widget_region_shell {
        position: fixed !important;
        z-index: 901 !important;
        top: calc(var(--sticky-site-header-height, 0px) + var(--responsive-widget-menu-tab-height)) !important;
        right: .25rem !important;
        left: .25rem !important;
        display: block !important;
        box-sizing: border-box !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - var(--responsive-widget-menu-tab-height) - .25rem) !important;
        margin: 0 !important;
        padding: .5rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: var(--primary-font-color) !important;
        background: var(--primary-color) !important;
        border: 1px solid var(--primary-accent-color) !important;
        border-radius: 0 var(--page-field-radius) var(--page-field-radius) var(--page-field-radius) !important;
        box-shadow: var(--box-shadow) !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left.public_responsive_widget_region_shell > .public_responsive_widget_region,
    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left.public_responsive_widget_region_shell details.public_widget > .public_widget_content {
        position: static !important;
        inset: auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* RETIRED 2026-09-02: MENU tab presentation now belongs to the shared Theme
   contract in new_base_aesthetics.css. layouts.css retains geometry only.
@media (max-width: 87.5rem) {
    html body .public_responsive_widget_controls > button.public_responsive_widget_menu_button {
        color: var(--primary-font-color) !important;
        -webkit-text-fill-color: var(--primary-font-color) !important;
        background: var(--primary-color) !important;
        background-color: var(--primary-color) !important;
        background-image: none !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: var(--page-field-radius) !important;
        border-bottom-right-radius: var(--page-field-radius) !important;
    }
}
*/

@media (max-width: 480px) {
    html body .public_responsive_widget_controls > button.public_responsive_widget_menu_button {
        font-size: var(--font-xs) !important;
        line-height: 1 !important;
    }
}