@charset "UTF-8";

/* Blog BARFEAND (/blog/ i /es/blog/): índex i articles. Es carrega després de guias.css. */

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Metadades de l'article (data i temps de lectura) */
.post-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:18px 0 0;font-size:.92rem;font-weight:750;color:var(--muted)}
.post-meta span+span::before{content:"·";margin-right:16px;color:var(--pink)}

/* Imatge principal de l'article */
.post-cover{margin:0;padding-inline:16px}
.post-cover img{display:block;width:100%;max-width:1100px;height:auto;aspect-ratio:16/9;object-fit:cover;margin:-28px auto 0;border-radius:24px;box-shadow:0 18px 40px rgba(0,0,0,.12)}
.post-cover figcaption{max-width:1100px;margin:10px auto 0;font-size:.85rem;color:var(--muted)}
.post-body .lead-in{font-size:1.18rem;color:var(--ink)}

/* Llistat d'articles */
.blog-list{padding-block:64px 32px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:28px}
.blog-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;color:inherit;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.blog-card:hover,.blog-card:focus-visible{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.1)}
.blog-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.blog-card__body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px}
.blog-card__tag{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-dark)}
.blog-card h2,.blog-card h3{margin:0;font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.2}
.blog-card p{margin:0;color:var(--muted)}
.blog-card time{font-size:.85rem;font-weight:750;color:var(--muted)}

@media (max-width:640px){
  .post-cover img{margin-top:-18px;border-radius:18px}
  .blog-list{padding-block:44px 16px}
  .post-meta{gap:4px 14px}
  .post-meta span+span::before{display:none}
}

/* Imatge dins del text de l'article */
.post-figure{margin:28px 0}
.post-figure img{display:block;width:100%;max-width:577px;height:auto;margin:0 auto;border-radius:18px}
.post-figure figcaption{margin-top:8px;text-align:center;font-size:.85rem;color:var(--muted)}