/* Layout primitives and page structure */
.hero {
    min-height: 100vh;
    background:
    linear-gradient(120deg, var(--bg-hero-strong), var(--bg-hero-soft)),
    url("/images/background.jpeg");
    background-size: cover;
    background-position: center;
    padding: var(--space);
    display: flex;
    justify-content: center;
}

.shell {
    width: min(var(--card-width), 100%);
    display: flex;
    flex-direction: column;
    gap: var(--space);
    max-width: var(--size-1280);
}

/* Default: one-column main so body uses full width like header/footer */
main {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space);
}

/* Add class="with-aside" only on pages that have a right sidebar */
main.with-aside {
    grid-template-columns: 3fr 1fr;
}

.table-scroll {
    overflow-x: auto;
}

.table-wide {
    min-width: var(--card-width);
}

@media (max-width: var(--bp-md)) {
    main,
    main.with-aside {
        grid-template-columns: 1fr;
    }
}