/* Harmonie Beauté — polish-blog.css (blog.html listing). Loads after polish-base.css */

:root{
  --hbb-ink:color-mix(in srgb,var(--earth) 62%,var(--charcoal));   /* body copy ≥7:1 */
  --hbb-muted:color-mix(in srgb,var(--earth) 84%,var(--charcoal)); /* meta ≥4.8:1 */
  --hbb-edge:color-mix(in srgb,var(--sand) 78%,var(--white));
  --hbb-warm:color-mix(in srgb,var(--gold) 50%,var(--sand));
  --hbb-hair:color-mix(in srgb,var(--gold) 28%,var(--sand));
  --hbb-band:color-mix(in srgb,var(--moss-pale) 24%,var(--cream));
  --hbb-sh:0 1px 2px rgba(0,0,0,.04),0 12px 32px -14px var(--shadow-md);
  --hbb-sh-hi:0 2px 4px rgba(0,0,0,.05),0 22px 44px -18px color-mix(in srgb,var(--moss) 40%,transparent);
  --hbb-glow:radial-gradient(90% 120% at 100% 0%,rgba(232,188,126,.11),transparent 55%);
  --hbb-ease:cubic-bezier(.22,.61,.36,1);
  --hbb-gutter:max(2rem,calc(50% - 528px)); /* aligns hero/filter with .blog-main content */
}

/* ── HERO: left-aligned editorial, glow + gold arch hairline ── */
.blog-hero{position:relative;overflow:hidden;isolation:isolate;text-align:left;padding:4.5rem var(--hbb-gutter) 3.9rem;
  box-shadow:inset 0 -1px 0 rgba(200,144,106,.28)}
.blog-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 130% at 85% 0%,rgba(232,188,126,.15),transparent 60%),radial-gradient(60% 90% at 0% 100%,rgba(0,0,0,.2),transparent 70%)}
.blog-hero::after{content:'';position:absolute;z-index:-1;pointer-events:none;top:2.4rem;bottom:-3rem;right:calc(var(--hbb-gutter) + 1rem);
  width:clamp(200px,20vw,280px);border:1px solid rgba(200,144,106,.36);border-bottom:0;border-radius:999px 999px 0 0;
  background:linear-gradient(180deg,rgba(232,188,126,.05),transparent 70%)}
.blog-hero-eyebrow{font-size:.63rem;letter-spacing:.3em;font-weight:500;opacity:1;margin-bottom:1.2rem}
.blog-hero-title,.featured-title{text-wrap:balance}
.pick-card-title,.art-card-title{text-wrap:pretty}
.blog-hero-title{font-size:clamp(2.3rem,4vw,3.5rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:1rem}
.blog-hero-desc{margin:0;max-width:33rem;font-size:.95rem;line-height:1.8;color:rgba(255,255,255,.74)}
@media (prefers-reduced-motion:no-preference){
  .blog-hero>*{animation:hbb-rise .7s var(--hbb-ease) both}
  .blog-hero>.blog-hero-title{animation-delay:.06s}
  .blog-hero>.blog-hero-desc{animation-delay:.12s}
  @keyframes hbb-rise{from{opacity:0;transform:translateY(10px)}}
}

/* ── FILTER: sticky translucent bar of pill chips ── */
.filter-bar{padding:.7rem var(--hbb-gutter);gap:.5rem;scrollbar-width:none;
  background:color-mix(in srgb,var(--white) 90%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid var(--hbb-edge);box-shadow:0 14px 26px -24px var(--shadow-md)}
.filter-btn{display:inline-flex;align-items:center;min-height:38px;padding:0 1.05rem;margin:0;border:1px solid var(--hbc-edge,var(--sand-dark));border-radius:999px;
  background:color-mix(in srgb,#fff 50%,transparent);color:var(--hbb-ink);font-size:.68rem;letter-spacing:.12em;
  transition:.25s var(--hbb-ease);transition-property:background,color,border-color,box-shadow}
.filter-btn:hover{color:var(--moss);border-color:var(--hbb-warm);background:#fff}
.filter-btn.active{background:var(--moss);border-color:var(--moss);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.1),0 8px 18px -10px color-mix(in srgb,var(--moss) 75%,transparent)}
.filter-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── MAIN ── */
.blog-main{max-width:1120px;padding:3.5rem 2rem 5rem}

/* ── FEATURED: deep card; split layout on desktop ── */
.featured-section{margin-bottom:3rem;border-radius:20px;border:1px solid var(--hbb-edge);background:var(--white);box-shadow:var(--hbb-sh);
  transition:.3s var(--hbb-ease);transition-property:transform,box-shadow,border-color}
.featured-section:has(.featured-link:focus-visible){outline:2px solid var(--gold);outline-offset:3px}
.featured-link:focus-visible{outline:none}
.featured-head{position:relative;isolation:isolate;padding:2rem 2.25rem 1.9rem}
.featured-head::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--hbb-glow)}
.featured-eyebrow{margin-bottom:1.1rem}
.featured-eyebrow-pill,.pick-badge,.art-card-cat{color:#EFC990;background:rgba(0,0,0,.18);border-color:rgba(232,188,126,.42)} /* ≥5:1 on every head */
.featured-title em,.pick-card-title em{color:color-mix(in srgb,var(--gold) 72%,#F5DFC0)} /* lifts gold em to ≥3:1 */
.featured-eyebrow-pill{font-size:.6rem;padding:4px 10px}
.featured-eyebrow-cat{font-size:.6rem;padding:4px 10px;color:rgba(255,255,255,.9);background:rgba(255,255,255,.08)}
.featured-title{font-size:clamp(1.8rem,2.9vw,2.4rem);line-height:1.2;letter-spacing:-.005em}
.featured-body{padding:1.5rem 2.25rem 1.6rem}
.featured-excerpt{font-size:.95rem;font-weight:400;line-height:1.75;color:var(--hbb-ink);max-width:62ch;margin-bottom:1.2rem}
.featured-foot{flex-wrap:wrap;gap:.3rem .85rem;padding-top:1rem;border-top:1px solid var(--hbb-edge);font-size:.72rem;color:var(--hbb-muted);opacity:1}
.featured-foot>span{white-space:nowrap}
.featured-foot-sep{opacity:.6;color:var(--gold)}
.featured-read{color:var(--moss);letter-spacing:.06em;transition:transform .25s var(--hbb-ease)}
@media (min-width:901px){
  .featured-link{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .featured-head{display:flex;flex-direction:column;justify-content:space-between;gap:2.4rem;min-height:250px;padding:2.3rem 2.5rem 2.4rem}
  .featured-eyebrow{margin-bottom:0}
  .featured-body{display:flex;flex-direction:column;justify-content:center;padding:2rem 2.4rem}
}

/* ── SECTION HEADINGS (picks / articles) ── */
.picks-label,.articles-header{gap:1rem;margin-bottom:1.5rem;justify-content:flex-start}
.picks-label-text,.articles-label{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:400;line-height:1.2;
  letter-spacing:0;text-transform:none;color:var(--moss);opacity:1}
.picks-label-text::first-letter{color:var(--gold)}
.picks-label::after,.articles-header::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--hbb-warm),transparent)}

/* ── EDITOR'S PICKS: full-bleed tinted band (border-image = no overflow) ── */
.picks-section{margin:0 0 3.25rem;padding:2.75rem 0 3rem;
  border-image:linear-gradient(180deg,var(--hbb-hair) 0 1px,var(--hbb-band) 1px calc(100% - 1px),var(--hbb-hair) 0) fill 0//0 100vmax}
.picks-grid{gap:1.25rem}
.pick-card{display:flex;flex-direction:column;border-radius:20px;border:1px solid var(--hbb-edge);background:var(--white);box-shadow:var(--hbb-sh)}
.pick-card.lazy-pick,.art-card.lazy-card{transition:opacity .45s ease,transform .3s var(--hbb-ease),box-shadow .3s var(--hbb-ease),border-color .3s var(--hbb-ease)}
.pick-card-head{flex:1;padding:1.4rem 1.45rem 1.3rem;box-shadow:inset 0 -1px 0 rgba(200,144,106,.3)}
.pick-badge{font-size:.56rem;padding:3px 9px;margin-bottom:.8rem}
.pick-card-title{font-size:1.16rem;line-height:1.3;margin-bottom:.55rem}
.pick-card-why{font-size:.76rem;line-height:1.6;font-weight:400;color:rgba(255,255,255,.84)}
.pick-card-body{padding:.9rem 1.45rem}
.pick-card-meta,.art-card-meta{opacity:1;color:var(--hbb-muted);font-size:.68rem;letter-spacing:.02em}
.pick-card-arrow,.art-card-arrow{color:var(--moss)}

/* ── ARTICLE CARDS: equal-height, foot pinned, soft depth ── */
.art-grid-3{gap:1.25rem}
.art-card{display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--hbb-edge);background:var(--white);box-shadow:var(--hbb-sh)}
.art-card-head{position:relative;isolation:isolate;padding:1.1rem 1.25rem 1.15rem}
.art-card-head::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--hbb-glow)}
.art-card-cat{font-size:.56rem;padding:2px 8px;margin-bottom:.65rem}
.art-card-title{font-size:1.02rem;line-height:1.35}
.art-card-body{flex:1;display:flex;flex-direction:column;padding:.95rem 1.25rem 1rem}
.art-card-excerpt{font-size:.8rem;line-height:1.6;font-weight:400;color:var(--hbb-ink);margin-bottom:.8rem}
.art-card-foot{margin-top:auto;padding-top:.7rem;border-top:1px solid color-mix(in srgb,var(--sand) 55%,transparent)}

/* Hover (pointer devices): lift 2–3px, warmer edge, deeper shadow. .revealed beats inline lazy transform */
@media (hover:hover){
  .featured-section:hover{transform:translateY(-2px);box-shadow:var(--hbb-sh-hi);border-color:var(--hbb-warm)}
  .featured-section:hover .featured-read{transform:translateX(3px)}
  .pick-card.revealed:hover{transform:translateY(-3px)}
  .art-card.revealed:hover{transform:translateY(-2px)}
  .pick-card:hover,.art-card:hover{box-shadow:var(--hbb-sh-hi);border-color:var(--hbb-warm)}
}
.art-card:focus-visible,.pick-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .lazy-card,.lazy-pick{transform:none!important;transition:opacity .2s linear!important}
}

/* ── RESPONSIVE ── */
@media (max-width:900px){
  .blog-hero{padding:2.9rem 16px 2.6rem}
  .blog-hero::after{width:140px;right:-64px;top:1.4rem;opacity:.8}
  .blog-hero-title{font-size:clamp(2rem,7.4vw,2.5rem);margin-bottom:.8rem}
  .blog-hero-desc{font-size:.9rem;max-width:30rem;padding-right:2.5rem}
  .filter-btn{min-height:40px;padding:0 .95rem}
  .blog-main{padding:2rem 16px 3.5rem}
  .featured-section{margin-bottom:2.5rem}
  .featured-title{font-size:1.6rem}
  .picks-section{margin-bottom:2.75rem;padding:2.25rem 0 2.5rem}
  .picks-label-text,.articles-label{font-size:1.35rem}
  .picks-grid,.art-grid-3{gap:1rem}
}
@media (max-width:600px){
  .featured-head{padding:1.5rem 1.35rem 1.4rem}
  .featured-body{padding:1.2rem 1.35rem 1.3rem}
  .featured-excerpt{font-size:.9rem}
  .pick-card-head{padding:1.2rem 1.25rem 1.15rem}
  .pick-card-body{padding:.8rem 1.25rem}
  .art-card-head{padding:1rem 1.15rem 1.05rem}
  .art-card-cat{margin-bottom:.55rem}
  .art-card-body{padding:.8rem 1.15rem .85rem}
  .art-card-excerpt{margin-bottom:.6rem}
  .art-card-foot{padding-top:.55rem}
  .art-grid-3{gap:.9rem}
}

/* ══ LISTING WITH COVERS (stage 2): 52 posts, newest first, one topic tab each ══ */
:root{--hbb-label:#8A5A38} /* category text on light: 5.2:1 */

/* Filter: bar stays sticky, chips live in an inner row (wraps on desktop, scrolls with edge fades on mobile) */
.filter-bar{display:block;overflow:visible;padding:0}
.filter-scroll{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.7rem var(--hbb-gutter)}
.filter-scroll::-webkit-scrollbar{display:none}
.filter-btn{gap:.4rem;padding:0 .8rem;font-size:.66rem;letter-spacing:.07em} /* 7 chips fit one row from 1120px */
.filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;padding:0 .4em;border-radius:999px;
  font-size:.6rem;font-weight:600;letter-spacing:0;line-height:1;color:var(--hbb-muted);background:color-mix(in srgb,var(--moss) 9%,transparent)}
.filter-count:empty{display:none}
.filter-btn.active .filter-count{color:#fff;background:rgba(255,255,255,.2)}
.filter-bar::before,.filter-bar::after{content:'';position:absolute;top:0;bottom:0;z-index:2;width:64px;pointer-events:none;opacity:0;transition:opacity .2s}
.filter-bar::before{left:0;background:linear-gradient(90deg,var(--white) 25%,transparent)}
.filter-bar::after{right:0;background:linear-gradient(270deg,var(--white) 25%,transparent)}
.filter-bar.fade-l::before,.filter-bar.fade-r::after{opacity:1}
@media (max-width:900px){
  .filter-scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:.6rem 16px}
  .filter-btn{flex-shrink:0}
}

/* Panel heads */
.articles-header{align-items:center;flex-wrap:wrap;row-gap:.4rem}
.articles-header::after{order:1;min-width:2rem}
.bl-note,.bl-svc{order:2;font-size:.72rem;letter-spacing:.04em;color:var(--hbb-muted)}
.bl-svc{display:inline-flex;align-items:center;min-height:40px;padding:0 1rem;border:1px solid var(--hbb-warm);border-radius:999px;color:var(--moss);font-weight:600;
  background:color-mix(in srgb,#fff 55%,transparent);transition:.25s var(--hbb-ease);transition-property:background,border-color}
.bl-svc:hover{background:#fff;border-color:var(--gold)}
.bl-svc:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Grid + card: cover on top, light body */
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1.25rem}
.bl-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:14px;text-decoration:none;
  background:var(--white);border:1px solid var(--hbb-edge);box-shadow:var(--hbb-sh);
  transition:transform .3s var(--hbb-ease),box-shadow .3s var(--hbb-ease),border-color .3s var(--hbb-ease)}
.bl-media{position:relative;display:block;aspect-ratio:800/420;overflow:hidden;background:color-mix(in srgb,var(--moss) 70%,#000)}
.bl-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--hbb-ease)}
.bl-media::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,144,106,.7) 25% 75%,transparent)}
.bl-body{flex:1;display:flex;flex-direction:column;gap:.5rem;padding:1.05rem 1.2rem 1rem}
.bl-top{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.bl-cat{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--hbb-label)}
.bl-en{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;font-size:.56rem;font-weight:700;letter-spacing:.12em;
  color:var(--moss);border:1px solid var(--hbb-warm);background:color-mix(in srgb,var(--moss-pale) 35%,transparent)}
.bl-title{font-family:'Playfair Display',serif;font-size:1.08rem;font-weight:500;line-height:1.35;color:var(--charcoal);text-wrap:pretty;transition:color .25s}
.bl-meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.7rem;
  border-top:1px solid color-mix(in srgb,var(--sand) 55%,transparent);font-size:.7rem;letter-spacing:.02em;color:var(--hbb-muted)}
.bl-arrow{flex-shrink:0;color:var(--moss);transition:transform .25s var(--hbb-ease)}
.bl-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (hover:hover){
  .bl-card:hover{transform:translateY(-3px);box-shadow:var(--hbb-sh-hi);border-color:var(--hbb-warm)}
  .bl-card:hover .bl-media img{transform:scale(1.03)}
  .bl-card:hover .bl-title{color:var(--moss)}
  .bl-card:hover .bl-arrow{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){.bl-card,.bl-media img{transition:none}.bl-card:hover{transform:none}.bl-card:hover .bl-media img{transform:none}}
@media (max-width:900px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1rem}}
@media (max-width:560px){
  .bl-grid{grid-template-columns:minmax(0,1fr);gap:1rem}
  .bl-body{padding:.95rem 1.1rem .9rem}
  .bl-title{font-size:1.05rem}
  .articles-header{margin-bottom:1.15rem}
}