/* ============================================================
   community-layout.css

   PURPOSE:
   This file contains ONLY layout helpers:
   page shells, grids, spacing, responsive layout, toolbar layout.

   Do NOT put component appearance here.
   ============================================================ */

body {
    background-color: var(--app-bg);
    color: var(--app-text);
}

.app-page {
    min-height: 100vh;
    background-color: var(--app-bg);
    color: var(--app-text);
}

.app-page-shell {
    width: min(100%, 1200px);
    margin-inline: auto;
    padding: 1rem;
}

.app-page-shell-narrow {
    width: min(100%, 860px);
    margin-inline: auto;
    padding: 1rem;
}

.app-page-shell-wide {
    width: min(100%, 1440px);
    margin-inline: auto;
    padding: 1rem;
}

@media (min-width: 768px) {
    .app-page-shell,
    .app-page-shell-narrow,
    .app-page-shell-wide {
        padding: 1.5rem;
    }
}

.app-section {
    margin-bottom: 1.25rem;
}

.app-section-lg {
    margin-bottom: 2rem;
}

.app-sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--app-bg);
    padding-block: 0.5rem;
}

.app-toolbar,
.app-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.app-toolbar-between {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .app-toolbar,
    .app-toolbar-between,
    .app-toolbar-group {
        align-items: stretch;
    }

    .app-toolbar .btn,
    .app-toolbar-between .btn,
    .app-toolbar-group .btn {
        width: 100%;
    }
}

.app-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .app-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .app-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.app-two-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 992px) {
    .app-two-column {
        grid-template-columns: 2fr 1fr;
    }
}

.app-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

@media (max-width: 575.98px) {
    .app-form-actions .btn {
        width: 100%;
    }
}

.app-readable {
    max-width: 72ch;
}

.app-mobile-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .app-mobile-stack > * {
        width: 100%;
    }
}