/*
 * Shared layout primitives
 *
 * These utilities provide consistent, responsive page structure across apps.
 * They are intentionally low-level and composable.
 *
 * ── Breakpoints (matching --screen-* tokens in base.css) ──────────────
 *
 *   Mobile-first: write base styles for mobile, then scale up.
 *
 *   Phone:   < 640px   (default — no media query needed)
 *   Tablet:  640–1024px   @media (min-width: 640px)
 *   Desktop: >= 1025px    @media (min-width: 1025px)
 *
 * ── Quick-reference class list ────────────────────────────────────────
 *
 *   Page shell
 *     .l-page                  full-width + inline gutter + block padding
 *       --tight / --spacious   less / more block padding
 *
 *   Content width
 *     .l-container             max 68 rem, centred
 *       --narrow               max 44 rem
 *       --wide                 max 84 rem
 *
 *   Vertical stack
 *     .l-stack                 flex column, gap 1rem
 *       --xs / --sm / --lg / --xl   gap variants
 *
 *   Horizontal row (wrapping)
 *     .l-cluster               flex wrap row, gap 0.75rem
 *       --between              justify space-between
 *
 *   Auto-fit grid
 *     .l-grid                  auto-fit, min 14rem
 *       --compact              min 10rem
 *       --roomy                min 18rem
 *
 *   Two-column split
 *     .l-split                 single-col on mobile, 2-col on desktop
 *       --sidebar              2fr / 1fr on desktop
 *       --equal                1fr / 1fr on desktop
 *       --reverse              flips column order on mobile
 *
 *   Card
 *     .l-card                  surface-1, border, rounded, padded
 *       --flat                 no border or shadow (surface only)
 *       --flush                zero padding
 *
 *   Responsive panel
 *     .l-panel                 fluid padding + border-radius that
 *                              scale down on phones
 *
 *   Responsive visibility
 *     .l-hide-mobile           hidden below 640px
 *     .l-hide-tablet           hidden 640–1024px
 *     .l-hide-desktop          hidden above 1025px
 *     .l-show-mobile           visible only below 640px
 *     .l-show-tablet           visible only 640–1024px
 *     .l-show-desktop          visible only above 1025px
 *
 *   Mobile-friendly spacing
 *     .l-mobile-flush          removes inline padding below 640px
 *     .l-mobile-stack          forces flex column below 640px
 */

:root {
    --layout-space-1: 0.25rem;
    --layout-space-2: 0.5rem;
    --layout-space-3: 0.75rem;
    --layout-space-4: 1rem;
    --layout-space-5: 1.5rem;
    --layout-space-6: 2rem;
    --layout-space-7: 3rem;

    --layout-gutter: clamp(0.75rem, 2.5vw, 1.5rem);
    --layout-content-max: 68rem;
    --layout-content-max-narrow: 44rem;
    --layout-content-max-wide: 84rem;

    --layout-grid-min: 14rem;
    --layout-grid-min-compact: 10rem;
    --layout-grid-min-roomy: 18rem;

    --layout-card-padding: clamp(1rem, 2vw, 1.5rem);

    --layout-panel-padding: clamp(0.75rem, 2.5vw, 1.5rem);
    --layout-panel-radius: clamp(0.75rem, 1.5vw, 1rem);
}

.l-page {
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--layout-gutter);
    padding-block: var(--layout-space-5);
}

.l-page--tight {
    padding-block: var(--layout-space-4);
}

.l-page--spacious {
    padding-block: var(--layout-space-7);
}

.l-container {
    width: min(100%, var(--layout-content-max));
    margin-inline: auto;
}

.l-container--narrow {
    width: min(100%, var(--layout-content-max-narrow));
}

.l-container--wide {
    width: min(100%, var(--layout-content-max-wide));
}

.l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--layout-space-4);
}

.l-stack--xs {
    gap: var(--layout-space-1);
}

.l-stack--sm {
    gap: var(--layout-space-2);
}

.l-stack--lg {
    gap: var(--layout-space-5);
}

.l-stack--xl {
    gap: var(--layout-space-6);
}

.l-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--layout-space-3);
}

.l-cluster--between {
    justify-content: space-between;
}

.l-grid {
    display: grid;
    gap: var(--layout-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min)), 1fr));
}

.l-grid > * {
    min-width: 0;
}

.l-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min-compact)), 1fr));
}

.l-grid--roomy {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min-roomy)), 1fr));
}

.l-split {
    display: grid;
    gap: var(--layout-space-5);
    grid-template-columns: minmax(0, 1fr);
}

.l-split > * {
    min-width: 0;
}

.l-split--sidebar {
    grid-template-columns: minmax(0, 1fr);
}

.l-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: var(--layout-card-padding);
    box-sizing: border-box;
}

.l-card--flat {
    border: none;
    box-shadow: none;
}

.l-card--flush {
    padding: 0;
}

/* ── Responsive panel ───────────────────────────────────────────────────
 * A fluid-padding container with border-radius that scales down on
 * phones. Use for hero sections, toolbars, gallery wrappers — anywhere
 * you want a bordered panel that breathes on mobile.
 */
.l-panel {
    padding: var(--layout-panel-padding);
    border-radius: var(--layout-panel-radius);
    box-sizing: border-box;
}

/* ── Split variants ────────────────────────────────────────────────────
 */
.l-split--equal {
    grid-template-columns: minmax(0, 1fr);
}

.l-split--reverse {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--layout-space-5);
}

/* ── Responsive visibility ─────────────────────────────────────────────
 * Show/hide elements at specific breakpoints.
 */
.l-hide-mobile,
.l-show-tablet,
.l-show-desktop {
    /* defaults — overridden in media queries below */
}

.l-show-mobile {
    display: none;
}

/* ── Mobile-friendly helpers ───────────────────────────────────────────
 */
.l-mobile-flush,
.l-mobile-stack {
    /* defaults — overridden at 640px below */
}


/* ========================================================================
 * Phone: < 640px
 * ====================================================================== */
@media (max-width: 639px) {
    .l-page {
        padding-block: var(--layout-space-4);
    }

    .l-grid,
    .l-grid--compact,
    .l-grid--roomy {
        gap: var(--layout-space-3);
    }

    .l-hide-mobile {
        display: none !important;
    }

    .l-show-mobile {
        display: revert !important;
    }

    .l-mobile-flush {
        padding-inline: 0;
    }

    .l-mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .l-panel {
        border-radius: clamp(0.5rem, 1vw, 0.75rem);
    }
}

/* ========================================================================
 * Tablet: 640–1024px
 * ====================================================================== */
@media (min-width: 640px) and (max-width: 1024px) {
    .l-hide-tablet {
        display: none !important;
    }

    .l-show-tablet {
        display: revert !important;
    }
}

/* ========================================================================
 * Tablet and below: <= 1024px
 * ====================================================================== */
@media (max-width: 1024px) {
    .l-split--sidebar,
    .l-split--equal {
        grid-template-columns: minmax(0, 1fr);
    }

    .l-split--reverse {
        flex-direction: column-reverse;
    }
}

/* ========================================================================
 * Desktop: >= 1025px
 * ====================================================================== */
@media (min-width: 1025px) {
    .l-split--sidebar {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .l-split--equal {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .l-split--reverse {
        flex-direction: row;
    }

    .l-hide-desktop {
        display: none !important;
    }

    .l-show-desktop {
        display: revert !important;
    }
}