/* Digifies - blog + insights (built on homepage tokens) */

.digifies-blog{ background:var(--paper); color:var(--ink); }

/* ---------- Blog / post hero ---------- */
.blog-hero{
  position:relative; background:var(--dark); color:#fff;
  padding-block:clamp(120px,14vw,190px) clamp(70px,8vw,110px);
  overflow:hidden;
}
.blog-hero::after{
  content:""; position:absolute; inset:auto -10% -40% 40%; height:70%;
  background:radial-gradient(closest-side, rgba(214,36,159,.28), transparent 70%);
  pointer-events:none;
}
.blog-hero .container{ position:relative; z-index:1; max-width:860px; }
.blog-hero h1{
  font-family:var(--font-display); font-weight:600; line-height:1.06;
  font-size:clamp(2.1rem,5vw,3.6rem); margin-top:18px;
}
.blog-hero p.lede{ margin-top:22px; font-size:1.05rem; line-height:1.7; color:rgba(255,255,255,.72); max-width:62ch; }
.post-meta{
  display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:28px;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.post-meta span{ display:inline-flex; align-items:center; gap:8px; }
.post-meta .dot{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.35); }
.crumbs{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.crumbs a{ color:rgba(255,255,255,.75); }
.crumbs a:hover{ color:#fff; }

/* ---------- Article body ---------- */
.post-body{ padding-block:clamp(56px,7vw,88px); background:var(--paper); }
.post-body .container{ max-width:760px; }
.post-body h2{
  font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:clamp(1.5rem,3vw,2.05rem); line-height:1.2; margin-top:48px;
}
.post-body h3{
  font-family:var(--font-body); font-weight:700; color:var(--ink);
  font-size:1.05rem; margin-top:32px;
}
.post-body p{ margin-top:18px; font-size:1.02rem; line-height:1.78; color:var(--ink-soft); }
.post-body ul,.post-body ol{ margin-top:18px; padding-left:22px; }
.post-body li{ margin-top:10px; font-size:1.02rem; line-height:1.72; color:var(--ink-soft); }
.post-body li::marker{ color:var(--brand-purple); }
.post-body strong{ color:var(--ink); }
.post-body a{ color:var(--brand-purple); text-decoration:underline; text-underline-offset:3px; }
.post-body a:hover{ color:var(--magenta); }
.post-body .intro{ font-size:1.12rem; line-height:1.75; color:var(--ink); }

.post-body table{ width:100%; border-collapse:collapse; margin-top:26px; font-size:.95rem; }
.post-body th,.post-body td{ padding:12px 14px; border:1px solid var(--line); text-align:left; vertical-align:top; }
.post-body th{ background:var(--paper-dim); color:var(--ink); font-weight:600; }
.post-body td{ color:var(--ink-soft); }

.callout{
  margin-top:30px; padding:22px 24px; border-left:3px solid var(--brand-purple);
  background:var(--paper-dim); border-radius:0 10px 10px 0;
}
.callout p{ margin-top:0; color:var(--ink); }

.toc{ margin-top:34px; padding:24px 26px; border:1px solid var(--line); border-radius:12px; background:var(--paper-dim); }
.toc strong{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.toc ol{ margin-top:12px; padding-left:20px; }
.toc li{ margin-top:8px; font-size:.97rem; }
.toc a{ color:var(--ink); text-decoration:none; }
.toc a:hover{ color:var(--brand-purple); text-decoration:underline; }

.faq-item{ border-top:1px solid var(--line); padding-top:22px; margin-top:22px; }
.faq-item h3{ margin-top:0; }

/* ---------- Insight cards (blog index, related, homepage) ---------- */
.insight-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px; margin-top:38px;
}
.insight-card{
  display:flex; flex-direction:column; gap:12px; padding:30px 28px 26px;
  border:1px solid var(--line); border-radius:14px; background:var(--paper);
  text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.insight-card:hover{ transform:translateY(-4px); border-color:var(--brand-purple); box-shadow:0 18px 40px rgba(18,3,23,.10); }
.insight-cat{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-purple); font-weight:600;
}
.insight-card h3{
  font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:1.18rem; line-height:1.28;
}
.insight-card p{ font-size:.94rem; line-height:1.65; color:var(--ink-soft); flex:1; }
.insight-more{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
}
.insight-more::after{ content:" \2192"; }

/* Dark variant, used inside the homepage insights band */
.insights-dark{ background:var(--dark-deep); color:#fff; padding-block:clamp(80px,9vw,120px); }
.insights-dark h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.1; margin-top:14px; }
.insights-dark .sec-lede{ margin-top:18px; color:rgba(255,255,255,.6); max-width:60ch; line-height:1.7; }
.insights-dark .insight-card{ background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.12); }
.insights-dark .insight-card:hover{ border-color:rgba(255,255,255,.4); box-shadow:none; }
.insights-dark .insight-card h3{ color:#fff; }
.insights-dark .insight-card p{ color:rgba(255,255,255,.62); }
.insights-dark .insight-cat{ color:var(--brand-lime); }
.insights-dark .insight-more{ color:#fff; }
.insights-head{ display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; }
.insights-head .btn{ flex:none; }

/* ---------- CTA + related ---------- */
.post-cta{ background:var(--dark-deep); color:#fff; padding-block:clamp(70px,8vw,100px); text-align:center; }
.post-cta h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem,3.6vw,2.4rem); line-height:1.15; margin-top:14px; }
.post-cta p{ margin:18px auto 30px; max-width:58ch; color:rgba(255,255,255,.65); line-height:1.7; }
.post-related{ background:var(--paper-dim); padding-block:clamp(70px,8vw,100px); }
.post-related h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3.4vw,2.2rem); margin-top:12px; }

@media (max-width:640px){
  .post-body .container{ max-width:100%; }
  .insights-head{ align-items:flex-start; }
}
/* alignment guard: homepage sections centre text by default */
.insights-dark .insights-head > div{ text-align:left; }
.insights-dark .insight-card{ text-align:left; }
.post-related .insight-card{ text-align:left; }
.post-related .container > .eyebrow,
.post-related .container > h2{ text-align:left; }

/* ---------- Latest Insights (homepage, editorial, light) ---------- */
.insights-light{ background:#fff; color:var(--ink); padding-block:clamp(72px,8vw,110px); }
.insights-light .container{ text-align:left; }
.insights-light .insights-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
  padding-bottom:26px; border-bottom:1px solid var(--line);
}
.insights-light .insights-head > div{ text-align:left; }
.insights-light .eyebrow{
  display:inline-block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.insights-light h2{
  font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.12; margin-top:12px; text-align:left;
}
.insights-nav{ display:flex; align-items:center; gap:10px; flex:none; }
.insights-nav .insights-all{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--ink); text-decoration:none; margin-right:6px; border-bottom:1px solid var(--ink);
  padding-bottom:2px;
}
.insights-nav .insights-all:hover{ color:var(--brand-purple); border-color:var(--brand-purple); }
.insights-nav button{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background-color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.insights-nav button svg{ width:14px; height:14px; }
.insights-nav button:hover{ background:var(--paper-dim); border-color:var(--ink-soft); }
.insights-nav button[disabled]{ opacity:.3; cursor:default; }

.insights-track{
  display:flex; gap:32px; margin-top:34px;
  overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px;
}
.insights-track::-webkit-scrollbar{ display:none; }
.insights-track .insight-card{
  flex:0 0 calc((100% - 64px) / 3);
  
  display:flex; flex-direction:column; gap:14px;
  padding:26px 0 0; border:0; border-top:2px solid var(--ink);
  border-radius:0; background:transparent; text-align:left;
  transition:opacity .25s var(--ease);
}
.insights-track .insight-card:hover{ transform:none; box-shadow:none; }
.insights-track .insight-card:hover h3{ color:var(--brand-purple); }
.insights-track .insight-cat{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.insights-track .insight-card h3{
  font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:1.22rem; line-height:1.26; transition:color .25s var(--ease);
}
.insights-track .insight-card p{ font-size:.94rem; line-height:1.68; color:var(--ink-soft); flex:1; }
.insight-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:14px; border-top:1px solid var(--line);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.insight-foot em{ font-style:normal; font-weight:600; color:var(--ink); }
.insight-foot em::after{ content:" \2192"; }

@media (max-width:900px){
  .insights-track .insight-card{ flex:0 0 calc((100% - 32px) / 2); }
}
@media (max-width:620px){
  .insights-light .insights-head{ flex-direction:column; align-items:flex-start; gap:18px; }
  .insights-track{ gap:24px; }
  .insights-track .insight-card{ flex:0 0 84%; }
}
/* portfolio thumbs pulled from WordPress featured images */
.work-thumb--photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }
/* Fix: card links should not be underlined (added 2026-09-20) */
.insight-card,.insight-card:hover,.insight-card:focus{text-decoration:none;}
.insight-card h3,.insight-card p,.insight-card span{text-decoration:none;}
.insight-card:hover h3{color:#6d1b6d;}

.post-body .insight-card,.post-body .insight-card:hover,.post-body .insight-card:focus,.insights-grid .insight-card{text-decoration:none;}
.post-body .insight-card h3,.post-body .insight-card p,.post-body .insight-card span{text-decoration:none;}