/* Blog da Lunna — leitura em primeiro lugar.
   Complementa css/base.css; nada aqui redefine token de cor. */

.artigo{max-width:740px; padding:26px 24px 56px}
.artigo h1{font-size:clamp(1.9rem,3.8vw,2.7rem); margin-bottom:14px}
.artigo .meta{font-size:.88rem; opacity:.8; margin:0 0 30px}
/* As fotos são RETRATO 9:16 (vêm do celular, em pé). Forçar em banner deitado
   cortava 63% da peça e mostrava só uma faixa do meio, sem alça nem base.
   Aqui elas aparecem inteiras, na proporção que têm, com o texto contornando —
   diagramação de revista em vez de banner espremido. */
.artigo .capa{float:right; width:300px; max-width:44%; margin:4px 0 22px 30px}
.artigo .capa img{border-radius:var(--raio); width:100%; height:auto;
  max-height:none;   /* anula o banner de 460px da versão anterior, se em cache */
  box-shadow:0 22px 56px -30px rgba(62,40,23,.5)}
.artigo figure{margin:0 0 34px}
/* o texto volta a ocupar a largura toda depois da abertura */
.artigo h2{clear:both}

/* medida de linha confortável — o que mais importa em texto longo */
.artigo p{margin:0 0 20px; max-width:68ch}
.artigo .entrada{font-size:1.18rem; line-height:1.6; color:var(--cacau);
  border-left:4px solid var(--dourado); padding-left:20px; margin-bottom:34px}
.artigo h2{margin:44px 0 14px; scroll-margin-top:90px}
.artigo h3{margin:28px 0 8px; color:var(--bronze)}
.artigo ul,.artigo ol{margin:0 0 22px; padding-left:22px; max-width:68ch}
.artigo li{margin-bottom:10px}
.artigo a{color:var(--bronze); text-underline-offset:3px}

/* ícone da seção — o mesmo desenho dos carrosséis do Instagram */
.artigo .ico{width:62px; height:62px; float:right; margin:0 0 12px 22px; opacity:.9}

/* símbolos de crochê */
.simbolos{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:16px; margin:0 0 30px; padding:24px; background:var(--card);
  border:1px solid rgba(169,116,58,.25); border-radius:var(--raio)}
.simbolo{margin:0; text-align:center}
.simbolo svg{width:56px; height:56px; margin:0 auto}
.simbolo figcaption{font-size:.8rem; margin-top:6px; color:var(--bronze)}

/* perguntas frequentes */
.faq{border-bottom:1px solid rgba(169,116,58,.25); padding:4px 0}
.faq summary{cursor:pointer; padding:14px 0; min-height:44px; font-weight:600; color:var(--cacau);
  font-family:var(--serif); font-size:1.12rem; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+'; color:var(--bronze); margin-right:12px; font-family:var(--sans)}
.faq[open] summary::before{content:'–'}
.faq p{margin:0 0 16px; font-size:.97rem}

.artigo .acoes{display:flex; flex-wrap:wrap; gap:12px; margin-top:40px}

/* índice do blog */
.lista-posts{padding:24px 0 40px}
.post-item{display:grid; grid-template-columns:220px 1fr; gap:30px;
  padding:30px 0; border-top:1px solid rgba(169,116,58,.22)}
.post-item .foto{display:block; border-radius:var(--raio); overflow:hidden;
  aspect-ratio:4/5; background:var(--areia)}
.post-item .foto img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.post-item .foto:hover img{transform:scale(1.04)}
.post-item h2{font-size:1.5rem; margin-bottom:10px}
.post-item h2 a{text-decoration:none}
.post-item h2 a:hover{color:var(--bronze)}
.post-item p{margin:0 0 12px; max-width:60ch}
.leia{color:var(--bronze); text-decoration:none; font-size:.94rem}
.leia:hover{text-decoration:underline}

@media (max-width:760px){
  .post-item{grid-template-columns:1fr; gap:18px}
  .post-item .foto{max-width:240px}
  .artigo .ico{width:48px; height:48px; margin-left:16px}
  /* no celular não há largura para o texto contornar: a foto vira bloco */
  .artigo .capa{float:none; width:100%; max-width:320px; margin:0 auto 28px}
}