/* Blog Casa Feliz - listagem.
   CSS original das paginas estaticas, preservado sem alteracao. */

:root {
    --ink:#1f261f;
    --muted:#697263;
    --line:#e6e1d8;
    --paper:#fffdf8;
    --soft:#f6f0e7;
    --green:#3f5f45;
    --green-dark:#253d2a;
    --clay:#a45f45;
    --gold:#c19a58;
    --white:#fff;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); }
a { color:inherit; }
header { border-bottom:1px solid var(--line); background:rgba(255,253,248,.94); position:sticky; top:0; z-index:5; backdrop-filter:blur(12px); }
.nav { width:min(1180px, calc(100% - 32px)); margin:auto; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand img { height:46px; width:auto; display:block; }
nav ul { list-style:none; display:flex; gap:18px; margin:0; padding:0; color:var(--muted); font-size:14px; font-weight:800; }
nav a { text-decoration:none; }
nav a[aria-current="page"] { color:var(--green-dark); }
main { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:42px 0 78px; }
.hero { display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 430px); gap:34px; align-items:center; padding:28px 0 30px; }
.eyebrow { color:var(--clay); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
/* Uma serifada só na página, a Playfair Display, que o site já baixa. Georgia
   era fonte de sistema, e em negrito deixava todo título pesado. */
h1, h2, h3 { letter-spacing:0; color:#172015; }
h1 { max-width:760px; margin:10px 0 14px; font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-weight:500; font-size:clamp(32px, 4.4vw, 54px); line-height:1.06; letter-spacing:-.015em; text-wrap:balance; }
.lead { max-width:700px; color:var(--muted); font-size:19px; line-height:1.72; margin:0; }
.hero-panel { position:relative; display:block; overflow:hidden; min-height:420px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 22px 58px rgba(42, 50, 35, .1); text-decoration:none; }
.hero-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,32,21,.02) 0%, rgba(23,32,21,.18) 42%, rgba(23,32,21,.76) 100%); }
.hero-panel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform 1800ms cubic-bezier(.22,.61,.36,1); }
.hero-panel:hover img { transform:scale(1.025); }
.hero-panel div { position:absolute; inset:auto 0 0; z-index:1; padding:26px; color:#fff; }
.hero-panel strong { display:block; font-size:13px; color:#f0d8c9; text-transform:uppercase; letter-spacing:.08em; }
.hero-panel h2 { margin:8px 0 10px; color:#fff; font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-weight:500; font-size:32px; line-height:1.12; text-wrap:balance; }
.hero-panel p { margin:0; color:#f5efe6; line-height:1.55; }
.hero-panel span { display:inline-flex; margin-top:16px; color:#fff; font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:24px 0 18px; padding-top:24px; border-top:1px solid var(--line); }
.toolbar h2 { margin:0; font-size:28px; font-weight:500; font-family:"Playfair Display", Georgia, "Times New Roman", serif; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; min-height:32px; padding:0 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#fff; text-decoration:none; font-size:12px; font-weight:900; }
/* --- Mosaico da lista de artigos ---------------------------------------------
 *
 * Antes eram duas colunas fixas, 1.2fr e .8fr. A coluna estreita espremia o
 * título, que quebrava em seis linhas, e todo card tinha o mesmo tamanho.
 *
 * Agora a grade tem seis colunas e o ritmo se repete a cada seis artigos:
 * um largo com a foto ao lado do texto, dois médios, três menores. O "dense"
 * faz o navegador preencher os buracos que o filtro por assunto abre quando
 * esconde um card.
 */
.article-list {
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    grid-auto-flow:dense;
    gap:28px;
}
.article-card {
    position:relative;
    display:grid;
    grid-column:span 2;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    text-decoration:none;
    min-height:100%;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1), border-color .3s cubic-bezier(.2,.8,.2,1);
}

/* o ritmo: 1 largo, 2 médios, 3 pequenos, e recomeça */
.article-card:nth-child(6n+2),
.article-card:nth-child(6n+3) { grid-column:span 3; }

/* O "destaque" do painel NÃO mexe mais no tamanho do card.
 *
 * Ele nasceu para a grade antiga de duas colunas, onde fazia o card ocupar as
 * duas. No mosaico, um card fora do ritmo deixa a linha sem fechar e sobra um
 * buraco branco no fim dela. Como são cinco artigos marcados, apareciam cinco
 * buracos.
 *
 * O destaque continua visível, agora pela etiqueta em cor cheia no lugar do
 * texto solto. O tamanho de cada card passa a vir só da posição na lista. */
.article-card.featured div > span:first-child {
    display:inline-block;
    padding:5px 10px;
    border-radius:999px;
    background:var(--clay);
    color:#fff;
}

/* O primeiro de cada ritmo é o largo, com foto de um lado e texto do outro.
   Vem depois e com seletor mais específico para ganhar do destaque acima. */
.article-list > .article-card:nth-child(6n+1) {
    grid-column:span 6;
    grid-template-columns:minmax(0, 1.06fr) minmax(0, .94fr);
}

.article-card:hover { transform:translateY(-5px); border-color:#d6c9b7; box-shadow:0 12px 40px rgba(42,50,35,.09), 0 4px 12px rgba(42,50,35,.05); }

/* A foto define a altura do card. Antes ela usava a proporção original e o
   card ficava com 750 pixels de altura, deixando um vazio enorme ao lado do
   texto. Proporção fixa por tamanho de card resolve e ainda alinha a grade. */
.article-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--soft); }
.article-card:nth-child(6n+2) img,
.article-card:nth-child(6n+3) img { aspect-ratio:16/10; }
.article-list > .article-card:nth-child(6n+1) img { aspect-ratio:3/2; height:100%; }

.article-card div { padding:26px; display:flex; flex-direction:column; align-items:flex-start; }
.article-list > .article-card:nth-child(6n+1) div { padding:38px; justify-content:center; }
/* no card largo o "ler artigo" fica junto do texto, e não jogado no rodapé */
.article-list > .article-card:nth-child(6n+1) .read-more { margin-top:20px; padding-top:0; }
.article-card span { color:var(--clay); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }

/* Playfair Display no lugar de Georgia: a página já baixa essa fonte e não
   usava. E peso 500 no lugar do negrito do navegador, que era o que deixava o
   título pesado demais. */
.article-card h3 {
    margin:12px 0 12px;
    font-family:"Playfair Display", Georgia, "Times New Roman", serif;
    font-weight:500;
    font-size:clamp(26px, 2.6vw, 38px);
    line-height:1.14;
    letter-spacing:-.01em;
    text-wrap:balance;
}
/* três tamanhos de título, um por tamanho de card */
.article-card h3 { font-size:20px; line-height:1.25; }
.article-card:nth-child(6n+2) h3,
.article-card:nth-child(6n+3) h3 { font-size:clamp(21px, 2vw, 26px); line-height:1.2; }
.article-list > .article-card:nth-child(6n+1) h3 { font-size:clamp(28px, 2.6vw, 38px); line-height:1.14; }

.article-card p { margin:0; color:var(--muted); font-size:15px; line-height:1.7; }
.article-list > .article-card:nth-child(6n+1) p { font-size:17px; }
.read-more { margin-top:auto; padding-top:22px; color:var(--green-dark); font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; }
.topic-band { margin-top:34px; padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--green-dark); color:#fff; }
.topic-band h2 { margin:0 0 14px; color:#fff; font-weight:500; font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-size:30px; }
.topic-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.topic { display:block; min-height:92px; padding:14px; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(255,255,255,.08); text-decoration:none; }
.topic strong { display:block; color:#fff; font-size:15px; }
.topic span { display:block; margin-top:6px; color:#e7eee4; font-size:13px; line-height:1.45; }
.catalog-rail { margin-top:28px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.catalog-link { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:72px; padding:16px; border:1px solid var(--line); border-radius:8px; background:#fff; text-decoration:none; color:var(--green-dark); font-weight:900; }
.catalog-link span { color:var(--muted); font-weight:700; font-size:13px; }
footer { border-top:1px solid var(--line); padding:28px 16px; text-align:center; color:var(--muted); }
/* Tela média: o mosaico de seis colunas vira duas, e o card largo ocupa as duas.
   Sem isto, o card de três colunas ficaria com 1/3 da largura num tablet. */
@media (max-width: 1100px) {
    .article-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .article-card,
    .article-card:nth-child(6n+2),
    .article-card:nth-child(6n+3) { grid-column:span 1; }
    .article-list > .article-card:nth-child(6n+1) { grid-column:span 2; }
}

/* O topo e as faixas de baixo empilham antes dos cards: eles têm coluna com
   largura mínima fixa e apertariam primeiro. */
@media (max-width: 900px) {
    .hero, .topic-grid, .catalog-rail { grid-template-columns:1fr; }
    .hero-panel { min-height:360px; }
    .toolbar { align-items:flex-start; flex-direction:column; }
    .article-list { gap:22px; }
    .article-list > .article-card:nth-child(6n+1) div { padding:28px; }
}

/* Uma coluna só a partir daqui. O corte é 720 e não 900 porque em tablet, com
   736 pixels de largura, uma coluna só deixava metade da tela vazia. */
@media (max-width: 720px) {
    .article-list { grid-template-columns:1fr; gap:20px; }
    .article-card,
    .article-list > .article-card:nth-child(6n+1),
    .article-card:nth-child(6n+2),
    .article-card:nth-child(6n+3) { grid-column:span 1; grid-template-columns:1fr; }
    .article-list > .article-card:nth-child(6n+1) img { height:auto; aspect-ratio:16/10; }
    .article-card div,
    .article-list > .article-card:nth-child(6n+1) div { padding:22px; }
    /* no celular todo título tem o mesmo tamanho: cabe mais artigo na tela e
       nenhum card parece mais importante que o outro por acidente */
    .article-card h3,
    .article-card:nth-child(6n+2) h3,
    .article-card:nth-child(6n+3) h3,
    .article-list > .article-card:nth-child(6n+1) h3 { font-size:22px; line-height:1.22; }
    .article-card p,
    .article-list > .article-card:nth-child(6n+1) p { font-size:15px; }
    .article-list > .article-card:nth-child(6n+1) .read-more { margin-top:auto; padding-top:18px; }

    .nav { min-height:auto; padding:14px 0; align-items:flex-start; flex-direction:column; }
    nav ul { flex-wrap:wrap; gap:12px; }
    main { padding-top:28px; }
    .hero-panel { min-height:320px; }
    .hero-panel div { padding:20px; }
    .hero-panel h2 { font-size:25px; }
}

/* Quem pediu menos movimento no sistema não vê o card subir. */
@media (prefers-reduced-motion: reduce) {
    .article-card { transition:none; }
    .article-card:hover { transform:none; }
}

/* ---------------------------------------------------------------------------
 * Quebra de linha: nunca uma palavra sozinha no fim.
 *
 * Título que quebra deixando uma palavra solta na segunda linha parece erro de
 * montagem. O navegador sabe distribuir isso: "balance" equilibra as linhas de
 * um bloco curto, e "pretty" cuida do fim de parágrafo, onde a palavra órfã
 * aparece. Navegador que não conhece as duas palavras ignora a regra e quebra
 * como sempre quebrou, sem estrago.
 * ------------------------------------------------------------------------- */

h1, h2, h3, h4,
.card-title, .card-title a,
.catalog-card-content h2,
.related-card h3,
.hero-panel h2,
.article-card h3 {
    text-wrap: balance;
}

p, .dek, .lead, .card-info p, .catalog-card-content p, .related-card p {
    text-wrap: pretty;
}