/* Blog Approfondimenti di Clair Clinique. Si appoggia a styles.css del sito (colori, font, nav, bande, footer). */

/* Testata scura dietro la barra di navigazione, come l'hero della home */
.blog-hero { padding:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem)) 0 clamp(3rem,6vw,4.5rem); position:relative; overflow:hidden; }
.blog-hero::before { content:""; position:absolute; inset:-30% -10% auto auto; width:60vw; height:60vw; max-width:760px; max-height:760px; background:radial-gradient(circle, rgba(201,162,39,.14), transparent 62%); pointer-events:none; }
.blog-hero .wrap { position:relative; }
.blog-hero__in { max-width:980px; }
.blog-hero__t { max-width:22ch; margin:0 0 1.2rem; }
.blog-hero__meta { font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-d); margin:0 0 2.6rem; }
.blog-hero__img { margin:0; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line-d); }
.blog-hero__img img { width:100%; height:100%; object-fit:cover; }
.blog-hero--idx { padding-bottom:clamp(3.5rem,7vw,5.5rem); }
.blog-hero--idx .h2 { color:var(--cream); }
.blog-back { display:flex; width:fit-content; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-br); margin:0 0 2.2rem; transition:opacity .3s; }
.blog-back:hover { opacity:.75; }

/* Corpo dell'articolo su banda avorio */
.blog-body { padding-top:clamp(3.5rem,7vw,5.5rem); }
.blog-art { max-width:720px; margin:0 auto; padding-inline:var(--gutter); }
.blog-art__lead { font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,1.85rem); line-height:1.4; color:var(--gold-deep); margin:0 0 2.6rem; padding-left:1.4rem; border-left:1px solid var(--gold); }
.blog-art__body h2 { font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,2.6vw,1.95rem); line-height:1.2; margin:3rem 0 1rem; color:var(--ink); }
.blog-art__body p { font-size:1.06rem; line-height:1.9; color:var(--ink); margin:0 0 1.25rem; }
.blog-src { margin:3.4rem 0 0; padding:1.6rem 0 0; border-top:1px solid var(--line); }
.blog-src__k { font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:0 0 .7rem; }
.blog-src p { font-size:.95rem; line-height:1.75; color:var(--muted); margin:0; }
.blog-src a { color:var(--gold-deep); border-bottom:1px solid rgba(176,131,46,.4); }
.blog-src a:hover { border-bottom-color:var(--gold-deep); }
.blog-sol { margin:2rem 0 0; padding:1.8rem 2rem; background:var(--noir); color:var(--cream); border-left:2px solid var(--gold-br); }
.blog-sol .pearl__lead { margin:0 0 .7rem; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-br); }
.blog-sol p:last-child { margin:0; font-size:1.02rem; line-height:1.75; }
.blog-art__note { font-size:.84rem; font-style:italic; color:var(--muted); line-height:1.7; margin:2.2rem 0 0; }
.blog-pn { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin:3.4rem 0 0; padding-top:2rem; border-top:1px solid var(--line); }
.blog-pn a { display:block; font-family:var(--font-display); font-size:1.15rem; line-height:1.35; color:var(--ink); transition:color .3s; }
.blog-pn a span { display:block; font-family:var(--font-body); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:.45rem; }
.blog-pn a:hover { color:var(--gold-deep); }
.blog-pn .is-next { grid-column:2; text-align:right; }

/* Elenco degli articoli */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(1.4rem,2.5vw,2.2rem); }
.blog-card { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s; }
.blog-card:hover { transform:translateY(-4px); border-color:rgba(176,131,46,.45); box-shadow:0 22px 46px rgba(26,22,17,.1); }
.blog-card__img { aspect-ratio:16/10; overflow:hidden; background:var(--tint); }
.blog-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.blog-card:hover .blog-card__img img { transform:scale(1.04); }
.blog-card__b { padding:1.6rem 1.6rem 1.8rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.blog-card__k { font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:0; line-height:1.6; }
.blog-card__t { font-family:var(--font-display); font-weight:400; font-size:1.42rem; line-height:1.25; margin:0; color:var(--ink); }
.blog-card__s { font-size:.94rem; color:var(--muted); line-height:1.7; margin:0; flex:1; }
.blog-card__r { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin-top:.4rem; }

/* Invito a contattarci e a seguirci */
.blog-cta__grid { display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.blog-cta .sub { max-width:48ch; margin:0 0 2rem; }
.blog-cta__act { display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.blog-cta__mail { color:var(--gold-br); font-size:.95rem; border-bottom:1px solid rgba(201,162,39,.4); transition:border-color .3s; }
.blog-cta__mail:hover { border-bottom-color:var(--gold-br); }
.blog-cta__social { padding-left:clamp(0rem,3vw,2.5rem); border-left:1px solid var(--line-d); }
.blog-cta__st { font-family:var(--font-display); font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.25; color:var(--cream); margin:0 0 .8rem; }
.blog-cta__social .sub { margin-bottom:1.6rem; }

@media (max-width:860px){
  .blog-cta__grid { grid-template-columns:1fr; }
  .blog-cta__social { padding-left:0; border-left:0; padding-top:2.2rem; border-top:1px solid var(--line-d); }
}
@media (max-width:600px){
  .blog-pn { grid-template-columns:1fr; }
  .blog-pn .is-next { grid-column:1; text-align:left; }
  .blog-sol { padding:1.5rem 1.4rem; }
}