/* ============================================================
   Lambdaserve Insights / blog (light, Mitech-inspired)
   builds on styles.css (same tokens, nav, footer, buttons)
   ============================================================ */

/* ── blog index ─────────────────────────────────────── */
.bloghero{position:relative;overflow:hidden;
  padding:clamp(8.5rem,15vh,11.5rem) clamp(1.25rem,5vw,3rem) clamp(2.5rem,5vw,4rem);
  background:
    radial-gradient(55% 70% at 88% 4%,var(--acc-tint),transparent 60%),
    linear-gradient(180deg,var(--bg-soft) 0%,#fff 80%)}
.bloghero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.bloghero__bg::before{content:"";position:absolute;width:360px;height:360px;right:-80px;top:-70px;border-radius:50%;
  background:radial-gradient(circle,rgba(8,106,216,.10),transparent 68%);animation:floaty 9s var(--ease) infinite}
.bloghero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto}
.bloghero h1{font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.02em;line-height:1.12}
.bloghero p{color:var(--ink-2);font-size:1.06rem;margin-top:1rem;max-width:56ch}

.postgrid{max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,4vw,3rem) clamp(1.25rem,5vw,3rem) clamp(4rem,8vw,6rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:880px){.postgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.postgrid{grid-template-columns:1fr}}

.pcard{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .32s var(--ease),box-shadow .32s}
.pcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift)}
.pcard__top{position:relative;height:124px;display:flex;align-items:center;justify-content:center;gap:.8rem;
  background:linear-gradient(135deg,var(--acc-tint),#fff);border-bottom:1px solid var(--line)}
.pcard__logos{display:flex;gap:.6rem;align-items:center}
.pcard__logos .chip{background:#fff;border-radius:9px;padding:.5rem .6rem;display:grid;place-items:center;box-shadow:0 4px 12px rgba(23,42,80,.08)}
.pcard__logos .chip img{height:24px;width:auto}
.pcard__mark{font-family:var(--display);font-weight:800;font-size:1.9rem;color:var(--acc);opacity:.5}
.pcard__body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.pcard__cat{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:.7rem}
.pcard__title{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.14rem;line-height:1.3;letter-spacing:-.01em}
.pcard__dek{color:var(--ink-2);font-size:.92rem;margin-top:.6rem;flex:1;line-height:1.6}
.pcard__meta{font-family:var(--display);font-size:.74rem;font-weight:600;color:var(--ink-dim);margin-top:1.2rem}

/* ── single post ────────────────────────────────────── */
.post{overflow:hidden}
.post__hero{position:relative;overflow:hidden;
  padding:clamp(8rem,15vh,10.5rem) clamp(1.25rem,5vw,3rem) clamp(2.5rem,5vw,3.5rem);
  background:
    radial-gradient(50% 70% at 90% 6%,var(--acc-tint),transparent 60%),
    linear-gradient(180deg,var(--bg-soft) 0%,#fff 85%)}
.post__hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.post__hero-bg::before{content:"";position:absolute;width:300px;height:300px;right:-70px;top:-60px;border-radius:50%;
  background:radial-gradient(circle,rgba(8,106,216,.10),transparent 68%);animation:floaty 9s var(--ease) infinite}
.post__wrap{position:relative;z-index:2;max-width:820px;margin:0 auto}
.post__cat{font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.post__cat a{color:var(--ink-dim)}
.post__cat a:hover{color:var(--acc)}
.post__title{font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.12;letter-spacing:-.02em;margin:.9rem 0}
.post__dek{color:var(--ink-2);font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:60ch}
.post__meta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.4rem;
  font-family:var(--display);font-size:.82rem;font-weight:600;color:var(--ink-dim)}
.post__logos{display:flex;gap:.7rem;margin-top:1.8rem}
.post__logos .chip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;display:grid;place-items:center;box-shadow:var(--shadow)}
.post__logos .chip img{height:30px;width:auto}

.post__body{max-width:760px;margin:0 auto;padding:clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem) clamp(2rem,4vw,3rem);
  font-size:1.08rem;line-height:1.85;color:var(--ink-2)}
.post__body > p:first-of-type{font-size:1.2rem;color:var(--ink);line-height:1.7}
.post__body h2{font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.01em;line-height:1.22;margin:2.6rem 0 1rem}
.post__body h3{font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:1.2rem;margin:1.9rem 0 .6rem}
.post__body p{margin:0 0 1.15rem}
.post__body a{color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(8,106,216,.35)}
.post__body a:hover{text-decoration-color:var(--acc)}
.post__body ul,.post__body ol{margin:0 0 1.3rem 1.2rem;display:flex;flex-direction:column;gap:.55rem}
.post__body li{padding-left:.3rem}
.post__body strong{color:var(--ink);font-weight:600}
.post__body blockquote.callout{margin:1.8rem 0;padding:1.3rem 1.5rem;border-left:4px solid var(--acc);
  background:var(--acc-tint);border-radius:0 12px 12px 0;color:var(--ink)}
.post__body blockquote.callout p{margin:0}
.post__body .keytakeaways{margin:2.2rem 0;padding:1.6rem 1.8rem;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.post__body .keytakeaways h3{margin:0 0 .9rem;font-family:var(--display);font-size:.8rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.post__body .keytakeaways ul{margin:0 0 0 1.1rem}
.post__body pre.code{margin:1.8rem 0;padding:1.3rem 1.4rem;background:#0f1b2d;border-radius:12px;
  overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;line-height:1.65;color:#d6deea}
.post__body pre.code code{font-family:inherit;white-space:pre;color:inherit}
.post__body :not(pre) > code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--acc-tint);border-radius:6px;padding:.12rem .38rem;color:var(--acc-deep)}
.post__body .disclaimer{font-size:.88rem;color:var(--ink-dim);border-top:1px solid var(--line);
  margin-top:2.6rem;padding-top:1.3rem;line-height:1.7}

/* ── related ────────────────────────────────────────── */
.related{max-width:820px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem) clamp(3rem,6vw,4.5rem)}
.related h2{font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.5rem;margin-bottom:1.3rem}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:640px){.related__grid{grid-template-columns:1fr}}
.related__card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.3rem;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s}
.related__card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.related__card .c{font-family:var(--display);font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--acc)}
.related__card .t{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1rem;margin-top:.5rem;line-height:1.32}

/* breadcrumb back link */
.post__back{max-width:820px;margin:0 auto;padding:1.5rem clamp(1.25rem,5vw,3rem) 0}
.post__back a{font-family:var(--display);font-size:.82rem;font-weight:600;color:var(--ink-dim)}
.post__back a:hover{color:var(--acc)}