/* MatchTide UI Foundation Stage 3: shared section primitives.
   Opt-in classes only. */

.mt-ui-section {
    margin-top: var(--mt-ui-section-gap);
}

.mt-ui-section--compact {
    margin-top: clamp(32px, 4vw, 56px);
}

.mt-ui-section--major {
    margin-top: clamp(72px, 7vw, 112px);
}

.mt-ui-section__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--mt-ui-space-lg);
    margin-bottom: var(--mt-ui-space-lg);
}

.mt-ui-section__heading {
    display: grid;
    gap: var(--mt-ui-space-xs);
}

.mt-ui-section__title {
    margin: 0;
    color: var(--mt-ui-color-text);
    font-weight: var(--mt-ui-font-weight-black);
}

.mt-ui-section__description {
    max-width: var(--mt-ui-readable-max);
    margin: 0;
    color: var(--mt-ui-color-text-secondary);
    font-size: var(--mt-ui-font-size-body);
    font-weight: var(--mt-ui-font-weight-medium);
    line-height: var(--mt-ui-line-height-body);
}

.mt-ui-section__action {
    flex: 0 0 auto;
}

.mt-ui-section__body {
    min-width: 0;
}