/* ==========================================================================
   EDICAO — Estilos dependentes de edição
   Usa CSS Custom Properties injetadas via wasdux_inject_edicao_css_vars()
   ========================================================================== */

/* --- Header do volume/edição (aparece ao abrir a edição) --- */
.edicao-header {
    background-color: var(--cor-background, transparent);
    padding-block: 40px;
}

.edicao-header .container {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* CAPA contida (não a imagem natural gigante) */
.edicao-header__thumbnail {
    flex-shrink: 0;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.edicao-header__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.edicao-header__periodo {
    font-family: var(--font-primary);
    font-size: var(--font-size-excerpt);
    color: var(--cor-secundaria, var(--color-on-primary-60));
}

.edicao-header__titulo {
    margin: 0;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--cor-principal, var(--color-text));
}

.edicao-header__descricao {
    max-width: 520px;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--cor-principal, var(--color-text));
}

@media (max-width: 768px) {
    .edicao-header .container { flex-direction: column; align-items: flex-start; gap: 24px; }
    .edicao-header__thumbnail { max-width: 100%; }
}

/* ==========================================================================
   PAGE: Archive
   ========================================================================== */

.page-archive {
    padding-top: 32px;
}

.archive-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 64px;
    align-items: start;
}

.archive-sidebar__list {
    list-style: none;
}

.archive-sidebar__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    /* hover rosa com fade-OUT lento → deixa um rastro ao passar rápido entre as tags */
    transition: background-color 0.5s ease;
}

.archive-sidebar__num {
    font-family: var(--font-primary);
    font-size: var(--font-size-excerpt);
    color: var(--color-on-primary-40);
    min-width: 20px;
}

.archive-sidebar__name {
    font-family: var(--font-primary);
    font-size: var(--font-size-excerpt);
    font-weight: 600;
    color: var(--color-text);
    flex: 1;
    transition: transform 0.5s ease; /* volta devagar, acompanha o rastro rosa */
}

.archive-sidebar__item:hover {
    background-color: var(--color-accent);
    transition-duration: 0.05s; /* fade-IN rápido: a linha atual acende na hora */
}

.archive-sidebar__item:hover .archive-sidebar__name {
    transform: translateX(8px); /* título desliza um pouco pra direita */
    transition-duration: 0.05s;
}

.archive-sidebar__count {
    font-family: var(--font-primary);
    font-size: var(--font-size-excerpt);
    color: var(--color-on-primary-40);
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.archive-edition {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
    transition: opacity 0.15s ease; /* só hover; sem transition de bg no toggle de tema */
    /* frame de conteúdo opaco: cobre a textura de pontos do body (Figma) */
    background-color: var(--color-bg);
}

.archive-edition:hover {
    opacity: 0.8;
}

.archive-edition__thumb {
    width: 100%;
    aspect-ratio: 16/9; /* landscape, como no Figma */
    overflow: hidden;
}

.archive-edition__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.archive-edition__thumb--empty {
    background-color: var(--color-on-primary-10);
}

.archive-edition__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.archive-edition__name {
    font-family: var(--font-primary);
    font-size: var(--font-size-excerpt);
    font-weight: 600;
}

.archive-edition__year {
    font-family: var(--font-primary);
    font-size: var(--font-size-excerpt);
    color: var(--color-on-primary-60);
}

/* Abas Issues/Tags — só aparecem no mobile (desktop mostra as 2 colunas) */
.archive-tabs { display: none; }

@media (max-width: 1024px) {
    .archive-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: switcher de abas — mostra uma lista full-width por vez (Figma 658:2723) */
@media (max-width: 600px) {
    .archive-tabs {
        display: flex;
        justify-content: center;
        gap: 40px;
        padding: 24px 0 8px;
    }
    .archive-tab {
        padding: 0 0 8px;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        font-family: var(--font-primary);
        font-size: var(--font-size-button);
        font-weight: 600;
        color: var(--color-on-primary-40);
        transition: color 0.15s ease;
    }
    .archive-tab.is-active {
        color: var(--color-text);
        border-bottom-color: var(--color-text);
    }

    .archive-layout { gap: 0; }
    /* esconde o painel inativo; o ativo mantém seu display natural (block/grid) */
    .archive-layout [data-archive-panel]:not(.is-active) { display: none; }
    /* respiro entre as abas e o conteúdo (capa do volume não cola nas abas) */
    .archive-layout [data-archive-panel] { padding-top: 32px; }

    .archive-grid { grid-template-columns: 1fr; gap: 24px; }
    .archive-sidebar__item { padding: 16px 4px; }
}

/* ==========================================================================
   PAGE: Chat (placeholder)
   ========================================================================== */

.page-chat {
    padding-top: 32px;
}

.chat-placeholder {
    font-family: var(--font-primary);
    font-size: var(--font-size-excerpt);
    color: var(--color-on-primary-40);
}