/* ==========================================================
   HERO
   ========================================================== */

.hero-overlay {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
}

/* Escurecimento do Hero */
.hero-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(0, 0, 0, 0.7);

    pointer-events: none;
}

/* Imagem de fundo */
.hero-overlay > .wp-block-cover__image-background {
    position: absolute;
    inset: 0;
    z-index: 0;

    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.hero-overlay:hover > .wp-block-cover__image-background {
    transform: scale(1.04);
}

/* Overlay nativo do Gutenberg */
.hero-overlay > .wp-block-cover__background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Conteúdo do Hero */
.hero-overlay > .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   HERO — CATEGORIA E AUTOR
   ========================================================== */

.hero-overlay .taxonomy-category a {
    color: inherit;
    text-decoration: none !important;

    transition:
        color 0.15s ease,
        opacity 0.15s ease;
}

.hero-overlay .taxonomy-category a:hover {
    color: #ff3b30;
    opacity: 0.9;
}

.hero-overlay .taxonomy-category a:active {
    opacity: 0.7;
}

.hero-overlay .wp-block-post-author-name a {
    color: inherit;
    text-decoration: none !important;
}


/* ==========================================================
   HERO — PLATAFORMAS
   ========================================================== */

.hero-overlay .us-home-platforms {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 10 !important;

    display: flex !important;
    flex-wrap: wrap;

    gap: 5px;

    width: auto !important;
    max-width: calc(100% - 30px);

    margin: 0 !important;
    padding: 0 !important;
}

.hero-overlay .us-home-platforms .us-platform-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin: 0 !important;
    padding: 4px 8px !important;

    border-radius: 2px !important;

    color: #fff !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap;
}

.hero-overlay .us-home-platforms .us-platform-badge:hover {
    color: #fff !important;
    text-decoration: none !important;
    opacity: 0.9;
}


/* ==========================================================
   HERO — COLUNA LATERAL
   ========================================================== */

.hero-side-posts a {
    text-decoration: none !important;
}

/* Título da seção lateral */
.hero-side-posts .wp-block-heading,
.hero-side-posts .wp-block-heading a {
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: #ff3b30;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3;

    letter-spacing: 0.04em;
    text-transform: uppercase !important;

    text-decoration: none !important;
}

/* Container de conteúdo de cada notícia */
.hero-side-posts [data-spectra-id="spectra-ms2ep8rn-4ap7wm"] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    gap: 3px !important;
}

/* Cada notícia lateral */
.hero-side-posts .wp-block-post {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr);

    gap: 0 10px;

    min-width: 0;

    margin: 0 !important;
    margin-block: 0 !important;

    padding: 0 0 12px !important;

    border-bottom: 1px solid #28282c;
}

/*
 * Mantido porque faz parte da estrutura atual do Hero lateral.
 * Não utilizar esta técnica em Últimas notícias.
 */
.hero-side-posts .wp-block-post > [data-spectra-id="spectra-ms1wkwey-y2j75z"] {
    display: contents !important;
}

/* Imagem */
.hero-side-posts .wp-block-post-featured-image {
    grid-column: 1;
    grid-row: 1 / -1;

    align-self: center;

    width: 72px;

    margin: 0 !important;
}

.hero-side-posts .wp-block-post-featured-image img {
    display: block;

    width: 72px;
    height: 54px;

    object-fit: cover;
}


/* ==========================================================
   HERO LATERAL — CATEGORIA
   ========================================================== */

.hero-side-posts .taxonomy-category {
    grid-column: 2;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.2 !important;
}

.hero-side-posts .taxonomy-category a {
    color: inherit;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 0.02em;
    text-transform: uppercase !important;

    text-decoration: none !important;

    transition: opacity 0.15s ease;
}

.hero-side-posts .taxonomy-category a:hover {
    opacity: 0.8;
}


/* ==========================================================
   HERO LATERAL — PLATAFORMAS
   ========================================================== */

.hero-side-posts .us-home-platforms,
.hero-side-posts .taxonomy-plataforma {
    grid-column: 2;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;

    gap: 4px !important;

    margin: 4px 0 5px !important;
    padding: 0 !important;

    position: static;
}

.hero-side-posts .us-home-platforms .us-platform-badge,
.hero-side-posts .taxonomy-plataforma > a {
    flex: 0 0 auto;
    margin: 0 !important;
}

.hero-side-posts .taxonomy-plataforma .wp-block-post-terms__separator {
    display: none !important;
}


/* ==========================================================
   HERO LATERAL — TÍTULO
   ========================================================== */

.hero-side-posts .wp-block-post-title,
.hero-side-title,
.hero-side-title-last {
    grid-column: 2;

    display: block !important;

    margin: 0 0 3px !important;
    padding: 0 !important;
}

.hero-side-posts .wp-block-post-title a,
.hero-side-title a,
.hero-side-title-last a {
    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    text-decoration: none !important;
}


/* ==========================================================
   HERO LATERAL — DATA
   ========================================================== */

.hero-side-posts .wp-block-post-date {
    grid-column: 2;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit;

    font-size: 11px !important;
    line-height: 1.2 !important;

    opacity: 0.75;
}


/* ==========================================================
   SEÇÕES DA HOME
   ========================================================== */

[data-spectra-id="spectra-ms2ldwld-26k9u4"],
[data-spectra-id="spectra-affd5a33-6707-40c8-bf8a-dd7dcb35f43e"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

[data-spectra-id="spectra-ms2ldwld-26k9u4"] .wp-block-heading,
[data-spectra-id="spectra-affd5a33-6707-40c8-bf8a-dd7dcb35f43e"] .wp-block-heading {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

[data-spectra-id="spectra-ms2mnb74-097cfa"],
[data-spectra-id="spectra-6ec576ba-026b-4964-b43d-d441e8154b3e"],
.wp-block-spectra-separator {
    margin-top: 6px !important;
    margin-bottom: 16px !important;
}


/* ==========================================================
   GAME TITLE
   ========================================================== */

.us-game-title {
    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
    text-overflow: ellipsis;

    margin: 0;
    padding: 0;

    color: inherit;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;

    text-decoration: none;

    transition: color 0.15s ease;
}

.us-game-title:hover,
.us-game-title:focus {
    color: var(--theme-palette-color-4);
    text-decoration: none;
}


/* ==========================================================
   IMAGENS DOS CARDS
   ========================================================== */

.wp-block-post-featured-image {
    position: relative;

    margin: 0;

    border-radius: 12px;

    overflow: hidden;
}

.wp-block-post-featured-image a {
    display: block;

    border-radius: 12px;

    overflow: hidden;
}

.wp-block-post-featured-image img {
    display: block;

    border-radius: 12px;

    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.wp-block-post-featured-image:hover img,
.wp-block-post-featured-image a:hover img,
.wp-block-post-template > li:hover .wp-block-post-featured-image img,
[data-spectra-id]:hover > .wp-block-post-featured-image img {
    transform: scale(1.05);
}


/* ==========================================================
   CARDS DE REVIEWS
   ========================================================== */

[data-spectra-id="spectra-ms3k2o96-gmquol"] {
    overflow: hidden;
}

[data-spectra-id="spectra-ms3k2o96-gmquol"] .wp-block-cover {
    position: relative;

    border-radius: 12px;
    overflow: hidden;

    cursor: pointer;
}

[data-spectra-id="spectra-ms3k2o96-gmquol"] .wp-block-cover__image-background {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

[data-spectra-id="spectra-ms3k2o96-gmquol"]:hover .wp-block-cover__image-background,
[data-spectra-id="spectra-ms3jfkkn-bfndky"]:hover .wp-block-cover__image-background {
    transform: scale(1.05);
}

.us-review-cover-link {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;

    border-radius: 12px;
}

/* Nota do Review */
[data-spectra-id="spectra-ms3k2o96-gmquol"] .us-review-score-small {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;

    transform: translateY(-50%);

    pointer-events: none;
}


/* ==========================================================
   ÚLTIMAS NOTÍCIAS
   ========================================================== */

/* Lista */
.home-news-list .wp-block-post-template {
    display: flex;
    flex-direction: column;

    gap: 18px;

    margin: 0;
    padding: 0 12px;
}


/* ==========================================================
   ÚLTIMAS NOTÍCIAS — CARD
   ========================================================== */

/*
 * Estrutura:
 *
 * [ IMAGEM ] [ home-news-content ]
 *
 * O container home-news-content agrupa:
 *
 * plataformas
 * data
 * título
 * resumo
 */

.home-news-list .wp-block-post {
    display: grid;

    grid-template-columns: 220px minmax(0, 1fr);

    gap: 20px;

    min-width: 0;

    margin: 0;
    padding: 0 0 18px;

    border-bottom: 1px solid #2b2b2b;
}


/* ==========================================================
   ÚLTIMAS NOTÍCIAS — IMAGEM
   ========================================================== */

.home-news-list .wp-block-post-featured-image {
    grid-column: 1;

    width: 220px;
    height: 123.75px;

    margin: 0;

    aspect-ratio: 16 / 9;

    border-radius: 8px;

    overflow: hidden;

    background: #171717;
}

.home-news-list .wp-block-post-featured-image a {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 8px;

    overflow: hidden;
}

.home-news-list .wp-block-post-featured-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 8px;

    transition: transform 0.25s ease;
}

.home-news-list .wp-block-post-featured-image:hover img {
    transform: scale(1.04);
}


/* ==========================================================
   ÚLTIMAS NOTÍCIAS — CONTEÚDO
   ========================================================== */

.home-news-list .home-news-content {
    grid-column: 2;

    display: flex;
    flex-direction: column;

    align-self: start;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;
}


/* ==========================================================
   ÚLTIMAS NOTÍCIAS — PLATAFORMAS
   ========================================================== */

.home-news-list .home-news-content .us-home-platforms {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 4px;

    margin: 0 0 6px;
    padding: 0;
}

.home-news-list .home-news-content .us-platform-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin: 0;
    padding: 3px 6px;

    border-radius: 2px;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.02em;
}


/* ==========================================================
   ÚLTIMAS NOTÍCIAS — DATA
   ========================================================== */

.home-news-list .home-news-content .wp-block-post-date {
    margin: 0 0 6px !important;
    padding: 8px 0 0 !important;

    color: #777;

    font-size: 12px;
    line-height: 1.3;
}


/* ==========================================================
   ÚLTIMAS NOTÍCIAS — TÍTULO
   ========================================================== */

.home-news-list .home-news-content .wp-block-post-title {
    margin: 0 0 8px;
    padding: 0;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
}

.home-news-list .home-news-content .wp-block-post-title a {
    color: #fff;

    text-decoration: none;
}

.home-news-list .home-news-content .wp-block-post-title a:hover {
    color: #ff3b30;
}


/* ==========================================================
   ÚLTIMAS NOTÍCIAS — RESUMO
   ========================================================== */

.home-news-list .home-news-content .wp-block-post-excerpt {
    margin: 0;
    padding: 0;

    color: #aaa;

    font-size: 14px;
    line-height: 1.5;
}

.home-news-list .home-news-content .wp-block-post-excerpt p {
    margin: 0;
}


/* ==========================================================
   PAGINAÇÃO
   ========================================================== */

.home-news-list .wp-block-query-pagination {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;

    margin: 28px 0 8px;
    padding: 0;
}

.home-news-list .wp-block-query-pagination-numbers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin: 0;
}

.home-news-list .wp-block-query-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    height: 34px;

    padding: 0 8px;

    background: #18181b;

    border: 1px solid #28282c;
    border-radius: 4px;

    color: #fff;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.home-news-list .wp-block-query-pagination .page-numbers.current {
    background: #ff3b30;
    border-color: #ff3b30;

    color: #fff;
}

.home-news-list .wp-block-query-pagination .page-numbers:not(.current):not(.dots):hover {
    background: #28282c;
    border-color: #ff3b30;

    color: #fff;
}

.home-news-list .wp-block-query-pagination .page-numbers.dots {
    min-width: 20px;

    padding: 0;

    background: transparent;
    border-color: transparent;

    color: #77777d;

    pointer-events: none;
}


/* ==========================================================
   PAGINAÇÃO — PRÓXIMA PÁGINA
   ========================================================== */

.home-news-list .wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 0 14px;

    background: #18181b;

    border: 1px solid #28282c;
    border-radius: 4px;

    color: #fff;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.home-news-list .wp-block-query-pagination-next:hover {
    background: #28282c;
    border-color: #ff3b30;

    color: #fff;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .home-news-list .wp-block-post {
        grid-template-columns: 190px minmax(0, 1fr);

        gap: 16px;
    }

    .home-news-list .wp-block-post-featured-image {
        width: 190px;
        height: 106.875px;
    }

    .home-news-list .home-news-content .wp-block-post-title {
        font-size: 18px;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 650px) {

    .home-news-list .wp-block-post {
        grid-template-columns: 120px minmax(0, 1fr);

        gap: 14px;
    }

    .home-news-list .wp-block-post-featured-image {
        width: 120px;
        height: 67.5px;
    }

    .home-news-list .home-news-content .wp-block-post-title {
        font-size: 16px;
        line-height: 1.15;
    }

    .home-news-list .home-news-content .wp-block-post-excerpt {
        display: none;
    }

    .home-news-list .wp-block-query-pagination {
        gap: 6px;

        margin-top: 22px;
    }

    .home-news-list .wp-block-query-pagination-numbers {
        gap: 4px;
    }

    .home-news-list .wp-block-query-pagination .page-numbers {
        min-width: 30px;
        height: 30px;

        padding: 0 6px;

        font-size: 11px;
    }

    .home-news-list .wp-block-query-pagination-next {
        min-height: 30px;

        padding: 0 10px;

        font-size: 11px;
    }
}


/* ==========================================================
   MOBILE PEQUENO
   ========================================================== */

@media (max-width: 480px) {

    .home-news-list .wp-block-post {
        grid-template-columns: 110px minmax(0, 1fr);

        gap: 12px;
    }

    .home-news-list .wp-block-post-featured-image {
        width: 110px;
        height: 61.875px;
    }

    .home-news-list .home-news-content .wp-block-post-title {
        font-size: 15px;
        line-height: 1.2;
    }
}