/**
 * Estilos da área "Últimas notícias" reestruturada na home (03/10):
 * 2 colunas de notícias + coluna lateral (newsletter + Histórias Reais).
 * Carregado só na home (ver functions.php, cannalize_home_assets).
 *
 * Paleta/tipografia provisórias -- seguem o padrão já usado nos cards de
 * post (.post-card) do tema. Ajustar quando o Figma puder ser lido.
 */

.news-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
}

.news-feature-grid__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-feature-grid__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 900px) {
    .news-feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Newsletter ---- */
.newsletter-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.newsletter-card__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4a7856;
    margin-bottom: 6px;
}

.newsletter-card__title {
    font-size: 18px;
    margin: 0 0 8px;
}

.newsletter-card__desc {
    font-size: 13.5px;
    color: #5c6b60;
    margin: 0 0 14px;
}

.newsletter-card__form-placeholder {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.newsletter-card__form-placeholder input,
.newsletter-card__form-placeholder button {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #d8d8d8;
    font-size: 14px;
    box-sizing: border-box;
}

.newsletter-card__form-placeholder button {
    background: #4a7856;
    color: #fff;
    border: none;
    cursor: not-allowed;
    opacity: 0.6;
}

.newsletter-card__provisorio-note {
    font-size: 11px;
    color: #b8863b;
    font-style: italic;
}

/* ---- 13/10: formulário real do ActiveCampaign (form 60) dentro do card.
   O ActiveCampaign injeta HTML/CSS próprio (largura fixa, fundo, borda) com
   !important; aqui neutralizamos o "cartão" dele e deixamos o campo e o botão
   no padrão do site (campo branco com borda cinza, botão coral). Se algo
   ficar diferente do esperado, o ajuste mais limpo é no próprio
   ActiveCampaign (Formulários > Design) ou refinar os seletores abaixo.
   Os seletores começam com #newsletter (id do card) de propósito: o
   ActiveCampaign usa o id do formulário (#_form_..._) nas regras dele, com
   !important, e só um seletor com id também vence (o botão ficava branco
   sobre fundo transparente, invisível). ---- */
.newsletter-card__form {
    width: 100%;
}

#newsletter .newsletter-card__form ._form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    color: #292929 !important;
}

#newsletter .newsletter-card__form ._form form,
#newsletter .newsletter-card__form ._form ._form-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#newsletter .newsletter-card__form ._form input[type="text"],
#newsletter .newsletter-card__form ._form input[type="email"] {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-family: inherit !important;
}

#newsletter .newsletter-card__form ._form ._submit,
#newsletter .newsletter-card__form ._form button[type="submit"] {
    width: 100% !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #fa6550 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer;
}

#newsletter .newsletter-card__form ._form ._submit:hover,
#newsletter .newsletter-card__form ._form button[type="submit"]:hover {
    filter: brightness(0.95);
}

/* Mensagem de agradecimento (depois de inscrever) e demais textos: o
   formulário do ActiveCampaign é desenhado para fundo escuro e deixa essas
   letras brancas (#fff), que somem no card branco. Forçamos o texto escuro
   do site. */
#newsletter .newsletter-card__form ._form-thank-you,
#newsletter .newsletter-card__form ._form-thank-you *,
#newsletter .newsletter-card__form ._form-body,
#newsletter .newsletter-card__form ._form-title,
#newsletter .newsletter-card__form ._html-code :is(h1, h2, h3, h4, h5, h6),
#newsletter .newsletter-card__form ._form-checkbox-option-label {
    color: #292929 !important;
    font-family: inherit !important;
}

#newsletter .newsletter-card__form ._form-thank-you {
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 4px 0 !important;
}

#newsletter .newsletter-card__form ._form label,
#newsletter .newsletter-card__form ._form ._form-label,
#newsletter .newsletter-card__form ._form ._html-code {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #5c5c5c !important;
}

/* ---- Carrossel Histórias Reais ---- */
.historias-carousel {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.historias-carousel__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4a7856;
    margin-bottom: 10px;
}

.historias-carousel__viewport {
    position: relative;
    min-height: 220px;
}

.historias-carousel__slide {
    display: none;
}

.historias-carousel__slide.is-active {
    display: block;
}

.historias-carousel__thumb {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.historias-carousel__thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.historias-carousel__title {
    font-size: 15px;
    margin: 0;
    line-height: 1.35;
}

.historias-carousel__link {
    text-decoration: none;
    color: inherit;
}

.historias-carousel__dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
}

.historias-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #d8d8d8;
    cursor: pointer;
    padding: 0;
}

.historias-carousel__dot.is-active {
    background: #4a7856;
}

.historias-carousel__veja-mais {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #4a7856;
    text-decoration: none;
}

/* ---- 07/10: Newsletter e Histórias Reais com o coral padrão Cannalize
   (#fa6550) nos destaques (rótulo, botão, pontos, link) sobre fundo branco.
   Primeira versão (fundo coral chapado) foi invertida a pedido do time. ---- */
.newsletter-card,
.historias-carousel {
    background: #fff;
    border: 1px solid #e5e5e5;
    color: #292929;
}

.newsletter-card__eyebrow,
.historias-carousel__eyebrow,
.historias-carousel__veja-mais {
    color: #fa6550;
}

.newsletter-card__title,
.historias-carousel__title,
.historias-carousel__link {
    color: #292929;
}

.newsletter-card__desc {
    color: #5c5c5c;
}

.newsletter-card__provisorio-note {
    color: #8a8a8a;
}

.newsletter-card__form-placeholder input {
    background: #fff;
    border: 1px solid #d8d8d8;
}

.newsletter-card__form-placeholder button {
    background: #fa6550;
    color: #fff;
    font-weight: 600;
    opacity: 1;
}

.newsletter-card__form-placeholder button:disabled {
    opacity: 0.85;
}

.historias-carousel__dot {
    width: 8px;
    height: 8px;
    min-width: 0;
    min-height: 0;
    flex: 0 0 8px;
    background: #e3e3e3;
}

.historias-carousel__dot.is-active {
    background: #fa6550;
}

.historias-carousel__veja-mais {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- 07/10: tamanho fixo do bloco Histórias Reais ----
   Todas as imagens com a mesma proporção (3:2, recortadas com object-fit
   cover, qualquer que seja o original) e título reservando 3 linhas
   (cortado com "…" se passar), para o bloco não mudar de altura entre os
   slides do carrossel. */
.historias-carousel__viewport {
    min-height: 0;
}

.historias-carousel__thumb {
    aspect-ratio: 3 / 2;
    background: #f0f0f0;
}

.historias-carousel__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.historias-carousel__title {
    min-height: 4.05em; /* 3 linhas × line-height 1.35 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- 07/10: bloco "Siga a Cannalize" (redes sociais) na coluna lateral,
   no mesmo padrão dos blocos de Newsletter e Histórias Reais ---- */
.social-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.social-card__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fa6550;
    margin-bottom: 12px;
}

.social-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-card__links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fa6550;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
}

.social-card__links .cz-icon-svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
}

.social-card__links a:hover,
.social-card__links a:focus-visible {
    filter: brightness(0.92);
}

/* =========================================================
   HOME NO MOBILE (até 700px): ordem dos blocos (07/10)
   1 destaque · 2 banner Cannect · 3 Últimas notícias (2 cards) ·
   4 carrossel de colunistas · 5 newsletter · 6 Saúde e Ciência (2) ·
   7 Histórias Reais · 8 Cannabis Medicinal (2) · 9 Indústria da Cannabis (2) ·
   (banner da home entre Medicinal e Indústria) · 10 Indústria · 11 Cultura e
   Sociedade (2) · 12 Política e Regulação (2) · 13 redes sociais · 14 banner do
   fim (13/10). Demais editorias não aparecem no mobile.
   Técnica: o <main> vira coluna flex; "Últimas notícias" e a lateral usam
   display: contents para seus blocos virarem itens da coluna e poderem ser
   reordenados com "order" (sem duplicar HTML).
   ========================================================= */
@media (max-width: 700px) {
    .cz-main { display: flex; flex-direction: column; }

    .hero-mosaico { order: 1; }
    .home-banner { order: 2; }

    .home-ultimas,
    .news-feature-grid,
    .news-feature-grid__col,
    .news-feature-grid__side { display: contents; }

    /* só 2 cards em "Últimas notícias": some a 2ª coluna */
    .news-feature-grid__col + .news-feature-grid__col { display: none; }

    .home-ultimas > h2 { order: 3; margin: 24px var(--space-3) 12px; }
    .home-ultimas .post-card { order: 3; margin: 0 var(--space-3) 18px; }

    .cz-colunistas { order: 4; }
    .newsletter-card { order: 5; margin: 6px var(--space-3) 24px; }
    .editorial-section--m-saude { order: 6; }
    .historias-carousel { order: 7; margin: 6px var(--space-3) 24px; }
    .editorial-section--m-medicinal { order: 8; }
    .home-banner--meio { order: 9; }
    .editorial-section--m-industria { order: 10; }
    .editorial-section--m-cultura { order: 11; }
    .editorial-section--m-politica { order: 12; }
    .social-card { order: 13; margin: 6px var(--space-3) 24px; }
    .home-banner--fim { order: 14; }

    /* editorias não listadas somem no mobile */
    .editorial-section:not(.editorial-section--m-saude):not(.editorial-section--m-medicinal):not(.editorial-section--m-industria):not(.editorial-section--m-cultura):not(.editorial-section--m-politica) {
        display: none;
    }

    /* 2 cards por editoria */
    .editorial-section .archive-grid > :nth-child(n+3) { display: none; }
}

/* =========================================================
   MOSAICO DE DESTAQUES DA HOME (15/10) — opção A aprovada
   Desktop: 1 grande (2/3) à esquerda + 2 pequenos empilhados à direita,
   altura limitada para o texto caber na 1ª tela; título e linha fina
   ficam sobre a imagem, com degradê escuro para legibilidade.
   Mobile: carrossel de rolagem lateral (scroll-snap), 1 destaque por vez.
   ========================================================= */
.hero-mosaico {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    height: clamp(380px, 42vw, 540px);
    margin-block: 20px;
}
.hero-mosaico__card {
    position: relative; display: block; overflow: hidden; border-radius: 6px;
    background: #2f3b34; color: #fff; text-decoration: none;
}
.hero-mosaico__card--grande { grid-row: 1 / 3; }
.hero-mosaico__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform .4s;
}
.hero-mosaico__card:hover .hero-mosaico__img,
.hero-mosaico__card:focus-visible .hero-mosaico__img { transform: scale(1.03); }
.hero-mosaico__card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,0) 72%);
}
.hero-mosaico__texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px; }
.hero-mosaico__card--grande .hero-mosaico__texto { padding: 22px 24px; }
.hero-mosaico__cat {
    display: inline-block; margin-bottom: 10px; padding: 3px 8px; border-radius: 3px;
    background: #fa6550; color: #fff; font-size: 12px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
}
.hero-mosaico__texto h1,
.hero-mosaico__texto h2 { margin: 0 0 8px; color: #fff; font-weight: 700; line-height: 1.2; font-size: clamp(17px, 1.7vw, 22px); }
.hero-mosaico__card--grande h1 { font-size: clamp(24px, 2.7vw, 38px); }
.hero-mosaico__texto p { margin: 0 0 8px; font-weight: 300; line-height: 1.4; color: #fff; opacity: .95; font-size: 17px; max-width: 62ch; }
.hero-mosaico__card:not(.hero-mosaico__card--grande) .hero-mosaico__texto p { display: none; }
.hero-mosaico__meta { font-size: 13px; opacity: .85; }

@media (max-width: 700px) {
    .hero-mosaico {
        display: flex; height: auto; gap: 10px; margin: 12px 0;
        overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--space-3) 8px;
        scrollbar-width: none;
    }
    .hero-mosaico::-webkit-scrollbar { display: none; }
    .hero-mosaico__card { flex: 0 0 86%; height: 380px; scroll-snap-align: center; }
    .hero-mosaico__texto,
    .hero-mosaico__card--grande .hero-mosaico__texto { padding: 18px; }
    .hero-mosaico__texto h1,
    .hero-mosaico__texto h2,
    .hero-mosaico__card--grande h1 { font-size: 24px; }
    .hero-mosaico__texto p,
    .hero-mosaico__card:not(.hero-mosaico__card--grande) .hero-mosaico__texto p { display: block; font-size: 15px; }
}