/* =============================================================================
   cards.css
   cards, panels, split cards, preview frames, and linked cards
============================================================================= */


/* =======================================
   BASE CARDS
========================================== */

/* standard content card */
.la-card {
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    padding: var(--la-5);
}

/* first heading inside a card should not add surprise top space */
.la-card > h1:first-child,
.la-card > h2:first-child,
.la-card > h3:first-child {
    margin-top: 0;
}

/* low emphasis nested card for grouped details */
.la-card-muted {
    padding: var(--la-4);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    background: var(--la-surface-subtle);
}

/* card wrapper for tables, keeps overflow controlled */
.la-card-table {
    overflow: hidden;
    padding: var(--la-3);
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
}

/* centered card width helper */
.la-card-centered {
    max-width: 900px;
    margin-inline: auto;
}

/* TODO: consider doing something about the brand color looking too close to the error color */
/* simple card border states, use sparingly */
.la-card--active-border {
    border: 2px solid var(--la-border);
    border-color: var(--la-brand);
}

.la-card--warning-border {
    border: 2px solid var(--la-border);
    border-color: var(--la-warning);
}

.la-card--error-border {
    border: 2px solid var(--la-border);
    border-color: var(--la-danger);
}


/* =======================================
   SPLIT CARDS
========================================== */

/* split layout inside one shared card */
.la-split-card {
    --la-split-gap: var(--la-5);
    --la-split-cols: 2fr 1fr;

    display: grid;
    grid-template-columns: var(--la-split-cols);
    align-items: start;
}

/* prevent long content from forcing the layout wider */
.la-split-card > * {
    min-width: 0;
    box-sizing: border-box;
}

/* spacing before the splitter */
.la-split-card > *:not(:last-child) {
    padding-inline-end: var(--la-split-gap);
}

/* splitter between content groups */
.la-split-card > * + * {
    padding-inline-start: var(--la-split-gap);
    border-inline-start: 1px solid var(--la-border);
}

/* first heading inside each split area should not add surprise top space */
.la-split-card > * > h1:first-child,
.la-split-card > * > h2:first-child,
.la-split-card > * > h3:first-child {
    margin-top: 0;
}

/* ratio modifiers — left number is main, right is aside
   use style="--la-split-cols: Xfr Yfr" for any custom ratio */
.la-split-card--1-1 { --la-split-cols: 1fr 1fr; }
.la-split-card--2-1 { --la-split-cols: 2fr 1fr; }
.la-split-card--3-1 { --la-split-cols: 3fr 1fr; }
.la-split-card--3-2 { --la-split-cols: 3fr 2fr; }
.la-split-card--1-2 { --la-split-cols: 1fr 2fr; }
.la-split-card--1-3 { --la-split-cols: 1fr 3fr; }


/* =======================================
   SPLIT ASIDE
========================================== */

/* two-column layout with a fixed main area and a flexible min/max aside */
.la-split-aside {
    --la-split-aside-gap: var(--la-6);
    --la-split-aside-min: 300px;
    --la-split-aside-max: 420px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(var(--la-split-aside-min), var(--la-split-aside-max));
    align-items: start;
}

/* prevent content from overflowing */
.la-split-aside > * {
    min-width: 0;
    box-sizing: border-box;
}

/* padding before the vertical divider */
.la-split-aside > *:not(:last-child) {
    padding-inline-end: var(--la-split-aside-gap);
}

/* vertical divider */
.la-split-aside > * + * {
    padding-inline-start: var(--la-split-aside-gap);
    border-inline-start: 1px solid var(--la-border);
}

/* headings inside either column should not add surprise top space */
.la-split-aside > * > h1:first-child,
.la-split-aside > * > h2:first-child,
.la-split-aside > * > h3:first-child {
    margin-top: 0;
}

/* equal columns — useful for two-pane comparisons */
.la-split-aside--balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* narrower aside */
.la-split-aside--narrow {
    --la-split-aside-min: 240px;
    --la-split-aside-max: 340px;
}

/* wider aside */
.la-split-aside--wide {
    --la-split-aside-min: 360px;
    --la-split-aside-max: 520px;
}

/* =======================================
   PANELS
========================================== */

/* bordered app panel, flatter and more structured than a card */
.la-panel {
    margin-block: var(--la-1);
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    overflow: hidden;
}

/* panel title row and optional action area */
.la-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-4);
    padding: var(--la-4) var(--la-5);
    border-bottom: 1px solid var(--la-border);
}

/* panel heading */
.la-panel-title {
    margin: 0;
    color: var(--la-ink);
    font-size: var(--la-text-base);
    font-weight: var(--la-weight-bold);
    line-height: var(--la-line-title);
    letter-spacing: -0.01em;
}

/* main panel content */
.la-panel-body {
    padding: var(--la-5);
}

/* quiet panel when the page already has enough boxes */
.la-panel-quiet {
    background: transparent;
    border-color: var(--la-border);
}


/* =======================================
   EXPLANATION CARDS
========================================== */

/* explanation card for short documented choices, not for every section, use very rarely */
.la-feature-card {
    padding: var(--la-5);
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
}

/* small ordered marker inside explanation cards */
.la-feature-num {
    display: inline-block;
    margin: 0 0 var(--la-3);
    padding: 2px 7px;
    border: 1px solid var(--la-brand-border);
    border-radius: var(--la-radius-sm);
    background: var(--la-surface);
    color: var(--la-brand-active);
    font-size: var(--la-text-xs);
    font-weight: var(--la-weight-strong);
    letter-spacing: 0.06em;
}

/* title inside explanation card */
.la-feature-title {
    margin: 0 0 var(--la-2);
    color: var(--la-ink);
    font-size: var(--la-text-base);
    font-weight: var(--la-weight-bold);
}

/* =======================================
   LINKED CARDS
========================================== */

/* responsive card grid for linked cards */
.la-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    align-items: start;
    gap: var(--la-4);
}

/* linked row card with label and arrow */
.la-nav-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-3);
    padding: var(--la-3) var(--la-4);
    color: var(--la-ink);
    text-decoration: none;
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    transition:
        border-color var(--la-transition-fast),
        background-color var(--la-transition-fast),
        color var(--la-transition-fast);
}

.la-nav-card:hover {
    border-color: var(--la-border-strong);
    background: var(--la-surface-hover);
}

/* nav card text */
.la-nav-card-name {
    font-size: var(--la-text-sm);
    font-weight: var(--la-weight-light);
}

/* nav card arrow */
.la-nav-card-arrow {
    color: var(--la-muted);
    font-size: var(--la-text-sm);
}


/* =======================================
   INNER HELPERS
========================================== */

/* title inside small nested cards */
.la-inner-card-title {
    margin: 0 0 var(--la-3);
    color: var(--la-ink);
    font-size: var(--la-text-sm);
    font-weight: var(--la-weight-light);
}


/* =======================================
   RESPONSIVE
========================================== */

/* split cards collapse on smaller screens */
@media (max-width: 820px) {
    .la-split-card {
        grid-template-columns: 1fr;
    }

    .la-split-card > *:not(:last-child) {
        padding-inline-end: 0;
        padding-block-end: var(--la-split-gap);
    }

    .la-split-card > * + * {
        padding-inline-start: 0;
        padding-block-start: var(--la-split-gap);
        border-inline-start: 0;
        border-block-start: 1px solid var(--la-border);
    }

    .la-split-aside {
        grid-template-columns: 1fr;
    }

    .la-split-aside > *:not(:last-child) {
        padding-inline-end: 0;
        padding-block-end: var(--la-split-aside-gap);
    }

    .la-split-aside > * + * {
        padding-inline-start: 0;
        padding-block-start: var(--la-split-aside-gap);
        border-inline-start: 0;
        border-block-start: 1px solid var(--la-border);
    }
}

/* card grids collapse on small screens */
@media (max-width: 640px) {
    .la-card-grid {
        grid-template-columns: 1fr;
    }
}