/* ============================================================
   ANIMEON — Página de detalhe do anime (anime.php)
   Reaproveita as variáveis (--sumi, --shu, --kin, --washi, --font-*)
   definidas em styles.css, carregado antes deste arquivo.
   Seletores aqui batem com a estrutura HTML real do anime.php —
   nenhuma classe nova foi adicionada ao PHP.
   ============================================================ */

.anime-details {
    max-width: var(--max-width, 1280px);
    margin: 24px auto 0;
    padding: 0 clamp(16px, 4vw, 48px) 40px;
}

/* Wrapper do poster: no HTML real é
   .anime-thumbnail > .containergrid > img
   .containergrid já é a classe do grid de cards da home — aqui, dentro de
   .anime-thumbnail, sobrescrevo só o necessário para virar um poster único,
   sem tocar no PHP nem afetar o grid da home em nenhum outro lugar. */
.anime-thumbnail {
    float: left;
    width: 240px;
    margin: 0 28px 20px 0;
}

.anime-thumbnail .containergrid {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: var(--radius, 6px);
    overflow: hidden;
    border: 1px solid var(--sumi-3);
    box-shadow: 0 16px 32px rgba(0,0,0,0.45);
    position: relative;
}

.anime-thumbnail .containergrid::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--screentone);
    background-size: 10px 10px;
    opacity: 0.5;
    mix-blend-mode: overlay;
}

.anime-thumbnail .containergrid img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.anime-details h1 {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.25;
    color: var(--washi);
}

/* Lista de metadados: <div><ul><li><strong>...</strong> valor</li></ul></div> */
.anime-details > div > ul {
    list-style: none;
    margin: 0 0 20px;
    padding: 14px 0;
    border-top: 1px solid var(--sumi-3);
    border-bottom: 1px solid var(--sumi-3);
}

.anime-details > div > ul li {
    margin-bottom: 6px;
    font-size: 0.88rem;
    color: var(--washi-dim);
}

.anime-details > div > ul strong {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--kin);
    margin-right: 6px;
}

/* Descrição: <ul><li>texto</li></ul>, filho direto de .anime-details */
.anime-details > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 68ch;
}

.anime-details > ul li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--washi-dim);
}

/* ============================================================
   EPISÓDIOS RELACIONADOS
   ============================================================ */
h2 {
    clear: both;
    max-width: var(--max-width, 1280px);
    margin: 16px auto 16px;
    padding: 0 clamp(16px, 4vw, 48px);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--washi);
}

.related-episodes {
    max-width: var(--max-width, 1280px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) 48px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.episode-item a {
    display: block;
    padding: 12px 14px;
    font-size: 0.88rem;
    color: var(--washi-dim);
    background: var(--sumi-2);
    border: 1px solid var(--sumi-3);
    border-left: 3px solid var(--shu-dim);
    border-radius: var(--radius, 6px);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.episode-item a:hover {
    color: var(--washi);
    background: var(--sumi-3);
    border-left-color: var(--shu);
}

@media (max-width: 700px) {
    .anime-thumbnail {
        float: none;
        width: 200px;
        margin: 0 auto 20px;
    }

    .anime-details > div > ul {
        display: block;
    }
}