/* =====================================================
   PageShell — scoped styles
   Tokens only: glasstock-design-system.css is the single source.
   ===================================================== */

.gs-page-shell {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--gs-space-6) var(--gs-space-4);
    box-sizing: border-box;
}

.gs-page-shell__header {
    margin-bottom: var(--gs-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-3);
}

/* Title row: title block on the left, actions on the right.
   Mobile-first: stack vertically with actions BELOW the title for thumb reach.
   At md (768px+) switch to horizontal with space-between, allow wrap. */
.gs-page-shell__title-row {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--gs-space-3);
}

.gs-page-shell__title-block {
    min-width: 0; /* prevent flex children from overflowing */
}

.gs-page-shell__title {
    font-family: var(--gs-font-heading);
    font-size: var(--gs-text-3xl);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--gs-text);
    letter-spacing: -0.01em;
}

.gs-page-shell__subtitle {
    margin: var(--gs-space-2) 0 0 0;
    font-size: var(--gs-text-sm);
    color: var(--gs-text-muted);
    line-height: 1.5;
}

.gs-page-shell__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gs-space-2);
    align-items: center;
}

.gs-page-shell__body {
    display: block;
}

/* Tablet portrait and up: horizontal title row */
@media (min-width: 768px) {
    .gs-page-shell {
        padding: var(--gs-space-8) var(--gs-space-6);
    }

    .gs-page-shell__title-row {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .gs-page-shell__actions {
        justify-content: flex-end;
        flex-shrink: 0;
    }
}

/* Laptop and up: a touch more breathing room */
@media (min-width: 1024px) {
    .gs-page-shell__title {
        font-size: var(--gs-text-4xl);
    }
}