/* ASE v1.4.14 responsive layout-integrity and card-grid system. */
.ase-site .ase-grid {
    display: grid !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0;
    grid-auto-rows: auto;
    gap: clamp(1rem, 2.3vw, 1.75rem);
    align-items: stretch;
    justify-items: stretch;
    margin-inline: 0 !important;
}

.ase-site .ase-grid > * {
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0;
    height: auto;
    margin: 0;
}

/* minmax(0,1fr) is deliberate. Theme/Gutenberg grid minimums must never force
 * an ASE card narrower than its column or push a column outside the container. */
.ase-site .ase-grid--3,
.ase-site .ase-topic-grid,
.ase-site .ase-featured-grid,
.ase-site .wp-block-post-template.is-layout-grid.ase-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.ase-site .ase-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Shared card-grid contract. Cards size from their content instead of keeping
 * artificial track height. A single recommendation gets a readable content
 * measure rather than occupying a narrow one-third desktop column. */
.ase-site .ase-card-grid {
    min-width: 0 !important;
    align-items: start !important;
}

.ase-site .ase-card-grid > * {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

.ase-site .ase-card-grid.ase-grid--items-1 {
    grid-template-columns: minmax(0, 1fr) !important;
    inline-size: min(100%, 760px) !important;
    width: min(100%, 760px) !important;
    max-inline-size: 760px !important;
    max-width: 760px !important;
}

.ase-site .ase-card-grid.ase-grid--items-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ase-site .ase-card-grid.ase-grid--items-3,
.ase-site .ase-card-grid.ase-grid--items-4,
.ase-site .ase-card-grid.ase-grid--items-5,
.ase-site .ase-card-grid.ase-grid--items-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.ase-site .ase-grid--hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr) !important;
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: center;
}

.ase-site .ase-grid--resource {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.ase-site .ase-grid--resource-single {
    grid-template-columns: minmax(0, 1fr) !important;
}

.ase-site .ase-grid--purpose-media {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr) !important;
    gap: clamp(2.25rem, 5vw, 5rem);
    align-items: center;
}

.ase-site .ase-grid--inner-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr) !important;
    gap: clamp(2rem, 5vw, 4.75rem);
    align-items: center;
}

.ase-site .ase-lead-capture__card {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.ase-site .ase-cta {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

@media (max-width: 960px) {
    .ase-site .ase-grid--3,
    .ase-site .ase-topic-grid,
    .ase-site .ase-featured-grid,
    .ase-site .wp-block-post-template.is-layout-grid.ase-post-grid,
    .ase-site .ase-card-grid.ase-grid--items-3,
    .ase-site .ase-card-grid.ase-grid--items-4,
    .ase-site .ase-card-grid.ase-grid--items-5,
    .ase-site .ase-card-grid.ase-grid--items-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ase-site .ase-card-grid.ase-grid--items-1 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ase-site .ase-grid--hero,
    .ase-site .ase-grid--resource,
    .ase-site .ase-grid--purpose-media,
    .ase-site .ase-grid--inner-hero {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ase-site .ase-hero__title {
        max-width: 18ch;
    }

    .ase-site .ase-hero__media,
    .ase-site .ase-resource__visual,
    .ase-site .ase-purpose__media {
        inline-size: 100% !important;
        width: 100% !important;
        max-width: 720px;
    }
}

@media (max-width: 680px) {
    .ase-site {
        --ase-gutter: 1.1rem;
        --ase-section-pad: 3.75rem;
    }

    /* This deliberately outranks WordPress block-layout column rules and
     * theme grid utilities. At phone width no ASE content grid may stay at two
     * or three columns. */
    .ase-site .ase-grid--3,
    .ase-site .ase-grid--2,
    .ase-site .ase-topic-grid,
    .ase-site .ase-featured-grid,
    .ase-site .ase-card-grid,
    .ase-site .ase-card-grid.ase-grid--items-1,
    .ase-site .ase-card-grid.ase-grid--items-2,
    .ase-site .ase-card-grid.ase-grid--items-3,
    .ase-site .ase-card-grid.ase-grid--items-4,
    .ase-site .ase-card-grid.ase-grid--items-5,
    .ase-site .ase-card-grid.ase-grid--items-6,
    .ase-site .wp-block-post-template.is-layout-grid.ase-post-grid,
    .ase-site .ase-grid--hero,
    .ase-site .ase-grid--resource,
    .ase-site .ase-grid--resource-single,
    .ase-site .ase-grid--purpose-media,
    .ase-site .ase-grid--inner-hero,
    .ase-site .ase-cta,
    .ase-site .ase-lead-capture__card {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ase-site .ase-card-grid.ase-grid--items-1 {
        inline-size: 100% !important;
        width: 100% !important;
        max-inline-size: none !important;
        max-width: none !important;
    }

    .ase-site .ase-hero__title {
        max-width: none;
        font-size: clamp(2.35rem, 11vw, 4rem) !important;
        line-height: 1.04 !important;
    }

    .ase-site .ase-section--accent .ase-buttons {
        justify-self: start;
    }

    .ase-site .ase-resource {
        padding: 1.45rem;
    }

    .ase-site .ase-resource__visual {
        min-height: 0;
    }
}

/* ASE v1.4.15 Layout Alignment Integrity hotfix.
 *
 * This is intentionally a NARROW final-pass override. It does not resize the
 * ASE page shell or .ase-container. It only prevents WordPress/theme flow and
 * constrained-layout rules from shrinking structural grids/cards inside the
 * already-centered ASE container. */

/* A normal section heading stays left-aligned inside the centered container.
 * Explicit centered headings keep their intentional presentation. */
body.ase-managed-page .ase-site .ase-section > .ase-container > .ase-section-heading:not(.ase-section-heading--center),
.editor-styles-wrapper .ase-site .ase-section > .ase-container > .ase-section-heading:not(.ase-section-heading--center) {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Gutenberg constrained/flow layouts may assign a theme content-size to direct
 * Group children. Structural ASE grids/resources must instead use the full
 * width of the existing ASE container. The container itself is untouched. */
body.ase-managed-page .ase-site .ase-section > .ase-container > :where(.ase-grid, .ase-resource, .ase-cta, .ase-lead-capture__card),
.editor-styles-wrapper .ase-site .ase-section > .ase-container > :where(.ase-grid, .ase-resource, .ase-cta, .ase-lead-capture__card) {
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: none !important;
    max-width: none !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Card grids respond to THEIR available width, not merely the browser
 * viewport. A 20rem floor yields the intended 3 -> 2 -> 1 behavior within the
 * <=1240px ASE content frame without changing any page/section wrapper. */
body.ase-managed-page .ase-site .ase-section > .ase-container > .ase-card-grid:not(.ase-grid--items-1),
.editor-styles-wrapper .ase-site .ase-section > .ase-container > .ase-card-grid:not(.ase-grid--items-1) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    gap: clamp(1rem, 2.3vw, 1.75rem) !important;
}

/* Themes and prior persisted ASE CSS must not pin cards to a specific column,
 * float them, or give them a theme content-size. */
body.ase-managed-page .ase-site .ase-section > .ase-container > .ase-card-grid > *,
.editor-styles-wrapper .ase-site .ase-section > .ase-container > .ase-card-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: none !important;
    max-width: none !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
    align-self: stretch !important;
}

/* A genuine one-card section is narrower for readability, but centered in the
 * main content frame instead of being stranded at inline-start. */
body.ase-managed-page .ase-site .ase-section > .ase-container > .ase-card-grid.ase-grid--items-1,
.editor-styles-wrapper .ase-site .ase-section > .ase-container > .ase-card-grid.ase-grid--items-1 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    inline-size: min(100%, var(--ase-narrow-width)) !important;
    width: min(100%, var(--ase-narrow-width)) !important;
    max-inline-size: var(--ase-narrow-width) !important;
    max-width: var(--ase-narrow-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Featured Resource must always contribute its natural height. Using an
 * auto-fit two-pane grid lets it become one pane when its actual content lane
 * is too narrow, even inside a wide browser or builder preview. */
body.ase-managed-page .ase-site .ase-featured-resource .ase-resource,
body.ase-managed-page .ase-site .ase-featured-resource .ase-grid--resource,
body.ase-managed-page .ase-site .ase-featured-resource .ase-resource__content,
body.ase-managed-page .ase-site .ase-featured-resource .ase-resource__visual,
.editor-styles-wrapper .ase-site .ase-featured-resource .ase-resource,
.editor-styles-wrapper .ase-site .ase-featured-resource .ase-grid--resource,
.editor-styles-wrapper .ase-site .ase-featured-resource .ase-resource__content,
.editor-styles-wrapper .ase-site .ase-featured-resource .ase-resource__visual {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    float: none !important;
}

body.ase-managed-page .ase-site .ase-featured-resource .ase-grid--resource,
.editor-styles-wrapper .ase-site .ase-featured-resource .ase-grid--resource {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
}

body.ase-managed-page .ase-site .ase-featured-resource .ase-grid--resource > *,
.editor-styles-wrapper .ase-site .ase-featured-resource .ase-grid--resource > * {
    grid-column: auto !important;
    grid-row: auto !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: none !important;
    max-width: none !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* Hard phone fallback for older engines that do not support min() in a grid
 * track definition. */
@media (max-width: 680px) {
    body.ase-managed-page .ase-site .ase-section > .ase-container > .ase-card-grid,
    body.ase-managed-page .ase-site .ase-featured-resource .ase-grid--resource,
    .editor-styles-wrapper .ase-site .ase-section > .ase-container > .ase-card-grid,
    .editor-styles-wrapper .ase-site .ase-featured-resource .ase-grid--resource {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.ase-managed-page .ase-site .ase-section > .ase-container > .ase-card-grid.ase-grid--items-1,
    .editor-styles-wrapper .ase-site .ase-section > .ase-container > .ase-card-grid.ase-grid--items-1 {
        inline-size: 100% !important;
        width: 100% !important;
        max-inline-size: none !important;
        max-width: none !important;
    }
}