/* ==========================================================================
   MEENA DIGI SOLUTIONS — Insights (blog)
   Loaded after style.css + about.css + pillar.css. Listing cards and
   article typography.
   ========================================================================== */

/* ---------- Listing ---------- */
.bl-hero{ min-height:56vh; }
.bl-grid{
  width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  padding-top:clamp(48px, 8vw, 96px);
  padding-bottom:clamp(72px, 12vw, 130px);
}
.ar-related .bl-grid, .pf-articles .bl-grid{ padding-top:36px; }
.bl-card{
  display:flex; flex-direction:column;
  border-radius:var(--radius); overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.bl-card:hover{ border-color:var(--accent); transform:translateY(-4px); }
.bl-card-media{ position:relative; aspect-ratio:1200/630; overflow:hidden; background:#0A0A0B; }
.bl-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.bl-card:hover .bl-card-media img{ transform:scale(1.04); }
.bl-card-body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.bl-tag{
  align-self:flex-start;
  font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent); padding:5px 12px; border-radius:100px;
  border:1px solid var(--border); background:var(--glass);
}
.bl-card h2{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.12rem; line-height:1.25;
}
.bl-card p{ color:var(--text-dim); font-size:0.94rem; flex:1; }
.bl-meta{
  display:flex; gap:14px; font-size:0.78rem; color:var(--text-faint);
  letter-spacing:0.04em;
}
.bl-read{
  margin-top:4px; font-size:0.85rem; font-weight:600; color:var(--accent);
}

/* ---------- Article ---------- */
.ar-head{
  width:min(860px, 92vw); margin:0 auto; text-align:left;
  padding:clamp(40px, 6vw, 64px) 0 34px;
}
.ar-title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem, 4.6vw, 3.4rem); line-height:1.06; max-width:24ch;
}
.ar-meta{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 22px;
  font-size:0.85rem; color:var(--text-faint);
}
.ar-meta strong{ color:var(--text-dim); font-weight:600; }
.ar-banner{
  width:min(1060px, 94vw); margin:26px auto 0;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
  background:#0A0A0B;
}
.ar-banner img{ width:100%; display:block; }

.ar-body{
  width:min(760px, 92vw); margin:0 auto;
  padding:clamp(40px, 6vw, 64px) 0 clamp(64px, 9vw, 100px);
  font-size:1.06rem; line-height:1.75; color:var(--text-dim);
}
.ar-body h2{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.25rem, 2.4vw, 1.7rem); line-height:1.2;
  color:var(--text); margin:2.2em 0 0.7em;
}
.ar-body h3{
  font-weight:700; font-size:1.08rem; color:var(--text);
  margin:1.8em 0 0.5em;
}
.ar-body p{ margin:0 0 1.1em; }
.ar-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.ar-body ul{ margin:0 0 1.2em; padding-left:1.1em; list-style:disc; }
.ar-body li{ margin-bottom:0.5em; }
.ar-body strong{ color:var(--text); font-weight:600; }
.ar-lead{ font-size:1.18rem; color:var(--text); font-weight:500; }
.ar-callout{
  margin:1.6em 0; padding:22px 26px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--accent); font-size:1rem;
}
.ar-callout strong{ color:var(--accent); }

/* author + CTA */
.ar-author{
  margin-top:3em; padding:24px 28px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  display:flex; gap:18px; align-items:center; flex-wrap:wrap; font-size:0.95rem;
}
.ar-author-img{
  flex:none; width:60px; height:60px; border-radius:16px;
  object-fit:cover; object-position:top;
  background:linear-gradient(160deg, var(--glass), var(--surface-2));
  border:1px solid var(--border);
}
.ar-author p{ margin:0; flex:1; min-width:220px; }
.ar-author .ar-author-name{ color:var(--text); font-weight:600; }
.ar-author-actions{ display:flex; gap:10px; align-items:center; margin-left:auto; }
.ar-icon-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border); display:grid; place-items:center;
  color:var(--accent); background:var(--glass);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.ar-icon-btn:hover{ border-color:var(--accent); transform:translateY(-2px); }
.ar-icon-btn svg{ width:18px; height:18px; }
.ar-cta{
  margin-top:1.6em; padding:30px 32px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--accent);
  text-align:left;
}
.ar-cta h3{ margin:0 0 6px; font-family:var(--font-display); text-transform:uppercase; color:var(--text); }
.ar-cta p{ margin:0 0 18px; }

/* related */
.ar-related{
  width:var(--container); margin:0 auto;
  padding:clamp(48px, 8vw, 80px) 0;
  border-top:1px solid var(--border);
}
.ar-related .bl-grid{ padding-bottom:0; margin-top:36px; grid-template-columns:repeat(2, 1fr); width:100%; }

@media (max-width:960px){
  .bl-grid{ grid-template-columns:1fr; }
  .ar-related .bl-grid{ grid-template-columns:1fr; }
}

/* ---------- Case study figures (work pages) ----------
   Deliverable artwork sits at a controlled size on a soft plate —
   never stretched to fill the column. */
.cs-figure{
  margin:0; padding:clamp(24px, 4vw, 48px);
  border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  min-height:320px;
}
.cs-figure img{
  max-width:100%; max-height:480px;
  width:auto; height:auto;
  object-fit:contain; display:block;
  border-radius:10px;
  box-shadow:0 18px 50px rgba(10,10,11,0.14);
}
.cs-figure--tall img{ max-height:560px; }
@media (max-width:900px){
  .cs-figure{ min-height:0; }
  .cs-figure img{ max-height:400px; }
}