/* ============================================================
   MADUZZI — Blog (/diario) e página de produto (/produto/:slug)
   Usa as variáveis já definidas em styles.css.
   ============================================================ */

/* ---------------- listagem do diário ---------------- */
.bl-empty{color:var(--ink-60);font-size:16px}

.bl-featured{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3.4vw,56px);
  align-items:center;text-decoration:none;color:inherit;
  padding-bottom:clamp(36px,4vw,56px);margin-bottom:clamp(36px,4vw,56px);
  border-bottom:1px solid var(--line);
}
.bl-featured-img{
  aspect-ratio:3/2;background:var(--nude) center/cover no-repeat;
}
.bl-featured-body h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,3.4vw,44px);line-height:1.12;margin:12px 0 14px;
}
.bl-featured:hover .bl-featured-body h2{color:var(--graphite)}
.bl-featured-body p{color:var(--ink-60);font-size:clamp(15px,1.5vw,17px);line-height:1.7;margin-bottom:16px}

.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,44px)}
.bl-grid--products{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:clamp(16px,2vw,28px)}

.bl-card-link{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;height:100%}
.bl-card-img{aspect-ratio:3/2;background:var(--nude) center/cover no-repeat}
.bl-card-img.square{aspect-ratio:1/1}
.bl-card-img--empty{background:var(--nude)}
.bl-card-body{display:flex;flex-direction:column;gap:8px}
.bl-card-body h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(20px,2vw,25px);line-height:1.18;margin:0;
}
.bl-card-body p{color:var(--ink-60);font-size:14px;line-height:1.7;margin:0}
.bl-card-link:hover .bl-card-body h3{color:var(--graphite)}

.bl-cat{
  font-family:var(--font-ui);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--silver-3);
}
.bl-meta{
  font-family:var(--font-ui);font-size:12px;letter-spacing:.06em;
  color:var(--ink-45);font-variant-numeric:tabular-nums;
}
.bl-price{font-family:var(--font-ui);font-size:15px;font-variant-numeric:tabular-nums}

/* ---------------- artigo ---------------- */
.bl-byline{
  font-family:var(--font-ui);font-size:13px;letter-spacing:.05em;
  color:var(--ink-45);font-variant-numeric:tabular-nums;
}
.bl-article-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(32px,4vw,72px);align-items:start;
}
.bl-article{max-width:72ch}
.bl-cover{margin:0 0 clamp(24px,3vw,40px)}
.bl-cover img{width:100%;height:auto;display:block}
.bl-lead{
  font-size:clamp(17px,1.8vw,20px);line-height:1.7;font-style:italic;
  color:var(--graphite);margin:0 0 28px;padding-bottom:28px;border-bottom:1px solid var(--line);
}
.bl-article h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,2.8vw,34px);line-height:1.16;margin:40px 0 16px;
}
.bl-article p{font-size:clamp(16px,1.6vw,17px);line-height:1.85;color:var(--graphite);margin:0 0 18px}
.bl-article ul{margin:0 0 22px;padding-left:22px}
.bl-article li{font-size:clamp(16px,1.6vw,17px);line-height:1.8;color:var(--graphite);margin-bottom:8px}
.bl-article blockquote{
  margin:28px 0;padding:4px 0 4px 22px;border-left:2px solid var(--champagne);
  font-style:italic;font-size:clamp(17px,1.8vw,19px);line-height:1.7;color:var(--graphite);
}
.bl-article a{color:var(--graphite);text-decoration:underline;text-decoration-color:var(--champagne);text-underline-offset:3px}
.bl-article a:hover{text-decoration-color:var(--obsidian)}

.bl-related{margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.bl-related h2{margin-top:0}

.bl-cta{
  margin-top:clamp(36px,4vw,56px);padding:clamp(24px,3vw,36px);
  background:var(--ivory);text-align:center;
}
.bl-cta h2{margin:0 0 10px}
.bl-cta p{color:var(--ink-60);margin:0 0 20px}

.bl-aside{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:24px}
.bl-aside-box{border:1px solid var(--line);padding:20px}
.bl-aside-title{
  display:block;font-family:var(--font-ui);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--silver-3);margin-bottom:14px;
}
.bl-aside-list{list-style:none;margin:0;padding:0}
.bl-aside-list li{border-top:1px solid var(--line);padding:11px 0}
.bl-aside-list li:first-child{border-top:0;padding-top:0}
.bl-aside-list a{font-size:14px;line-height:1.5;color:var(--graphite);text-decoration:none}
.bl-aside-list a:hover{color:var(--obsidian);text-decoration:underline}

/* ---------------- página de produto ---------------- */
.pp-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,4vw,72px);align-items:start}
.pp-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pp-shot{margin:0;background:var(--nude)}
.pp-shot--main{grid-column:1/-1}
.pp-shot img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:4/5}
.pp-shot--main img{aspect-ratio:4/5}

.pp-info{position:sticky;top:calc(var(--header-h) + 24px)}
.pp-tag{
  display:inline-block;font-family:var(--font-ui);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--silver-3);margin-bottom:12px;
}
.pp-info h1{font-size:clamp(28px,3.6vw,46px);line-height:1.1;margin:0 0 10px}
.pp-ref{font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);margin:0 0 22px}
.pp-price{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px;
}
.pp-price strong{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3vw,38px);font-variant-numeric:tabular-nums}
.pp-price s{color:var(--ink-45);font-size:17px;font-variant-numeric:tabular-nums}
.pp-parcela{font-family:var(--font-ui);font-size:13px;color:var(--ink-60);font-variant-numeric:tabular-nums}

.pp-block{margin-bottom:22px}
.pp-label{
  display:block;font-family:var(--font-ui);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:10px;
}
.pp-colors{display:flex;gap:14px;flex-wrap:wrap}
.pp-color{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:13px}
.pp-color i{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);display:inline-block}
.pp-sizes{display:flex;gap:8px;flex-wrap:wrap}
.pp-sizes span{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);font-family:var(--font-ui);font-size:14px;font-variant-numeric:tabular-nums;
}
.pp-buy{display:inline-flex;width:100%;justify-content:center;margin-bottom:12px}
.pp-note{font-size:13px;line-height:1.7;color:var(--ink-60);margin:0 0 28px}
.pp-desc{border-top:1px solid var(--line);padding-top:24px;margin-bottom:24px}
.pp-desc h2{font-size:clamp(20px,2.2vw,26px);margin:0 0 12px}
.pp-desc p{font-size:16px;line-height:1.8;color:var(--graphite);margin:0}
.pp-features{margin:0;padding-left:20px}
.pp-features li{font-size:15px;line-height:1.8;color:var(--graphite)}

/* ---------------- responsivo ---------------- */
@media (max-width:960px){
  .bl-featured{grid-template-columns:1fr;gap:20px}
  .bl-grid{grid-template-columns:repeat(2,1fr)}
  .bl-article-wrap{grid-template-columns:1fr}
  .bl-aside{position:static;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .pp-wrap{grid-template-columns:1fr}
  .pp-info{position:static}
}
@media (max-width:620px){
  .bl-grid{grid-template-columns:1fr}
  .bl-article p,.bl-article li{text-align:left}
}