// ==========================================================================
// List Page Layout Styles
// Generic list page template with child page cards
// ==========================================================================

@use '../base/variables' as *;

// --------------------------------------------------------------------------
// Block: .list-page
// --------------------------------------------------------------------------
.list-page {
    width: 100%;
    padding: $spacing-md;

    @media (min-width: $breakpoint-md) {
        padding: $spacing-lg;
    }
}

// --------------------------------------------------------------------------
// Element: .list-page__header
// --------------------------------------------------------------------------
.list-page__header {
    margin-bottom: $spacing-lg;
}

.list-page__title {
    font-family: $font-family-serif;
    font-size: $font-size-h2;
    color: $color-dark;
    margin: 0;
    line-height: 1.2;

    @media (max-width: $breakpoint-md) {
        font-size: $font-size-h3;
    }
}

// --------------------------------------------------------------------------
// Element: .list-page__intro
// --------------------------------------------------------------------------
.list-page__intro {
    margin-bottom: $spacing-md;
}

.list-page__section {
    margin-bottom: $spacing-sm;
}

.list-page__section-content {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    color: $color-dark;
    line-height: 1.6;

    p {
        margin: 0 0 $spacing-sm 0;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

// --------------------------------------------------------------------------
// Element: .list-page__grid
// --------------------------------------------------------------------------
.list-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: $spacing-md;
    margin-top: $spacing-md;

    // Responsive breakpoints for grid columns
    @media (max-width: 767px) {
        // Mobile: 1 column, full-width cards
        grid-template-columns: 1fr;
        gap: $spacing-sm;
    }

    @media (min-width: 768px) and (max-width: 991px) {
        // Tablet: 2 columns
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 992px) {
        // Desktop: 3 columns (auto-fill with minmax)
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

// --------------------------------------------------------------------------
// Element: .list-page__empty-state
// --------------------------------------------------------------------------
.list-page__empty-state {
    text-align: center;
    padding: $spacing-lg;
    color: $color-primary-dark;
    font-family: $font-family-sans;
    font-size: $font-size-base;
    background-color: color-mix(in srgb, $color-neutral 50%, transparent);
    border-radius: $radius-md;
    margin-top: $spacing-md;

    p {
        margin: 0;
    }
}

// --------------------------------------------------------------------------
// Modifier: .list-page--edit-mode
// --------------------------------------------------------------------------
.list-page--edit-mode {
    .list-page__title,
    .list-page__section-content {
        // Add visual indicator for editable elements in edit mode
        position: relative;

        &[data-editable="true"] {
            outline: 1px dashed color-mix(in srgb, $color-primary 30%, transparent);
            outline-offset: 4px;
            transition: outline-color 0.2s ease;

            &:hover {
                outline-color: $color-primary;
            }
        }
    }
}