/* ============================================================
   VELVETY — Blog list + Blog detail (after styles.css + about.css + shop.css)
   ============================================================ */

/* ---------- BLOG HERO (featured) ---------- */
.bloghero{position:relative;width:100%;height:640px;overflow:hidden;display:flex;align-items:flex-end;background:var(--g40)}
.bloghero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);animation:kenburns 20s ease-in-out infinite alternate}
.bloghero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(16,28,16,.6), rgba(16,28,16,.12) 55%, rgba(16,28,16,.25))}
.bloghero__inner{position:relative;z-index:2;padding:0 var(--gutter) 64px;max-width:var(--maxw);width:100%;margin:0 auto}
.bloghero__eyebrow{font-size:16px;letter-spacing:2px;text-transform:uppercase;color:#dfe8dc;margin:0 0 16px}
.bloghero__title{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,72px);line-height:1.1;color:var(--c0);max-width:760px}

/* ---------- POST CARD (featured row + grid) ---------- */
.postrow{width:100%;max-width:var(--maxw);margin:0 auto;padding:56px var(--gutter);display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.post-card{display:flex;flex-direction:column;gap:20px;cursor:pointer}
.post-card__img{aspect-ratio:1.15/1;background:var(--surface);border:1px solid var(--border);overflow:hidden;position:relative}
.post-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post-card:hover .post-card__img img{transform:scale(1.05)}
.post-card__cat{font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--g40);margin:0}
.post-card__meta{font-size:15px;color:var(--g40);margin:0}
.post-card__title{font-family:var(--serif);font-weight:300;font-size:26px;line-height:1.2;color:var(--g100);margin:0}
.post-card__excerpt{font-size:16px;line-height:1.5;color:var(--g60);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card .btn-text{margin-top:auto}

/* ---------- POPULAR ARTICLES ---------- */
.popular{width:100%;max-width:var(--maxw);margin:0 auto;padding:96px var(--gutter);display:flex;flex-direction:column;gap:40px}
.popular__head{display:flex;flex-direction:column;gap:16px}
.popular__title{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.5vw,56px);line-height:1.2;color:var(--g100)}
.popular__count{font-size:16px;color:var(--g60)}

/* ---------- BLOG DETAIL ---------- */
.article{width:100%}
.article__hero{position:relative;width:100%;height:600px;overflow:hidden;display:flex;align-items:flex-end;background:var(--g40)}
.article__hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);animation:kenburns 22s ease-in-out infinite alternate}
.article__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(16,28,16,.62), rgba(16,28,16,.1) 60%, rgba(16,28,16,.2))}
.article__hero-inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--gutter) 56px}
.article__eyebrow{font-size:15px;letter-spacing:1px;color:#dfe8dc;margin:0 0 14px}
.article__title{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.5vw,64px);line-height:1.1;color:var(--c0);max-width:820px}

.article__body{max-width:760px;margin:0 auto;padding:72px var(--pad);display:flex;flex-direction:column;gap:24px}
.article__body p{margin:0;font-size:18px;line-height:1.7;color:var(--g80)}
.article__body h2{font-family:var(--serif);font-weight:300;font-size:34px;line-height:1.2;color:var(--g100);margin-top:24px}
.article__quote{border-left:3px solid var(--g40);background:var(--surface);padding:28px 32px;font-family:var(--serif);font-size:26px;line-height:1.35;color:var(--g100)}
.article__figure{margin:16px 0}
.article__figure img{width:100%;border-radius:0;display:block}
.article__figure figcaption{margin-top:10px;font-size:14px;color:var(--g40);text-align:center}
.article__share{max-width:760px;margin:0 auto;padding:0 var(--pad) 72px;display:flex;flex-direction:column;align-items:center;gap:16px;border-bottom:1px solid var(--border)}
.article__share p{font-size:16px;color:var(--g40);margin:0}
.article__share .socials{display:flex;gap:18px}
.article__share .socials a img{width:28px;height:28px;transition:transform .3s var(--ease)}
.article__share .socials a:hover img{transform:translateY(-4px)}

@media(max-width:900px){
  .postrow,.postgrid{grid-template-columns:1fr 1fr}
  .bloghero{height:480px}
  .article__hero{height:440px}
}
@media(max-width:560px){
  .postrow,.postgrid{grid-template-columns:1fr}
  .article__body,.article__share{padding-left:24px;padding-right:24px}
}