/* Kahiki — Blog (shared between Barcelona & Mataró). Same design tokens as the legal pages. */
:root{
  --ink:#150f0a; --ink-2:#1e150d; --ink-3:#28190f;
  --bamboo:#caa15c; --bamboo-dark:#6e4f28; --cream:#f3e6c8; --cream-dim:#cbb996;
  --accent:#8fce3e; --maxw:1080px; --maxw-article:760px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--cream-dim);
  font-family:'Jost', system-ui, sans-serif; font-size:16px; line-height:1.7;
}
h1,h2,h3{ font-family:'Bungee', system-ui, sans-serif; font-weight:400; color:var(--cream); line-height:1.2; }
a{ color:var(--accent); }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Header (shared with legal pages' look) */
.legal-header{ padding:32px 0 24px; border-bottom:1px solid rgba(202,161,92,.2); }
.legal-header .logo img{ height:32px; }
.legal-header nav{ margin-top:18px; font-size:.85rem; }
.legal-header nav a{ color:var(--cream-dim); text-decoration:none; margin-right:1.2rem; }
.legal-header nav a:hover{ color:var(--accent); }

/* Blog hero (index page) */
.blog-hero{ padding:56px 0 40px; text-align:center; }
.blog-hero .eyebrow{ display:block; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bamboo); margin-bottom:.8rem; }
.blog-hero h1{ font-size:clamp(2rem,5vw,2.8rem); margin:0 0 .8rem; }
.blog-hero p{ max-width:560px; margin:0 auto; font-size:1.02rem; }

/* Post grid */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.6rem; padding:0 0 72px; }
.post-card{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.18); border-radius:16px; overflow:hidden;
  text-decoration:none; display:flex; flex-direction:column; transition:border-color 180ms ease, transform 180ms ease;
}
.post-card:hover{ border-color:rgba(202,161,92,.5); transform:translateY(-2px); }
.post-card__img{ aspect-ratio:16/10; overflow:hidden; background:var(--ink-3); }
.post-card__img img{ width:100%; height:100%; object-fit:cover; }
.post-card__body{ padding:1.2rem 1.3rem 1.5rem; flex:1; display:flex; flex-direction:column; }
.post-card__tags{ display:flex; gap:.4rem; margin-bottom:.6rem; }
.post-tag{
  font-size:.65rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
  padding:.25rem .6rem; border-radius:100px; background:rgba(202,161,92,.15); color:var(--bamboo);
}
.post-tag--mataro{ background:rgba(143,206,62,.15); color:var(--accent); }
.post-card__title{ font-family:'Bungee', system-ui, sans-serif; font-weight:400; font-size:1.05rem; color:var(--cream); line-height:1.35; margin:0 0 .6rem; }
.post-card__excerpt{ font-size:.88rem; color:var(--cream-dim); flex:1; margin:0 0 .8rem; }
.post-card__meta{ font-size:.72rem; color:var(--bamboo-dark); }

/* Article */
.blog-article{ padding:44px 0 80px; }
.article-header{ max-width:var(--maxw-article); margin:0 auto 2rem; }
.article-header .post-card__tags{ justify-content:center; }
.article-header h1{ font-size:clamp(1.7rem,4.4vw,2.4rem); text-align:center; margin:.8rem 0 .8rem; }
.article-meta{ text-align:center; font-size:.8rem; color:var(--bamboo-dark); margin-bottom:0; }
.article-hero{ max-width:var(--maxw); margin:0 auto 2.4rem; border-radius:18px; overflow:hidden; aspect-ratio:21/9; }
.article-hero img{ width:100%; height:100%; object-fit:cover; }
.article-body{ max-width:var(--maxw-article); margin:0 auto; }
.article-body p{ margin:0 0 1.3rem; font-size:1.02rem; }
.article-body h2{ font-size:1.35rem; margin:2.2rem 0 1rem; }
.article-body ul{ margin:0 0 1.3rem; padding-left:1.3rem; }
.article-body li{ margin-bottom:.5rem; }
.article-body strong{ color:var(--cream); }

.cta-box{
  background:linear-gradient(155deg, var(--ink-3) 0%, var(--ink-2) 70%); border:1px solid rgba(202,161,92,.35);
  border-radius:16px; padding:1.6rem 1.8rem; margin:2.4rem 0; text-align:center;
}
.cta-box h3{ font-size:1.1rem; margin:0 0 .5rem; }
.cta-box p{ margin:0 0 1.1rem; font-size:.92rem; }
.cta-box__actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.btn-blog{
  display:inline-flex; align-items:center; gap:.4rem; padding:.75rem 1.5rem; border-radius:100px;
  font-size:.88rem; font-weight:600; text-decoration:none; font-family:'Jost',sans-serif;
}
.btn-blog--solid{ background:var(--bamboo); color:#241a0a; }
.btn-blog--solid:hover{ background:#e0b876; }
.btn-blog--outline{ border:1px solid rgba(244,232,206,.3); color:var(--cream); }
.btn-blog--outline:hover{ border-color:var(--bamboo); color:var(--bamboo); }

.related{ max-width:var(--maxw-article); margin:3rem auto 0; padding-top:2rem; border-top:1px solid rgba(202,161,92,.15); }
.related h3{ font-size:1rem; text-transform:uppercase; letter-spacing:.05em; color:var(--bamboo); margin:0 0 1rem; }
.related-list{ display:grid; gap:.9rem; }
.related-list a{ color:var(--cream); text-decoration:none; font-size:.95rem; display:block; }
.related-list a:hover{ color:var(--accent); }
.related-list span{ display:block; font-size:.75rem; color:var(--cream-dim); margin-top:.15rem; }

.legal-footer{ border-top:1px solid rgba(202,161,92,.2); padding:28px 0; text-align:center; font-size:.78rem; color:var(--cream-dim); }
.legal-footer a{ text-decoration:none; }
.legal-footer a:hover{ text-decoration:underline; }

@media (max-width:640px){
  .article-hero{ border-radius:0; aspect-ratio:4/3; }
  .cta-box__actions{ flex-direction:column; }
  .btn-blog{ justify-content:center; }
}