/*
 * PC list layout, based on the 1920px Figma frame.
 *
 * Design baseline:
 *   content 1552px / card 296x519px / cover 296x415px
 *   column gap 18px / row gap 20px
 *
 * The content area scales with the viewport until it reaches the design size.
 * Container-query units keep every card and its internal spacing on the same
 * ratio as that content area. Mobile keeps the existing two-column layouts.
 */

@media (min-width: 768px) {
    .pc-list-responsive .page-shell,
    .pc-list-responsive .search-inner,
    .pc-list-responsive .collect-pc,
    .pc-list-responsive .collect-main,
    .pc-list-responsive .history-pc,
    .pc-list-responsive .history-main {
        width: min(1552px, 80.833333vw);
        max-width: none;
    }

    .pc-list-responsive .page-shell,
    .pc-list-responsive .search-inner,
    .pc-list-responsive .collect-main,
    .pc-list-responsive .history-main {
        container-type: inline-size;
    }

    .pc-list-responsive .page-shell,
    .pc-list-responsive .search-page,
    .pc-list-responsive .collect-page,
    .pc-list-responsive .history-page {
        padding-top: min(36px, 1.875vw);
        padding-bottom: min(36px, 1.875vw);
    }

    .pc-list-responsive .page-shell,
    .pc-list-responsive .search-inner,
    .pc-list-responsive .collect-page,
    .pc-list-responsive .collect-pc,
    .pc-list-responsive .collect-main,
    .pc-list-responsive .history-page,
    .pc-list-responsive .history-pc,
    .pc-list-responsive .history-main,
    .pc-list-responsive :is(
        .content-section,
        .ranking-section,
        .latest-section,
        .list-hero,
        .rank-hero,
        .more-hero,
        .tag-list-hero,
        .today-update-hero,
        .vip-zone-hero
    ) {
        gap: min(24px, 1.25vw);
    }

    /* 1552 = 5 * 296 + 4 * 18. The vertical rhythm is 20px. */
    .pc-list-responsive :is(.card-grid, .search-grid, .collect-grid, .history-grid) {
        width: 100%;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        row-gap: 1.288660cqw;
        column-gap: 1.159794cqw;
    }

    .pc-list-responsive .poster-card {
        width: 100%;
        min-width: 0;
        height: 33.440722cqw;
        border: 0;
        border-radius: 0.902062cqw;
    }

    .pc-list-responsive .poster-card:hover {
        outline: 0.128866cqw solid #FADC44;
        outline-offset: -0.128866cqw;
    }

    .pc-list-responsive .poster-card .poster-cover {
        width: 100%;
        height: 26.739691cqw;
        flex: 0 0 26.739691cqw;
        aspect-ratio: 296 / 415;
    }

    .pc-list-responsive .poster-card-body {
        width: 100%;
        height: 6.701031cqw;
        flex: 0 0 6.701031cqw;
        padding: 0.773196cqw 0.644330cqw;
        gap: 0.386598cqw;
    }

    .pc-list-responsive .poster-card-title,
    .pc-list-responsive .ranking-card-title {
        min-height: 1.417526cqw;
        font-size: 1.030928cqw;
        line-height: 1.417526cqw;
    }

    .pc-list-responsive .poster-card-subtitle,
    .pc-list-responsive .ranking-card-subtitle {
        max-width: 14.304124cqw;
        min-height: 1.288660cqw;
        font-size: 0.902062cqw;
        line-height: 1.288660cqw;
    }

    .pc-list-responsive .poster-card-meta,
    .pc-list-responsive .ranking-card-meta {
        min-height: 1.546392cqw;
        gap: 0.515464cqw;
    }

    .pc-list-responsive .poster-card-tag,
    .pc-list-responsive .ranking-card-tag {
        padding: 0.128866cqw 0.515464cqw;
        border-radius: 0.579897cqw;
        font-size: 0.902062cqw;
        line-height: 1.288660cqw;
    }

    .pc-list-responsive .poster-card-heat,
    .pc-list-responsive .ranking-card-heat {
        font-size: 0.902062cqw;
        line-height: 1.288660cqw;
    }

    .pc-list-responsive .poster-like-badge {
        left: 0.773196cqw;
        bottom: 0.773196cqw;
        padding: 0.128866cqw 0.451031cqw;
        gap: 0.257732cqw;
    }

    .pc-list-responsive .poster-like-badge-icon {
        width: 1.546392cqw;
        height: 1.546392cqw;
    }

    .pc-list-responsive .poster-like-badge-count {
        font-size: 1.030928cqw;
        line-height: 1.417526cqw;
    }

    .pc-list-responsive .episode-badge,
    .pc-list-responsive .ranking-episode-badge {
        right: 0.773196cqw;
        bottom: 0.773196cqw;
        height: auto;
        padding: 0.193299cqw 0.515464cqw;
        border-radius: 0.386598cqw;
        font-size: 1.030928cqw;
        line-height: 1.417526cqw;
    }

    .pc-list-responsive .episode-badge .text-white-xs,
    .pc-list-responsive .episode-badge-shifted .text-white-xs,
    .pc-list-responsive .ranking-episode-badge .text-white-xs {
        font-size: 1.030928cqw;
        line-height: 1.417526cqw;
    }

    .pc-list-responsive :is(.ranking-badge, .poster-rank-badge) {
        width: 2.770619cqw;
        height: 2.190722cqw;
    }

    .pc-list-responsive :is(
        .rank-bg-gold,
        .rank-bg-silver,
        .rank-bg-bronze,
        .rank-bg-dark,
        .poster-rank-bg-gold,
        .poster-rank-bg-silver,
        .poster-rank-bg-bronze,
        .poster-rank-bg-dark
    ) {
        width: 2.770619cqw;
        height: 2.190722cqw;
    }

    .pc-list-responsive :is(.rank-text, .poster-rank-text) {
        width: 2.770619cqw;
        height: 2.255155cqw;
        font-size: 1.159794cqw;
        line-height: 1.546392cqw;
    }

    /* Collection cards use the same Figma card geometry on PC. */
    .pc-list-responsive .collect-card {
        width: 100%;
        min-width: 0;
        height: 33.440722cqw;
        border-radius: 0.902062cqw;
    }

    .pc-list-responsive .collect-card-cover {
        width: 100%;
        height: 26.739691cqw;
        flex: 0 0 26.739691cqw;
        aspect-ratio: 296 / 415;
    }

    .pc-list-responsive .collect-card-body {
        height: 6.701031cqw;
        flex: 0 0 6.701031cqw;
        padding: 0.773196cqw 0.644330cqw;
        gap: 0.386598cqw;
    }

    .pc-list-responsive .collect-card-title {
        min-height: 1.417526cqw;
        font-size: 1.030928cqw;
        line-height: 1.417526cqw;
    }

    .pc-list-responsive .collect-card-desc,
    .pc-list-responsive .collect-card-tag,
    .pc-list-responsive .collect-card-progress {
        min-height: 1.288660cqw;
        font-size: 0.902062cqw;
        line-height: 1.288660cqw;
    }

    .pc-list-responsive .collect-card-meta {
        min-height: 1.546392cqw;
        gap: 0.515464cqw;
    }

    .pc-list-responsive .collect-card-eps {
        right: 0.773196cqw;
        bottom: 0.773196cqw;
        height: auto;
        padding: 0.193299cqw 0.515464cqw;
        border-radius: 0.386598cqw;
        font-size: 1.030928cqw;
        line-height: 1.417526cqw;
    }

    .pc-list-responsive .section-ad-row {
        gap: 2.319588cqw;
    }

    .pc-list-responsive .section-ad-banner {
        height: 6.056701cqw;
        border-radius: 0.773196cqw;
    }
}