/* Relíquias e sinergias — page-owned styles */

.reliquias-page {
    --reliquias-copy-width: 720px;
    --reliquias-grid-gap: var(--space-lg);
}

/* Hero */
.reliquias-hero {
    background-color: var(--color-stone-deep);
    padding-block: var(--space-4xl);
    border-block-end: 2px solid var(--color-emerald);
}

.reliquias-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
}

.reliquias-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    width: 100%;
    max-width: 720px;
}

.reliquias-hero__content h1 {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
    letter-spacing: var(--text-h1-tracking);
    max-width: 720px;
}

.reliquias-hero__lead {
    font-size: var(--text-body-large-size);
    line-height: var(--text-body-large-line-height);
    max-width: 720px;
}

.reliquias-hero__details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 720px;
}

.reliquias-hero__details li {
    position: relative;
    padding-inline-start: 1.25rem;
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
}

.reliquias-hero__details li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-emerald);
}

.reliquias-hero .btn {
    margin-block-start: var(--space-sm);
}

/* Sections */
.reliquias-section {
    padding-block: var(--space-3xl);
}

.reliquias-section--stone-deep {
    background-color: var(--color-stone-deep);
}

.reliquias-section h2 {
    margin-block-end: var(--space-lg);
}

/* Grids */
.reliquias-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--reliquias-grid-gap);
}

.reliquias-grid--definicao .reliquias-copy {
    grid-column: span 8;
    min-width: 0;
}

.reliquias-grid--definicao .reliquias-aside {
    grid-column: span 4;
    min-width: 0;
}

.reliquias-grid--personagem .reliquias-copy {
    grid-column: span 8;
    min-width: 0;
}

.reliquias-grid--personagem .reliquias-aside {
    grid-column: span 4;
    min-width: 0;
}

.reliquias-grid--ascensao .reliquias-copy {
    grid-column: span 8;
    min-width: 0;
}

.reliquias-grid--ascensao .reliquias-aside {
    grid-column: span 4;
    min-width: 0;
}

/* Copy blocks */
.reliquias-copy {
    max-width: var(--reliquias-copy-width);
    min-width: 0;
}

.reliquias-copy > * + * {
    margin-block-start: var(--space-md);
}

.reliquias-copy--notas {
    margin-block-start: var(--space-lg);
    max-width: var(--reliquias-copy-width);
}

.reliquias-copy--conselhos {
    margin-block-start: var(--space-lg);
    max-width: var(--reliquias-copy-width);
}

.reliquias-copy--avisos {
    max-width: var(--reliquias-copy-width);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.reliquias-copy--avisos .callout {
    margin-block-end: 0;
}

.reliquias-copy--avisos p {
    margin-block-end: 0;
}

/* Aside cards */
.reliquias-aside {
    min-width: 0;
}

.reliquias-aside__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.reliquias-aside__card h3 {
    margin-block-end: 0;
}

.reliquias-aside__card .content-list {
    margin-block-end: 0;
}

.reliquias-resumo {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
}

.reliquias-resumo div {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.reliquias-resumo dt {
    margin: 0;
}

.reliquias-resumo dd {
    margin: 0;
    font-weight: 600;
}

/* Table */
.reliquias-table-wrapper {
    margin-block-end: var(--space-lg);
}

.reliquias-table {
    min-width: 0;
}

.reliquias-table th,
.reliquias-table td {
    min-width: 0;
}

.reliquias-table tbody tr:hover {
    background-color: var(--color-stone-deep);
}

/* Sinergias */
.reliquias-sinergias-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-block-end: var(--space-lg);
}

.reliquias-sinergia {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.reliquias-sinergia h3 {
    margin-block-end: 0;
}

.reliquias-sinergia p {
    margin-block-end: 0;
}

.reliquias-sinergia .text-small {
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
    border-block-start: 1px solid var(--color-emerald);
}

/* Personagem list */
.reliquias-personagem-list {
    margin-block-end: var(--space-md);
}

/* Final */
.reliquias-final {
    background-color: var(--color-stone-deep);
    padding-block: var(--space-4xl);
    border-block-start: 2px solid var(--color-emerald);
}

.reliquias-final__inner {
    max-width: 720px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
}

.reliquias-final__inner h2 {
    margin-block-end: 0;
}

.reliquias-final__inner p {
    margin-block-end: 0;
    max-width: 720px;
}

.reliquias-final__inner .btn {
    margin-block-start: var(--space-sm);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .reliquias-grid--definicao .reliquias-copy,
    .reliquias-grid--personagem .reliquias-copy,
    .reliquias-grid--ascensao .reliquias-copy {
        grid-column: span 7;
    }

    .reliquias-grid--definicao .reliquias-aside,
    .reliquias-grid--personagem .reliquias-aside,
    .reliquias-grid--ascensao .reliquias-aside {
        grid-column: span 5;
    }

    .reliquias-sinergias-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reliquias-sinergia:last-child {
        grid-column: span 2;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .reliquias-hero {
        padding-block: var(--space-2xl);
    }

    .reliquias-hero__content h1 {
        font-size: var(--text-h1-size);
    }

    .reliquias-hero .btn {
        width: 100%;
    }

    .reliquias-section {
        padding-block: var(--space-2xl);
    }

    .reliquias-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .reliquias-grid--definicao .reliquias-copy,
    .reliquias-grid--definicao .reliquias-aside,
    .reliquias-grid--personagem .reliquias-copy,
    .reliquias-grid--personagem .reliquias-aside,
    .reliquias-grid--ascensao .reliquias-copy,
    .reliquias-grid--ascensao .reliquias-aside {
        grid-column: 1 / -1;
    }

    .reliquias-copy,
    .reliquias-copy--notas,
    .reliquias-copy--conselhos,
    .reliquias-copy--avisos {
        max-width: 100%;
    }

    .reliquias-sinergias-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .reliquias-sinergia:last-child {
        grid-column: auto;
    }

    .reliquias-table-wrapper {
        overflow-x: auto;
    }

    .reliquias-table,
    .reliquias-table tbody,
    .reliquias-table tr,
    .reliquias-table td,
    .reliquias-table th {
        display: block;
        width: 100%;
    }

    .reliquias-table thead {
        display: none;
    }

    .reliquias-table tr {
        margin-block-end: var(--space-md);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-default);
        background-color: var(--color-white);
        padding: var(--space-sm);
    }

    .reliquias-table td,
    .reliquias-table th {
        border-block-end: 1px solid var(--color-line);
        padding: var(--space-sm);
        text-align: start;
    }

    .reliquias-table td:last-child,
    .reliquias-table th:last-child {
        border-block-end: none;
    }

    .reliquias-table td::before,
    .reliquias-table th::before {
        content: attr(data-label);
        display: block;
        font-size: var(--text-data-label-size);
        line-height: var(--text-data-label-line-height);
        letter-spacing: var(--text-data-label-tracking);
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-navy-soft);
        margin-block-end: var(--space-2xs);
    }

    .reliquias-table th[scope="row"]::before {
        content: attr(data-label);
    }

    .reliquias-final {
        padding-block: var(--space-2xl);
    }

    .reliquias-final__inner .btn {
        width: 100%;
    }
}