/* Styles for the V3 library page: page layout, empty state, hero,
   list/grid/categorized results, and responsive overrides. */

/* === Page Layout === */


/* Filter toolbar row: filters fill the row, branch buttons sit at the far right,
   bottom-aligned with the filter dropdowns. */
.library-page__filter-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-medium);
}

.library-page__filter-row .library-filter {
    flex: 1 1 auto;
    min-width: 0;
}

.library-page__filter-row .branch-buttons {
    flex: 0 0 auto;
}

/* === Hero === */

.library-page-hero {
    /* The desktop rule cancels the top margin exactly; keep the two in step. */
    --hero-outer-gap: var(--space-large);

    margin-top: var(--hero-outer-gap);
    margin-bottom: var(--hero-outer-gap);
    position: relative;
    display: grid;
    grid-template-columns: fit-content(574px) 1fr fit-content(40%);
    column-gap: var(--space-xl);
    row-gap: var(--space-large);
    align-items: center;
    grid-template-areas:
        "a . c"
        "b . c"
    ;
    /* Rows pinned to content. Left auto, an illustration in column c taller than
       the title and search stack spreads its surplus over both rows and forces
       them apart. */
    grid-template-rows: min-content min-content;
    align-content: center;
}

.library-page-hero .hero-search-bar {
    grid-area: b;
    width: 75%;
}

.library-page-hero .hero-image-container {
    grid-area: c;
}

/* The art runs on a diagonal rather than filling its frame, so it needs more height
   than a centred mascot to read at the same size. 250 is the design minimum. */
.library-page-hero .hero-image,
.library-page-hero .hero-image img {
    height: 250px;
    width: auto;
}

/* Desktop: keep the band as tall as its text and let the art overhang instead.
   `height: 0` takes the container out of row sizing, `align-self: start` sends the
   overhang downward rather than up into the header, and the negative margin lifts
   it flush under whatever precedes the hero. The container still occupies column c,
   so it keeps its width and cannot ride over the title. */
@media (min-width: 1280px) {
    .library-page-hero .hero-image-container {
        align-self: start;
        height: 0;
        margin-top: calc(var(--hero-outer-gap) * -1);
        /* Holds the overhang clear of the Master/Develop buttons at the end of the
           filter row, which it otherwise covers. Not cosmetic. */
        margin-right: calc(var(--space-xxl) + var(--space-xl));
    }

    .library-page-hero .hero-image,
    .library-page-hero .hero-image img {
        height: 270px;
    }
}

.library-page-hero .hero-image-dark {
    display: none;
}

html.dark .library-page-hero .hero-image-light {
    display: none;
}

html.dark .library-page-hero .hero-image-dark {
    display:block
}

.library-page-hero .hero-title {
    grid-area: a;
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-2xl);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

/* === List & Grid View === */

.library-item-list {
    border: 1px solid var(--color-stroke-weak);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-xxl);
}

.library-item-card-grid {
    margin-bottom: var(--space-xxl);
}

.library-item-list .library-item--list:last-child {
    border-bottom: none;
}

.library-item-list.grouped {
    margin-bottom: var(--space-large);
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.library-page__list-header {
    display: grid;
    width: 100%;
    border-bottom: 1px solid var(--color-stroke-weak);
    background: var(--color-surface-weak);
    padding: var(--space-large);
}

.library-page__list-header-flex {
    display: flex;
    gap: var(--space-large);
    align-items: center;
}

.library-page__list-header-justify {
    justify-self: center;
    padding-left: calc(16px + var(--space-large));
}

.library-page__list-header-text {
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-tight);
}

/* === Categorized & Grading View === */

.library-page__category-header {
    grid-column: 1 / -1;
    padding: var(--space-large);
    border-bottom: 1px solid var(--color-stroke-weak);
    background: var(--color-surface-mid);
    width: 100%;
    margin: 0;
    max-width: 1408px;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    font-size: var(--font-size-large);
    font-family: var(--font-display);
    border-top-left-radius: var(--border-radius-xl);
    border-top-right-radius: var(--border-radius-xl);
    border: 1px solid var(--color-stroke-weak);
}

.library-page__category-header .icon {
    display: inline-block;
    margin-left: var(--space-large);
}

.grouped .library-item--list:first-child {
    border-radius: 0;
    border-top: none;
}


/* === Empty State (no search/filter results) === */

.library-page__empty-state {
    padding: var(--space-xxl) var(--space-large);
    margin-bottom: var(--space-xxl);
}

.library-page__empty-state[hidden] {
    display: none;
}

.library-page__empty-state--in-list {
    list-style: none;
    width: 100%;
    grid-column: 1 / -1;
    border: none;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl) var(--space-large);
    background: var(--color-surface-weak);
}

@media (min-width: 768px) {
    .library-item-list:has(> .library-page__empty-state:not([hidden])) {
        min-height: 540px;
        grid-template-rows: auto 1fr;
    }
}


/* === Mobile Overrides (< 768px) === */

@media (max-width: 767px) {
    .library-page__list-header {
        display: none;
    }

    .library-page-hero .hero-search-bar {
        width: 100%;
    }

    /* No illustration on mobile: nothing for it to sit against, and stacked it
       pushed the search field below the fold. Area "c" leaves the template as well
       as the container being hidden, so the stack keeps no dead row. */
    .library-page-hero {
        grid-template-areas:
            "a"
            "b"
        ;
        grid-template-columns: 100%;
        justify-items: start;
    }

    .library-page-hero .hero-image-container {
        display: none;
    }

    .library-page__container {
        margin-left: var(--space-medium);
        margin-right: var(--space-medium);
    }
}