/* IMP-1398: collection hubs lead with governed Story artwork on compact screens. */

.collection-intro-disclosure {
    margin-block: 0 1.25rem;
    border-block: 1px solid var(--rd-rule-soft, var(--border));
}

.collection-intro-disclosure summary {
    min-height: 2.75rem;
    padding-block: 0.7rem;
    color: var(--rd-amethyst-fg, var(--primary));
    font-weight: 750;
    cursor: pointer;
}

.collection-intro-disclosure[open] summary { margin-block-end: 0.5rem; }
.collection-intro-disclosure .reader-prose { max-width: 72ch; margin-block: 0 1rem; }

.collection-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
}

.collection-index__item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
}

.collection-index__art {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    block-size: 13rem;
    overflow: hidden;
    background: var(--rd-veil, var(--bg-card));
}

.collection-index__art-tile {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-inline-start: 1px solid var(--rd-rule-soft, var(--border));
    border-block-start: 1px solid var(--rd-rule-soft, var(--border));
}

.collection-index__art-tile:first-child {
    grid-row: 1 / 3;
    border-inline-start: 0;
}

.collection-index__art-tile .reader-card__cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-index__item > :not(.collection-index__art) { margin-inline: 1rem; }
.collection-index__item > .reader-panel__title { margin-block: 1rem 0; }
.collection-index__item > .reader-prose { margin-block: 0.65rem; }
.collection-index__item > .collection-index__stories { margin-block-end: 1rem; }
.collection-index__count { color: var(--rd-text-faint, var(--text-muted)); }

.collection-siblings { margin-block-start: 2rem; }

@media (max-width: 700px), (max-height: 420px) {
    .first-run-page .reader-page-header {
        gap: 0.45rem;
        padding-block: 0.65rem;
        margin-block-end: 0.75rem;
    }

    .first-run-page .reader-page-header__title {
        font-size: clamp(1.65rem, 8dvw, 2.2rem);
    }

    .collection-index__art { block-size: 10rem; }
    .collection-index__item > .reader-prose {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .collection-detail .stories-grid > .reader-card:first-child {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr);
        min-height: 10.5rem;
        max-height: 12rem;
    }

    .collection-detail .stories-grid > .reader-card:first-child .reader-card__cover {
        min-height: 100%;
        aspect-ratio: auto;
    }

    .collection-detail .stories-grid > .reader-card:first-child .reader-card__body {
        gap: 0.35rem;
        padding: 0.75rem;
        overflow: hidden;
    }

    .collection-detail .stories-grid > .reader-card:first-child .reader-card__title {
        font-size: clamp(1rem, 5dvw, 1.25rem);
    }

    .collection-detail .stories-grid > .reader-card:first-child .reader-card__blurb,
    .collection-detail .stories-grid > .reader-card:first-child .reader-card__tags,
    .collection-detail .stories-grid > .reader-card:first-child .reader-card__social-proof {
        display: none;
    }
}

@media (max-height: 420px) {
    .collection-intro-disclosure { margin-block-end: 0.5rem; }
    .collection-index__art { block-size: 8.5rem; }
    .collection-detail .stories-grid > .reader-card:first-child {
        min-height: 8.5rem;
        max-height: 9rem;
    }
}

@media (forced-colors: active) {
    .collection-index__art,
    .collection-index__art-tile,
    .collection-intro-disclosure { border-color: CanvasText; }
}