/* ActiveSheets governed Section Type foundations. */

.as-section--card,
.as-section--list {
    box-sizing: border-box;
}

.as-section__inner {
    width: min(100%, var(--as-wide-width));
    margin-inline: auto;
    padding-inline: var(--as-page-gutter);
}

.as-section__inner.as-container--narrow {
    width: min(100%, var(--as-content-width));
}

.as-section__inner.as-container--standard,
.as-section__inner.as-container--content {
    width: min(100%, var(--as-content-width));
}

.as-section__inner.as-container--wide {
    width: min(100%, var(--as-wide-width));
}

.as-section__inner.as-container--full {
    width: 100%;
}

.as-section__header {
    max-width: 48rem;
    margin-block-end: var(--as-space-xl);
}

.as-section__header > :first-child,
.as-section__item > :first-child,
.as-card > :first-child,
.as-list-item > :first-child {
    margin-block-start: 0;
}

.as-section__header > :last-child,
.as-section__item > :last-child,
.as-card > :last-child,
.as-list-item > :last-child {
    margin-block-end: 0;
}

.as-section--surface-default {
    background: var(--as-color-background);
    color: var(--as-color-text);
}

.as-section--surface-subtle {
    background: var(--as-color-surface-alt);
    color: var(--as-color-text);
}

.as-section--surface-accent {
    background: var(--as-color-primary);
    color: var(--as-color-background);
}

.as-section--surface-accent :where(a, .as-section__eyebrow) {
    color: inherit;
}

.as-section--card .as-section__collection,
.as-section--list .as-section__collection {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(var(--as-section-columns, 3), minmax(0, 1fr));
    gap: var(--as-section-gap, var(--as-space-lg));
}

.as-section--columns-1,
.as-card-grid--1,
.as-list-grid--1 {
    --as-section-columns: 1;
}

.as-section--columns-2,
.as-card-grid--2,
.as-list-grid--2 {
    --as-section-columns: 2;
}

.as-section--columns-3,
.as-card-grid--3 {
    --as-section-columns: 3;
}

.as-section--columns-4,
.as-card-grid--4 {
    --as-section-columns: 4;
}

.as-section--gap-compact,
.as-card-grid--gap-compact,
.as-list-grid--gap-compact {
    --as-section-gap: clamp(var(--as-space-sm), 1.5vw, var(--as-space-md));
}

.as-section--gap-normal,
.as-card-grid--gap-normal,
.as-list-grid--gap-normal {
    --as-section-gap: clamp(var(--as-space-md), 2vw, var(--as-space-lg));
}

.as-section--gap-spacious,
.as-card-grid--gap-spacious,
.as-list-grid--gap-spacious {
    --as-section-gap: clamp(var(--as-space-lg), 3vw, var(--as-space-xl));
}

.as-section--align-left,
.as-card-grid--align-left,
.as-list-grid--align-left {
    text-align: left;
}

.as-section--align-center,
.as-card-grid--align-center,
.as-list-grid--align-center {
    text-align: center;
}

.as-section--card :where(.as-section__item, .as-card) {
    box-sizing: border-box;
    display: grid;
    align-content: start;
    gap: var(--as-space-sm);
    min-width: 0;
    min-inline-size: min(100%, var(--as-card-min-width, 17.5rem));
    padding: var(--as-space-lg);
    border: var(--as-border-width) solid var(--as-color-border);
    border-radius: var(--as-radius-md);
    background: var(--as-color-surface);
    box-shadow: none;
    overflow-wrap: anywhere;
}

.as-card--complexity-compact {
    --as-card-min-width: 15rem;
}

.as-card--complexity-standard {
    --as-card-min-width: 17.5rem;
}

.as-card--complexity-rich,
.as-card--interaction-interactive {
    --as-card-min-width: 20rem;
}

.as-card--appearance-default {
    border-color: var(--as-color-border);
    border-radius: var(--as-radius-md);
    box-shadow: none;
}

.as-card--appearance-open {
    padding-inline: 0;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.as-card--appearance-outlined {
    border-color: var(--as-color-border);
    box-shadow: none;
}

.as-card--appearance-elevated {
    border-color: transparent;
    box-shadow: var(--as-shadow-md);
}

.as-card--surface-transparent {
    background: transparent;
}

.as-card--surface-neutral {
    background: var(--as-color-surface);
}

.as-card--surface-subtle {
    background: var(--as-color-surface-alt);
}

.as-card--surface-accent {
    border-color: transparent;
    background: var(--as-color-primary);
    color: var(--as-color-background);
}

.as-card--surface-inverse {
    border-color: transparent;
    background: var(--as-color-text);
    color: var(--as-color-background);
}

.as-card--featured {
    border-color: var(--as-color-primary);
}

.as-section--card :where(.as-section__marker, .as-card__marker),
.as-section--list :where(.as-section__marker, .as-list-item__marker) {
    width: fit-content;
    margin: 0;
    color: var(--as-color-primary);
    font-size: var(--as-font-size-sm);
    font-weight: var(--as-font-weight-bold);
    line-height: var(--as-line-height-tight);
}

.as-section--card :where(.as-section__item--interactive, .as-card--interaction-interactive) {
    transition: border-color var(--as-transition), box-shadow var(--as-transition), transform var(--as-transition);
}

.as-section--card :where(.as-section__item--interactive, .as-card--interaction-interactive):hover,
.as-section--card :where(.as-section__item--interactive, .as-card--interaction-interactive):focus-within {
    border-color: color-mix(in srgb, var(--as-color-primary) 35%, var(--as-color-border));
    box-shadow: var(--as-shadow-md);
    transform: translateY(-2px);
}

.as-section--card :where(.as-section__item--interactive, .as-card--interaction-interactive) :where(a, button) {
    min-block-size: 2.75rem;
}

.as-section--list .as-section__collection {
    --as-section-columns: 1;
}

.as-section--list.as-section--columns-2 .as-section__collection,
.as-section--list .as-list-grid--2 {
    --as-section-columns: 2;
}

.as-section--list :where(.as-section__item, .as-list-item) {
    box-sizing: border-box;
    display: grid;
    align-content: start;
    gap: var(--as-space-xs);
    min-width: 0;
    min-inline-size: min(100%, var(--as-list-item-min-width, 20rem));
    padding-block: var(--as-space-sm);
    overflow-wrap: anywhere;
}

.as-list-item--compact {
    --as-list-item-min-width: 16.25rem;
}

.as-list-item--standard {
    --as-list-item-min-width: 20rem;
}

.as-list-item--rich {
    --as-list-item-min-width: 22.5rem;
}

.as-section--list.as-section--divided .as-section__item,
.as-section--list .as-list-grid--divided .as-list-item {
    border-bottom: var(--as-border-width) solid var(--as-color-border);
}

.as-section--list.as-section--divided .as-section__item:last-child,
.as-section--list .as-list-grid--divided .as-list-item:last-child {
    border-bottom: 0;
}

@media (max-width: 76rem) {
    .as-section--columns-4,
    .as-card-grid--4 {
        --as-section-columns: 2;
    }
}

@media (max-width: 64rem) {
    .as-section--columns-3,
    .as-card-grid--3 {
        --as-section-columns: 2;
    }
}

@media (max-width: 48.875rem) {
    .as-section--card .as-section__collection,
    .as-section--list .as-section__collection {
        --as-section-columns: 1;
    }

    .as-section__header {
        margin-block-end: var(--as-space-lg);
    }

    .as-section--card :where(.as-section__item, .as-card) {
        min-inline-size: 0;
        padding: var(--as-space-md);
    }

    .as-section--list :where(.as-section__item, .as-list-item) {
        min-inline-size: 0;
    }

    .as-section--list.as-section--divided .as-section__item,
    .as-section--list .as-list-grid--divided .as-list-item {
        border-bottom: var(--as-border-width) solid var(--as-color-border);
    }
}

@media (max-width: 30rem) {
    .as-section__inner {
        padding-inline: max(var(--as-space-sm), var(--as-page-gutter));
    }

    .as-section--card :where(.as-section__item--interactive, .as-card--interaction-interactive) :where(a, button),
    .as-section--list :where(a, button) {
        min-block-size: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .as-section--card :where(.as-section__item--interactive, .as-card--interaction-interactive) {
        transition: none;
    }

    .as-section--card :where(.as-section__item--interactive, .as-card--interaction-interactive):hover,
    .as-section--card :where(.as-section__item--interactive, .as-card--interaction-interactive):focus-within {
        transform: none;
    }
}