/* =====================================================================
   Páginas de categoria do Dicas, fase B do redesign (29/10/2026).
   Folha adicional: só as categorias a linkam (gerada por
   generate_category_pages.mjs, com ?v=). Tudo aqui é escopado em
   html.categoria-fase1. Tokens copiados de home.css:9-35; o teste
   categoria-tokens-iguais-home prova a igualdade.
   ===================================================================== */

html.categoria-fase1 {
    --h-navy: #0f1d3a;
    --h-ink: #0f1419;
    --h-slate: #3d4a63;
    --h-cream: #fef9f3;
    --h-white: #ffffff;
    --h-orange: #ff6b35;
    --h-yellow: #ffd23f;
    --h-green: #0f7a3d;
    --h-line: rgba(15, 29, 58, .18);
    --h-line-strong: rgba(15, 29, 58, .25);
    --h-feat: #eef2fb;
    --h-display: Montserrat, "Source Sans Pro", system-ui, sans-serif;
    --h-text: Archivo, "Source Sans Pro", system-ui, sans-serif;
    --h-hand: Caveat, "Segoe Print", "Bradley Hand", cursive;
    --h-bubble: #e9f7ec;
    --h-paper: #fff4b8;

    /* Os componentes antigos que ainda leem estes tokens passam a cair no navy. */
    --featured-accent: var(--h-navy);
    --featured-accent-strong: var(--h-navy);
    --featured-surface: var(--h-feat);
    --featured-title-color: var(--h-navy);
    --green: var(--h-green);

    background: var(--h-cream);
}

/* Corpo: home.css:37-41. O creme vai também no body: o styles.css do Dicas o pinta de branco e
   cobriria o fundo do html. */
html.categoria-fase1 body {
    background: var(--h-cream);
    color: var(--h-ink);
    font-family: var(--h-text);
}

/* Títulos de seção: home.css:53-58. */
html.categoria-fase1 .home-section-title,
html.categoria-fase1 .article-group-block__title {
    margin: 0 0 12px;
    font: 800 24px/1.1 var(--h-display);
    letter-spacing: -.3px;
    color: var(--h-navy);
}

/* O cabeçalho do bloco do blog é flex e centra o título com o link; sem a margem de baixo. */
html.categoria-fase1 .article-group-block__title {
    margin: 0;
}

/* Casinha antes do título: home.css:1102-1115. */
html.categoria-fase1 .home-section-title,
html.categoria-fase1 .article-group-block__title {
    position: relative;
    padding-left: 30px;
}

html.categoria-fase1 .home-section-title::before,
html.categoria-fase1 .article-group-block__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230f1d3a" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8"/><path d="M5 10v10h5v-6h4v6h5V10"/></svg>');
}

/* Frase de apoio do título: home.css:1117-1123. */
html.categoria-fase1 .home-section-sub {
    display: block;
    margin-top: 2px;
    font: 600 13px/1.3 var(--h-text);
    letter-spacing: 0;
    color: var(--h-slate);
}

/* Título da página: bloco novo da categoria (Frontend design, 28/10). */
html.categoria-fase1 .category-head {
    max-width: 1260px;
    margin: 0 auto;
    padding: 1.25rem 1rem 0;
}

html.categoria-fase1 .category-kicker {
    display: block;
    font: 700 22px/1 var(--h-hand);
    color: var(--h-green);
}

html.categoria-fase1 .category-page-title {
    margin: .15rem 0 .35rem;
    font: 800 2rem/1.1 var(--h-display);
    color: var(--h-navy);
}

html.categoria-fase1 .category-lead {
    max-width: 62ch;
    margin: 0;
    font: 400 15px/1.45 var(--h-text);
    color: var(--h-slate);
}

/* Título e frase de apoio das ofertas ficam empilhados à esquerda; os controles ocupam a direita. */
html.categoria-fase1 .category-offers-header {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
}

html.categoria-fase1 .category-offers-header .home-section-title {
    grid-column: 1;
    margin: 0;
}

html.categoria-fase1 .category-offers-header .home-section-sub {
    grid-column: 1;
}

html.categoria-fase1 .category-offers-controls {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

@media (max-width: 768px) {
    html.categoria-fase1 .category-offers-header {
        grid-template-columns: 1fr;
    }

    html.categoria-fase1 .category-offers-controls {
        grid-column: 1;
        grid-row: auto;
        justify-self: end;
    }
}

/* Selos sobre a foto do cartão. Posição, tamanho e fonte vêm de home.css:501-529 (desconto laranja
   à esquerda, cupom amarelo); aqui o desconto fica no canto superior esquerdo do quadro da foto e o
   cupom embaixo à esquerda, como na visão de grade da home (home.css:1188-1193).
   O jeito de figurinha (borda branca, sombra curta, tortinho) é de home.css:1173-1186. */
html.categoria-fase1 .card-selo {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-block;
    max-width: calc(100% - 16px);
    padding: 6px 7px;
    border: 2.5px solid var(--h-white);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 29, 58, .25);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

html.categoria-fase1 .card-selo--desconto {
    background: var(--h-orange);
    color: var(--h-white);
    font: 800 12px/1 var(--h-display);
    transform: rotate(-4deg);
}

html.categoria-fase1 .card-selo--cupom {
    background: var(--h-yellow);
    color: var(--h-navy);
    font: 600 11px/1 var(--h-text);
    transform: rotate(3deg);
    top: auto;
    right: auto;
    bottom: 8px;
    left: 8px;
}

/* Blog: a seção vira o recado na geladeira. Papel, sombra e ímã são de home.css:1148-1171
   (.home-band--guias); a base do bloco (borda de cima, margens grandes) vem de
   RECOMMENDATION_STYLES e é anulada aqui sem mexer nela. O papel fica na coluna das ofertas
   (.category-offers-section: 1260px com 1rem de cada lado); em vez de levar o padding de 1rem, que
   o engordaria por dentro, ele encolhe 1rem de cada lado e centra. */
html.categoria-fase1 .expert-tips-section {
    position: relative;
    width: calc(100% - 2rem);
    max-width: calc(1260px - 2rem);
    min-width: 0;
    margin: .75rem auto 1.5rem;
    padding: 14px 14px 12px;
    border-top: 0;
    border-radius: 6px;
    background: var(--h-paper);
    box-shadow: 2px 4px 10px rgba(15, 29, 58, .14);
}

/* O "Carregar mais" leva 2rem de respiro embaixo (regra inline do gerador) e a seção das ofertas
   outros 2rem: com a margem do papel dava 92px do botão ao papel, contra 28px do papel à seção
   seguinte. O respiro do botão sai aqui; sobram os 2rem da seção mais a margem do papel. Vale
   também na categoria sem blog: do botão à tira ficam 2rem + 1.75rem, como entre as outras seções. */
html.categoria-fase1 .category-offers-section .load-more-wrap {
    padding-bottom: 0;
}

html.categoria-fase1 .expert-tips-section::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 18px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--h-orange);
    box-shadow: inset 0 0 0 3px #fff, 0 1px 3px rgba(0, 0, 0, .2);
}

/* Cabeçalho: título e frase empilhados à esquerda, o link "ver todos" (o último filho, posto pela
   hidratação) à direita. */
html.categoria-fase1 .expert-tips-section .article-group-block__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
    margin-bottom: 0;
}

/* Título em letra à mão: home.css:1148-1152 (.home-band-title); sem a casinha da página. */
html.categoria-fase1 .expert-tips-section .article-group-block__title {
    grid-column: 1;
    padding-left: 0;
    font: 700 26px/1 var(--h-hand);
    letter-spacing: 0;
    color: var(--h-navy);
}

html.categoria-fase1 .expert-tips-section .article-group-block__title::before {
    content: none;
}

html.categoria-fase1 .expert-tips-section .article-group-block__sub {
    display: block;
    grid-column: 1;
    margin: 4px 0 12px;
    font: 600 14px/1.3 var(--h-text);
    color: var(--h-slate);
}

html.categoria-fase1 .expert-tips-section .article-group-block__link {
    grid-column: 2;
    grid-row: 1 / span 2;
    font: 600 13px var(--h-text);
    color: var(--h-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Hover: a base (recommendation-blocks.mjs:30 e :40) troca a cor para laranja, mas perde para as cores
   daqui. O verde é de propósito: laranja sobre o papel e sobre o branco tem contraste baixo. */
html.categoria-fase1 .expert-tips-section .article-group-block__link:hover,
html.categoria-fase1 .expert-tips-section .article-tile:hover .article-tile__heading {
    color: var(--h-green);
}

/* Cartões: grade de 3; com 2 artigos, de 2; com 1, um cartão deitado. O mockup categoria-blog-v1
   (leitura A) é uma miniatura de 540px: os tamanhos de lá vão multiplicados por ~1,33, o mesmo fator
   do resto da página (o título do cartão de oferta foi de 11,5px no mockup para 16px no ar), com
   arredondamentos: título do cartão em 15px (16px apertava o cartão de 296px da grade de 3) e a foto
   do cartão deitado em 200px (186px pelo fator). */
html.categoria-fase1 .expert-tips-section .article-group-block__tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}

html.categoria-fase1 .expert-tips-section[data-artigos="2"] .article-group-block__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-group-block__tiles {
    grid-template-columns: minmax(0, 1fr);
}

html.categoria-fase1 .expert-tips-section .article-tile {
    border: 1px solid var(--h-line);
    border-radius: 10px;
    background: var(--h-white);
}

html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-tile {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
}

html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-tile__image {
    height: 100%;
    min-height: 130px;
    aspect-ratio: auto;
}

html.categoria-fase1 .expert-tips-section .article-tile__body {
    padding: 10px 12px 12px;
}

html.categoria-fase1 .expert-tips-section .article-tile__heading {
    margin: 0 0 4px;
    font: 700 15px/1.25 var(--h-display);
    color: var(--h-navy);
}

/* Resumo em duas linhas (a base corta em três: recommendation-blocks.mjs:42). */
html.categoria-fase1 .expert-tips-section .article-tile__lead {
    font-size: 14px;
    line-height: 1.35;
    color: var(--h-slate);
    -webkit-line-clamp: 2;
}

html.categoria-fase1 .expert-tips-section .article-tile__ler {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 6px;
    font: 600 13px var(--h-text);
    color: var(--h-green);
}

/* Com um só artigo a nota aparece como balão (o atributo hidden a esconde nos outros casos). */
html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-group-block__nota {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 14px 14px 14px 4px;
    background: var(--h-bubble);
    font-size: 14px;
}

/* O rótulo "Cecília ·" do balão sai em negrito (o <b> vem da casca, buildBlogShellHTML), no 600:
   a fonte só carrega 400 e 600. */
html.categoria-fase1 .article-group-block__nota b {
    font-weight: 600;
    color: var(--h-green);
}

/* Celular: os cartões viram uma fileira com rolagem lateral (o gerador e a base os dobram em
   2 e 1 colunas; aqui isso é desfeito). */
@media (max-width: 768px) {
    /* O papel volta à largura toda, como antes do alinhamento com a coluna de 1260px. */
    html.categoria-fase1 .expert-tips-section {
        width: auto;
        max-width: 100%;
        margin-inline: 0;
    }

    html.categoria-fase1 .expert-tips-section .article-group-block__tiles {
        display: flex;
        gap: 10px;
        padding: 3px 0 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    html.categoria-fase1 .expert-tips-section .article-tile {
        flex: 0 0 min(78vw, 260px);
        height: auto;
        scroll-snap-align: start;
    }

    /* Um cartão só não rola: fica deitado na largura toda. */
    html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-group-block__tiles {
        display: block;
        padding: 0;
        overflow: visible;
    }
}

/* Celular estreito: um título de duas linhas em letra à mão espremeria o link ao lado; o link desce. */
@media (max-width: 480px) {
    html.categoria-fase1 .expert-tips-section .article-group-block__header {
        grid-template-columns: minmax(0, 1fr);
    }

    html.categoria-fase1 .expert-tips-section .article-group-block__link {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-bottom: 8px;
    }

    /* O cartão deitado de 1 artigo: a foto de 200px tomaria mais da metade da tela; volta aos 140px do mockup. */
    html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-tile {
        grid-template-columns: 140px minmax(0, 1fr);
    }

    html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-tile__image {
        min-height: 110px;
    }
}

/* Tira "Saindo da vitrine": um carrossel de uma fileira com o mesmo cartão da grade. O trilho segue
   o das homes (home.css:95-135: snap em x, overscroll contido, scroll-padding); 4 cartões à vista.
   A tira fica na coluna das ofertas (1260px com 1rem de cada lado); as setas continuam a −16px do
   trilho. */
html.categoria-fase1 .tira-ultimos-dias {
    max-width: 1260px;
    min-width: 0;
    margin: 1.75rem auto 1.5rem;
    padding-inline: 1rem;
}

/* Título e frase como os das ofertas; o espaço de baixo passa para a frase. */
html.categoria-fase1 .tira-ultimos-dias .home-section-title {
    margin-bottom: 0;
}

html.categoria-fase1 .tira-ultimos-dias .home-section-sub {
    margin-bottom: 12px;
}

html.categoria-fase1 .tira-scroll__wrapper {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

html.categoria-fase1 .tira-scroll {
    display: flex;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    padding: 4px 2px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* --tira-pad é a distância da borda do item até a foto (borda 1px + respiro do cartão); o prazo usa. */
html.categoria-fase1 .tira-item {
    --tira-pad: 13px;
    position: relative;
    flex: 0 0 calc((100% - 3 * 12px) / 4);
    min-width: 0;
    scroll-snap-align: start;
}

/* Dentro da tira o cartão é sempre vertical, como na grade do desktop (inline do gerador, min-width: 768px). */
html.categoria-fase1 .tira-item .post-tile-vertical {
    flex-direction: column;
    gap: 0;
    height: 100%;
    padding: .75rem .75rem 1rem;
    box-sizing: border-box;
}

html.categoria-fase1 .tira-item .post-tile-vertical__left {
    flex: none;
    width: 100%;
}

html.categoria-fase1 .tira-item .post-image-gallery__link {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

html.categoria-fase1 .tira-item .post-tile-vertical__posted-time--mobile {
    display: none;
}

html.categoria-fase1 .tira-item .post-tile-vertical__posted-time--desktop {
    display: block;
}

html.categoria-fase1 .tira-item .post-tile-vertical__headline {
    margin-top: .75rem;
    margin-bottom: .25rem;
}

/* Prazo: a figurinha do mockup categoria-indicados-v1 (.vence, :32-43), amarela com texto navy, no
   canto de cima à direita da foto, oposto ao selo de desconto. Tamanho, borda e fonte na escala do
   selo (home.css:501-529 e 1173-1189). */
html.categoria-fase1 .tira-prazo {
    position: absolute;
    top: calc(var(--tira-pad) + 8px);
    right: calc(var(--tira-pad) + 8px);
    z-index: 2;
    display: inline-block;
    max-width: calc(100% - 2 * var(--tira-pad) - 16px);
    padding: 6px 7px;
    border: 2.5px solid var(--h-white);
    border-radius: 6px;
    background: var(--h-yellow);
    box-shadow: 0 1px 3px rgba(15, 29, 58, .25);
    color: var(--h-navy);
    font: 800 12px/1 var(--h-display);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: rotate(3deg);
    pointer-events: none;
}

html.categoria-fase1 .tira-prazo[data-prazo="0"] {
    background: var(--h-navy);
    color: var(--h-white);
}

/* Botões: o tamanho e as cores dos da home (home.css:75-90); a posição, a do trilho antigo
   (recommendation-blocks.mjs:49-53). O script os esconde quando nada passa da largura. */
html.categoria-fase1 .tira-scroll__wrapper .scroll-btn {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1.5px solid var(--h-navy);
    border-radius: 50%;
    background: var(--h-white);
    color: var(--h-navy);
    font-size: .9rem;
    cursor: pointer;
    transform: translateY(-50%);
}

html.categoria-fase1 .tira-scroll__wrapper .scroll-btn:hover:not(:disabled) {
    background: var(--h-feat);
}

html.categoria-fase1 .tira-scroll__wrapper .scroll-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
}

html.categoria-fase1 .tira-scroll__wrapper .scroll-btn--prev {
    left: -16px;
}

html.categoria-fase1 .tira-scroll__wrapper .scroll-btn--next {
    right: -16px;
}

/* Celular: a tira na largura toda, como antes do alinhamento com a coluna de 1260px; 2,5 cartões à
   vista (dois espaços entre eles), o dedo rola e os botões saem. O item vira contêiner para o prazo
   medir a foto em cqw. */
@media (max-width: 768px) {
    html.categoria-fase1 .tira-ultimos-dias {
        padding-inline: 0;
    }

    html.categoria-fase1 .tira-item {
        --tira-pad: 9px;
        flex-basis: calc((100% - 2 * 12px) / 2.5);
        container-type: inline-size;
    }

    html.categoria-fase1 .tira-item .post-tile-vertical {
        padding: .5rem .5rem .75rem;
    }

    html.categoria-fase1 .tira-item .post-tile-vertical__headline-text {
        font-size: .85rem;
    }

    html.categoria-fase1 .tira-item .post-tile-vertical__details .rte-block {
        font-size: .78rem;
        -webkit-line-clamp: 3;
    }

    html.categoria-fase1 .tira-item .post-tile-vertical__cta-actions {
        flex-wrap: wrap;
        gap: .35rem;
    }

    /* A foto mede ~108px aqui: os selos encolhem e ficam os dois em cima à esquerda, porque o prazo
       ocupa o canto de baixo à direita e, ao lado do cupom embaixo, não caberia (~110-126px juntos).
       Desconto e cupom nunca coexistem no mesmo cartão (cupom ganha). O cupom leva bottom: auto com o
       top, senão herdaria o bottom da base e esticaria da cabeça ao pé da foto. Na grade nada muda. */
    html.categoria-fase1 .tira-item .card-selo {
        padding: 4px 5px;
        border-width: 2px;
        font-size: 10.5px;
    }

    html.categoria-fase1 .tira-item .card-selo--desconto {
        top: 6px;
        left: 6px;
    }

    html.categoria-fase1 .tira-item .card-selo--cupom {
        top: 6px;
        bottom: auto;
        left: 6px;
    }

    /* O prazo desce para o canto de baixo à direita da foto, longe do desconto e do cupom (os dois em
       cima à esquerda). Ele é filho do .tira-item, não da foto, então o
       fundo da foto sai da largura do item: a foto é quadrada, com o --tira-pad dos dois lados, e
       termina a 100cqw - --tira-pad do topo. O prazo mede 1em de linha + 4px de padding + 4px de
       borda. Sem cqw o top inválido cai fora e vale o canto de cima da regra do desktop. */
    html.categoria-fase1 .tira-prazo {
        top: calc(100cqw - var(--tira-pad) - 6px - (1em + 8px));
        right: calc(var(--tira-pad) + 2px);
        max-width: calc(100% - 2 * var(--tira-pad) - 8px);
        padding: 2px 4px;
        border-width: 2px;
        font-size: 11px;
    }

    html.categoria-fase1 .tira-scroll__wrapper .scroll-btn {
        display: none;
    }
}