/* ==========================================================================
   Catalog & Content Detail Pages — используют токены из tokens.css
   ========================================================================== */

body {
    min-height: 100vh;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    display: flex;
    gap: 40px;
    padding: 24px 32px 48px;
    max-width: 1100px;
    margin: 0 auto;
}

.hero-poster {
    flex: 0 0 300px;
}

.hero-poster img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
    background-color: var(--surface);
    display: block;
}

.hero-info {
    flex: 1;
    min-width: 0;
    padding-top: 8px;
}

/* Английское название — антиква: язык контента отличим от интерфейса */
.hero-title-en {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 6px;
}

.hero-title-ru {
    font-size: 20px;
    color: var(--text-3);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 24px;
}

/* Meta row */
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.meta-rating {
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.meta-year {
    font-size: 14px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.meta-tag {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    background-color: var(--raise);
    padding: 3px 10px;
    border-radius: 4px;
}

.meta-level {
    font-size: 11px;
    font-weight: 600;
    color: var(--violet);
    background-color: var(--violet-subtle);
    border: 1px solid rgba(176, 143, 255, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.hero-description {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-2);
    max-width: 580px;
    margin-bottom: 32px;
}

/* Hero actions */
.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ==========================================================================
   Seasons & Episodes
   ========================================================================== */

.seasons-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px 64px;
}

.season-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.season-tabs::-webkit-scrollbar {
    display: none;
}

.season-tab {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.15s;
}

.season-tab::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background-color: transparent;
    transition: background-color 0.15s;
}

.season-tab:hover {
    color: var(--text);
}

.season-tab.active {
    color: var(--text);
    font-weight: 600;
}

.season-tab.active::after {
    background-color: var(--gold);
}

/* Episode grid */
.episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* Пара «карточка + иконка разбора» читается как одна кнопка с швом:
   карточка ведёт на просмотр, правая зона с иконкой — на разбор */
.episode-row {
    display: flex;
    align-items: stretch;
}

.episode-card {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    background-color: var(--surface);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}

/* В паре с иконкой разбора правые углы прямые — их скругляет зона иконки */
.episode-row .episode-card {
    border-radius: 6px 0 0 6px;
}

.episode-note {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    background-color: var(--surface);
    border-left: 1px solid var(--line);
    border-radius: 0 6px 6px 0;
    color: var(--text-3);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.episode-note:hover {
    background-color: var(--raise);
    color: var(--gold);
}

.episode-note svg {
    width: 17px;
    height: 17px;
}

/* Невидимый хвост после контента: держит правое плечо карточки
   на месте зоны разбора, чтобы карточки без разбора не отличались
   от соседних. Ширина = зона иконки 40px − flex-gap 14px */
.episode-tail {
    flex: 0 0 26px;
    align-self: stretch;
}

.episode-card:hover {
    background-color: var(--raise);
}

.episode-number {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.episode-card:hover .episode-number {
    color: var(--gold);
}

.episode-body {
    flex: 1;
    min-width: 0;
}

.episode-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.episode-duration {
    font-size: 12px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* Load more */
.btn-more {
    display: block;
    margin: 0 auto;
    background: none;
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.btn-more:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.btn-more:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        gap: 24px;
        padding: 16px 16px 32px;
    }

    .hero-poster {
        flex: none;
        max-width: 200px;
    }

    .hero-title-en {
        font-size: 28px;
    }

    .hero-title-ru {
        font-size: 17px;
        margin-bottom: 16px;
    }

    .hero-description {
        font-size: 14px;
    }

    .seasons-section {
        padding: 0 16px 48px;
    }

    .episodes-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Catalog Page
   ========================================================================== */

/* Плавный переход к секциям по якорям из шапки; обнуляется при
   prefers-reduced-motion (см. конец файла) */
@media (prefers-reduced-motion: no-preference) {
    html:has(body.page-catalog) {
        scroll-behavior: smooth;
    }
}

.catalog {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 32px 72px;
}

.catalog-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 8px;
}

.catalog-subtitle {
    font-size: 15px;
    color: var(--text-3);
    max-width: 480px;
    line-height: 1.5;
}

/* Секции-разделы каталога: якоря из шапки ведут сюда */
.cat-section {
    margin-top: 56px;
    scroll-margin-top: calc(var(--topbar-h) + 16px);
}

/* На мобильном каталоге шапка двухстрочная (категории — второй строкой) */
@media (max-width: 768px) {
    body.page-catalog {
        --topbar-h: 92px;
    }
}

.cat-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 20px;
}

.cat-count {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    margin-left: 8px;
}

.cat-empty-note {
    padding: 8px 0 12px;
    font-size: 14px;
    color: var(--text-3);
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 20px;
}

.catalog-card {
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--surface);
    transition: background-color 0.15s;
}

.catalog-card:hover {
    background-color: var(--raise);
}

.catalog-poster img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    background-color: var(--raise);
    transition: filter 0.15s;
}

.catalog-card:hover .catalog-poster img {
    filter: brightness(1.07);
}

.catalog-info {
    padding: 12px 14px 14px;
}

.catalog-card-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 6px;
}

.catalog-card-meta .meta-rating {
    font-size: 14px;
}

.catalog-card-levels {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Пустое состояние каталога */
.catalog-empty {
    padding: 80px 16px;
    text-align: center;
}

.catalog-empty-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text);
    margin-bottom: 8px;
}

.catalog-empty-text {
    font-size: 14px;
    color: var(--text-3);
}

/* ==========================================================================
   Музыка — разборы песен одной секцией каталога
   ========================================================================== */

.music-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.song-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    border-radius: var(--radius-card);
    background-color: var(--surface);
    text-decoration: none;
    transition: background-color 0.15s;
}

.song-card:hover {
    background-color: var(--raise);
}

.song-card-disc {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--gold);
}

.song-card-body {
    min-width: 0;
}

.song-card-title {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-card-artist {
    display: block;
    font-size: 13px;
    color: var(--text-3);
    margin-top: 2px;
}

@media (max-width: 768px) {
    .catalog {
        padding: 20px 16px 56px;
    }

    .catalog-title {
        font-size: 26px;
    }

    .cat-section {
        margin-top: 44px;
    }

    .catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 14px;
    }

    .song-card {
        padding: 12px 14px;
        gap: 14px;
    }

    .song-card-disc {
        width: 34px;
        height: 34px;
    }

    .song-card-title {
        font-size: 16px;
    }
}