/* ============================================================
   Vizag Insights — blog listing + single post
   A premium editorial layout on the site's blue accent. Two-column
   on desktop (content + sticky sidebar), single column on phones.
   Reuses the theme tokens from style.css (--s*, --ink, --blue, …).
   ============================================================ */

/* Typography: Poppins throughout the blog (loaded only on blog pages). These
   two vars are the same names the theme sets in :root, so re-pointing them here
   swaps the whole .vz-blog subtree to Poppins while the header/footer/map keep
   the site's own faces. Medium (500) is the base weight, per the design. */
.vz-blog{--vz-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font:var(--vz-font);--font-display:var(--vz-font);
  --vz-max:1200px;--vz-side:340px;--vz-radius:20px;
  --vz-card-shadow:0 1px 2px rgba(10,37,64,.04),0 12px 32px -18px rgba(10,37,64,.14);
  --vz-line:#EAECF1;background:var(--white);color:var(--ink);
  font-family:var(--vz-font);font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.vz-blog p,.vz-blog span,.vz-blog a,.vz-blog li,.vz-blog input,.vz-blog button,.vz-blog select{font-family:var(--vz-font)}
.vz-wrap{max-width:var(--vz-max);margin:0 auto;padding:0 var(--s3)}
@media(max-width:640px){.vz-wrap{padding:0 var(--s2)}}

/* ---------- Hero ---------- */
.vz-hero{position:relative;overflow:hidden;background:
   radial-gradient(120% 140% at 85% 0%,#EAF1FF 0%,#F4F8FF 45%,#FBFCFE 100%);
  border-bottom:1px solid var(--vz-line)}
.vz-hero__in{max-width:var(--vz-max);margin:0 auto;padding:var(--s8) var(--s3);position:relative;z-index:2}
.vz-hero h1{margin:0 0 var(--s2);font-family:var(--font-display);font-weight:600;
  letter-spacing:-.02em;line-height:1.06;font-size:clamp(38px,6vw,66px);color:var(--ink)}
.vz-hero p{margin:0;max-width:46ch;font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--slate)}
.vz-hero__art{position:absolute;right:0;top:0;bottom:0;width:46%;pointer-events:none;
  background:no-repeat right center/contain;opacity:.9}
@media(max-width:820px){.vz-hero__art{display:none}.vz-hero__in{padding:var(--s6) var(--s3)}}

/* ---------- Layout ---------- */
.vz-main{max-width:var(--vz-max);margin:0 auto;padding:var(--s6) var(--s3);
  display:grid;grid-template-columns:minmax(0,1fr) var(--vz-side);gap:var(--s5);align-items:start}
/* minmax(0,1fr), not 1fr. A bare `1fr` track is minmax(auto,1fr), so the column
   refuses to go narrower than its own min-content — and the widest thing in it
   (the filter chip row) then held the whole column open at ~530px on a 375px
   phone. That is what pushed the page sideways. */
@media(max-width:960px){.vz-main{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}

/* ---------- Toolbar: filter chips + sort ---------- */
.vz-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin-bottom:var(--s4);flex-wrap:wrap}
.vz-chips{display:flex;gap:10px;flex-wrap:wrap}
.vz-chip{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;
  border:1px solid var(--vz-line);background:var(--white);color:var(--slate);
  font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background .14s,color .14s,border-color .14s,transform .06s}
.vz-chip:hover{border-color:#C9DAF7;color:var(--ink)}
.vz-chip:active{transform:scale(.97)}
.vz-chip.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.vz-sort{position:relative}
.vz-sort select{appearance:none;height:40px;padding:0 38px 0 16px;border-radius:12px;
  border:1px solid var(--vz-line);background:var(--white);color:var(--ink);
  font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.vz-sort svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--slate2)}

/* ---------- Post rows (listing) ---------- */
.vz-list{display:flex;flex-direction:column;gap:var(--s3)}
.vz-post{display:grid;grid-template-columns:260px 1fr;gap:var(--s3);
  padding:var(--s3);border:1px solid var(--vz-line);border-radius:var(--vz-radius);
  background:var(--white);box-shadow:var(--vz-card-shadow);
  transition:transform .16s ease,box-shadow .16s ease}
.vz-post:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(10,37,64,.05),0 22px 44px -22px rgba(10,37,64,.24)}
.vz-post__media{border-radius:14px;overflow:hidden;background:#EEF2F8;aspect-ratio:16/11}
.vz-post__media img{width:100%;height:100%;object-fit:cover;display:block}
.vz-post__body{display:flex;flex-direction:column;min-width:0}
.vz-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--slate2);margin-bottom:10px;flex-wrap:wrap}
.vz-cat{font-weight:600;color:var(--blue);text-decoration:none}
.vz-cat[data-c="Startups"]{color:#0E9B96}
.vz-cat[data-c="News"]{color:#7C5CFF}
.vz-cat[data-c="Funding"]{color:#F4A72B}
.vz-cat[data-c="Growth"]{color:#FF6B4A}
.vz-dot{width:3px;height:3px;border-radius:50%;background:#CFD6DF}
.vz-post h2{margin:0 0 8px;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  line-height:1.16;font-size:23px}
.vz-post h2 a{color:var(--ink);text-decoration:none}
.vz-post h2 a:hover{color:var(--blue)}
.vz-post__excerpt{margin:0;color:var(--slate);font-size:15px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vz-post__foot{margin-top:auto;padding-top:var(--s2);display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.vz-author{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);font-weight:500}
.vz-author img,.vz-author .vz-ava{width:28px;height:28px;border-radius:50%;object-fit:cover;
  background:linear-gradient(135deg,var(--teal),var(--teal-d));display:grid;place-items:center;color:#fff;font-size:11px;font-weight:600}
.vz-more{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;
  font-size:14px;text-decoration:none}
.vz-more svg{transition:transform .14s}
.vz-more:hover svg{transform:translateX(3px)}
@media(max-width:640px){
  .vz-post{grid-template-columns:1fr;gap:var(--s2)}
  .vz-post__media{aspect-ratio:16/9}
  .vz-post h2{font-size:20px}
}

/* ---------- Sidebar ---------- */
.vz-side{display:flex;flex-direction:column;gap:var(--s3);position:sticky;
  top:calc(var(--head,72px) + var(--s2))}
@media(max-width:960px){.vz-side{position:static;top:auto}}
.vz-card{border:1px solid var(--vz-line);border-radius:var(--vz-radius);background:var(--white);
  box-shadow:var(--vz-card-shadow);padding:var(--s3)}
.vz-card h3{margin:0 0 var(--s2);font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.02em}
.vz-search{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:14px;
  border:1px solid var(--vz-line);background:var(--white)}
.vz-search input{border:0;outline:0;flex:1;min-width:0;background:none;font-family:inherit;font-size:15px;color:var(--ink)}
.vz-search svg{color:var(--slate2);flex:0 0 auto}
.vz-pop{display:flex;flex-direction:column;gap:14px}
.vz-pop a{display:flex;gap:12px;align-items:flex-start;text-decoration:none}
.vz-pop__n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:600}
.vz-pop__t{color:var(--ink);font-weight:500;font-size:14.5px;line-height:1.35}
.vz-pop a:hover .vz-pop__t{color:var(--blue)}
.vz-news{background:linear-gradient(180deg,#F7FAFF,#fff)}
.vz-news__ico{width:44px;height:44px;border-radius:12px;background:var(--blue-tint);color:var(--blue);
  display:grid;place-items:center;margin-bottom:12px}
.vz-news p{margin:0 0 14px;color:var(--slate);font-size:14px;line-height:1.55}
.vz-news input{width:100%;height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--vz-line);
  font-family:inherit;font-size:15px;margin-bottom:10px}
.vz-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:48px;border:0;
  border-radius:12px;background:var(--blue);color:#fff;font-family:inherit;font-size:15px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:background .14s,transform .06s}
.vz-btn:hover{background:var(--blue-d)}
.vz-btn:active{transform:scale(.99)}

/* ---------- Pagination ---------- */
.vz-page{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:var(--s5)}
.vz-page a,.vz-page span{min-width:40px;height:40px;padding:0 10px;border-radius:12px;border:1px solid var(--vz-line);
  background:var(--white);color:var(--slate);display:inline-grid;place-items:center;text-decoration:none;
  font-weight:600;font-size:14px}
.vz-page a:hover{border-color:#C9DAF7;color:var(--ink)}
.vz-page .current{background:var(--blue);border-color:var(--blue);color:#fff}
.vz-page .dots{border:0;background:none}

/* ============================================================
   Single post
   ============================================================ */
.vz-bread{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--slate2);
  padding:var(--s3) 0 0}
.vz-bread a{color:var(--blue);text-decoration:none;font-weight:500}
.vz-bread a:hover{text-decoration:underline}
.vz-bread svg{color:#CFD6DF}
.vz-bread .cur{color:var(--slate)}

.vz-single{max-width:var(--vz-max);margin:0 auto;padding:0 var(--s3) var(--s8);
  display:grid;grid-template-columns:minmax(0,1fr) var(--vz-side);gap:var(--s5);align-items:start}
@media(max-width:960px){.vz-single{grid-template-columns:minmax(0,1fr)}}

.vz-tag{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;
  background:var(--blue-tint);color:var(--blue);font-size:13px;font-weight:600;text-decoration:none;margin:var(--s3) 0 var(--s2)}
.vz-title{margin:0 0 var(--s2);font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  line-height:1.1;font-size:clamp(30px,4.4vw,50px);color:var(--ink)}
.vz-lede{margin:0 0 var(--s3);font-size:clamp(16px,2vw,20px);line-height:1.55;color:var(--slate)}
.vz-byline{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--slate);margin-bottom:var(--s3)}
.vz-byline .vz-author{font-size:14.5px}
.vz-heroimg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--vz-radius);
  background:#EEF2F8;margin:0 0 var(--s2);display:block}
.vz-credit{font-size:12px;color:var(--slate2);margin:0 0 var(--s4)}
.vz-credit a{color:var(--slate);text-decoration:underline}

/* Floating share rail on wide screens; inline row on phones */
.vz-share{display:flex;flex-direction:column;align-items:center;gap:12px;
  position:sticky;top:calc(var(--head,72px) + var(--s3));float:left;margin-left:-72px;width:48px}
.vz-share__label{font-size:12px;color:var(--slate2);font-weight:500}
.vz-share a{width:44px;height:44px;border-radius:50%;border:1px solid var(--vz-line);background:var(--white);
  display:grid;place-items:center;color:var(--slate);transition:transform .12s,color .12s,border-color .12s}
.vz-share a:hover{transform:translateY(-2px);color:var(--blue);border-color:#C9DAF7}
@media(max-width:1120px){
  .vz-share{position:static;float:none;flex-direction:row;margin:0 0 var(--s3);width:auto}
}

/* Article body typography */
.vz-body{font-size:17.5px;line-height:1.75;color:#243B52}
.vz-body>*{max-width:72ch}
.vz-body p{margin:0 0 var(--s3)}
.vz-body h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;font-size:clamp(22px,3vw,30px);
  line-height:1.2;color:var(--ink);margin:var(--s5) 0 var(--s2);scroll-margin-top:calc(var(--head,72px) + var(--s3))}
.vz-body h3{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--ink);margin:var(--s4) 0 var(--s2);
  scroll-margin-top:calc(var(--head,72px) + var(--s3))}
.vz-body ul,.vz-body ol{margin:0 0 var(--s3) 1.2em;padding:0}
.vz-body li{margin:0 0 8px}
.vz-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.vz-body img{max-width:100%;height:auto;border-radius:14px;margin:var(--s2) 0}
.vz-body blockquote{margin:var(--s3) 0;padding:4px 0 4px var(--s3);border-left:4px solid var(--blue);
  color:var(--ink);font-size:19px;line-height:1.6}
.vz-body strong{color:var(--ink);font-weight:600}

/* Post-tag pills under the article */
.vz-postags{display:flex;gap:10px;flex-wrap:wrap;margin:var(--s5) 0 0}
.vz-postags a{padding:7px 14px;border-radius:999px;background:#F3F5F9;color:var(--slate);
  font-size:13px;font-weight:500;text-decoration:none}
.vz-postags a:hover{background:var(--blue-tint);color:var(--blue)}

/* Single-post sidebar cards: author / TOC / related */
.vz-authorcard .vz-authorcard__top{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.vz-authorcard img,.vz-authorcard .vz-ava{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 48px;
  background:linear-gradient(135deg,var(--teal),var(--teal-d));display:grid;place-items:center;color:#fff;font-weight:600}
.vz-authorcard b{display:block;font-size:15px;color:var(--ink)}
.vz-authorcard p{margin:0;color:var(--slate);font-size:13.5px;line-height:1.5}
.vz-authorcard__soc{display:flex;gap:10px;margin-top:12px}
.vz-authorcard__soc a{width:34px;height:34px;border-radius:50%;border:1px solid var(--vz-line);
  display:grid;place-items:center;color:var(--slate)}
.vz-authorcard__soc a:hover{color:var(--blue);border-color:#C9DAF7}

.vz-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.vz-toc li{counter-increment:toc;margin:0}
.vz-toc a{display:flex;gap:10px;align-items:flex-start;padding:9px 0;color:var(--slate);
  text-decoration:none;font-size:14.5px;line-height:1.35;border-left:2px solid transparent;padding-left:12px;margin-left:-12px}
.vz-toc a::before{content:counter(toc);flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--slate2);font-weight:600}
.vz-toc a:hover{color:var(--ink)}
.vz-toc a.is-active{color:var(--blue);border-left-color:var(--blue);font-weight:500}
.vz-toc a.is-active::before{color:var(--blue)}

.vz-rel{display:flex;flex-direction:column;gap:14px}
.vz-rel a{display:flex;gap:12px;text-decoration:none;align-items:center}
.vz-rel__img{flex:0 0 76px;width:76px;height:58px;border-radius:10px;object-fit:cover;background:#EEF2F8}
.vz-rel__t{color:var(--ink);font-weight:600;font-size:14px;line-height:1.3}
.vz-rel a:hover .vz-rel__t{color:var(--blue)}
.vz-rel__m{font-size:12px;color:var(--slate2);margin-top:3px}
.vz-rel__all{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;font-size:14px;text-decoration:none;margin-top:6px}

/* TOC collapsible box shown inline on phones (matches reference image 3) */
.vz-toc-inline{display:none;border:1px solid var(--vz-line);border-radius:16px;padding:var(--s2) var(--s3);margin:var(--s3) 0}
.vz-toc-inline summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink);list-style:none}
.vz-toc-inline summary::-webkit-details-marker{display:none}
.vz-toc-inline[open] summary svg{transform:rotate(180deg)}
.vz-toc-inline ol{list-style:none;margin:var(--s2) 0 0;padding:0;counter-reset:toc}
.vz-toc-inline li{counter-increment:toc}
.vz-toc-inline a{display:flex;gap:10px;padding:8px 0;color:var(--slate);text-decoration:none;font-size:15px}
.vz-toc-inline a::before{content:counter(toc);width:24px;height:24px;border-radius:50%;background:#EFF1F5;
  color:var(--slate);display:grid;place-items:center;font-size:12px;font-weight:600;flex:0 0 24px}
.vz-toc-inline a:first-child::before,.vz-toc-inline a.is-active::before{background:var(--blue);color:#fff}
@media(max-width:960px){.vz-toc-inline{display:block}.vz-toc-desktop{display:none}}

/* ============================================================
   Footer blog strip (added to footer.php)
   ============================================================ */
.foot-blog{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s5);padding-top:var(--s5)}
.foot-blog__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3)}
.foot-blog__head h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:20px;color:#fff}
.foot-blog__all{color:#9FB4D8;font-weight:600;font-size:14px;text-decoration:none}
.foot-blog__all:hover{color:#fff}
.foot-blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:800px){.foot-blog__grid{grid-template-columns:1fr}}
.foot-blog__item{display:flex;gap:12px;text-decoration:none;align-items:center}
.foot-blog__img{flex:0 0 66px;width:66px;height:50px;border-radius:10px;object-fit:cover;background:rgba(255,255,255,.1)}
.foot-blog__t{color:#E7EDF8;font-weight:600;font-size:14px;line-height:1.35}
.foot-blog__item:hover .foot-blog__t{color:#fff}
.foot-blog__m{color:#8FA3C4;font-size:12px;margin-top:3px}

/* ============================================================
   Mobile optimisation
   Tighter rhythm, comfortable reading measure, and Poppins tuned for small
   screens (slightly smaller body, more line-height, no oversized headings).
   ============================================================ */
@media(max-width:960px){
  .vz-main{padding:var(--s5) var(--s3)}
  .vz-single{padding:0 var(--s3) var(--s6)}
  .vz-side{margin-top:var(--s2)}
}
@media(max-width:640px){
  /* Reading column */
  .vz-body{font-size:16px;line-height:1.8}
  .vz-body>*{max-width:none}
  .vz-body h2{font-size:22px;margin:var(--s4) 0 var(--s2);line-height:1.25}
  .vz-body h3{font-size:19px;margin:var(--s3) 0 var(--s)}
  .vz-body p{margin:0 0 var(--s2)}
  .vz-body blockquote{font-size:17px;padding-left:var(--s2)}

  /* Hero + single header */
  .vz-hero__in{padding:var(--s5) var(--s2)}
  .vz-hero h1{font-size:34px;line-height:1.08}
  .vz-hero p{font-size:15px}
  .vz-title{font-size:28px;line-height:1.12}
  .vz-lede{font-size:16px}
  .vz-bread{font-size:12.5px;padding-top:var(--s2)}

  /* Toolbar: let the chips scroll rather than wrap into a tall stack */
  .vz-tools{gap:var(--s2)}
  .vz-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:4px;margin:0 calc(-1*var(--s2));padding-left:var(--s2);padding-right:var(--s2)}
  .vz-chips::-webkit-scrollbar{display:none}
  .vz-chip{flex:0 0 auto;height:38px;padding:0 15px;font-size:13.5px}
  .vz-sort select{height:38px}

  /* Post rows */
  .vz-post{padding:var(--s2)}
  .vz-post h2{font-size:19px}
  .vz-post__excerpt{font-size:14.5px}

  /* Cards / sidebar */
  .vz-card{padding:var(--s2) var(--s3)}
  .vz-card h3{font-size:18px}

  /* Byline + share wrap neatly */
  .vz-byline{flex-wrap:wrap;row-gap:6px;font-size:13.5px}
  .vz-share{gap:10px}
  .vz-share a{width:40px;height:40px}

  /* Tap targets */
  .vz-more,.vz-rel__all,.vz-cat{min-height:24px}
}
@media(max-width:380px){
  .vz-hero h1{font-size:30px}
  .vz-title{font-size:25px}
}

/* ============================================================================
   Small-screen hardening
   The page-level sideways scroll came from the header (fixed in style.css).
   These rules stop the blog itself from ever becoming the culprit: nothing
   inside an article can out-grow its column, and the gutters get back the
   8px the narrowest phones need.
   ========================================================================== */

/* A long unbroken string — a pasted URL, a slug, a hashtag — is the classic
   way a text column silently widens a whole page. */
.vz-blog{overflow-x:clip}
.vz-hero h1,.vz-title,.vz-post h2,.vz-pop__t,.vz-rel__t,.vz-bread .cur,
.vz-body,.vz-body p,.vz-body li,.vz-body h2,.vz-body h3{overflow-wrap:break-word}
.vz-body a{overflow-wrap:anywhere}

/* Wide block content scrolls inside its own box instead of pushing the column. */
.vz-body pre{max-width:100%;overflow-x:auto;padding:var(--s2);border-radius:12px;
  background:#F5F7FA;border:1px solid var(--vz-line);font-size:14px;line-height:1.6}
.vz-body table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse}
.vz-body iframe,.vz-body video,.vz-body embed{max-width:100%}

/* Breadcrumbs: the last crumb is the full post title, so it needs to be
   allowed to wrap rather than run off the side. */
.vz-bread{min-width:0}
.vz-bread .cur{min-width:0}

@media(max-width:560px){
  /* 16px gutters instead of 24px — on a 375px screen that is 16px more
     reading width, which is the difference between a comfortable measure
     and a cramped one. */
  .vz-main{padding:var(--s4) var(--s2)}
  .vz-single{padding:0 var(--s2) var(--s6)}
  .vz-wrap{padding:0 var(--s2)}
  .vz-hero__in{padding:var(--s5) var(--s2)}
  .vz-chips{margin:0 calc(-1*var(--s2));padding-left:var(--s2);padding-right:var(--s2)}
  /* Breadcrumb: drop the middle crumbs, keep Home › Category. The full title
     is already the <h1> directly beneath it. */
  .vz-bread .cur{display:none}
  .vz-bread svg:last-of-type{display:none}
  .vz-page{flex-wrap:wrap}
}

/* The grid/flex "automatic minimum size" trap, closed explicitly.
   A grid or flex item defaults to min-width:auto, which means it will not
   shrink below its own min-content width. One wide child (the chip row) was
   therefore able to hold the entire article column — and the page — open.
   Declaring min-width:0 lets these boxes size to the track instead, so the
   chip row scrolls inside itself as it was always meant to. */
.vz-content,.vz-side,.vz-tools,.vz-chips,.vz-article,.vz-list,.vz-post,.vz-card{min-width:0}

@media(max-width:640px){
  /* The chip scroller now takes the full row, so the sort control drops below
     it. Push it to the right so the toolbar reads as a balanced pair of rows
     rather than two things stacked in the left corner. */
  .vz-tools{align-items:stretch;row-gap:var(--s2)}
  .vz-sort{margin-left:auto}
}

/* ============================================================================
   v0.7 — blog: type unification + visual fixes
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Typography
   .vz-blog used to re-point --font and --font-display at Poppins, which made
   the blog the only part of the product in that face. It now inherits the site
   pair, so an article, a company profile and the map read as one product.
   ------------------------------------------------------------------------- */
.vz-blog{
  --vz-font:var(--font);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Bricolage Grotesque','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --vz-radius:var(--r-xl);
  --vz-line:var(--line);
  font-family:var(--font);
}
.vz-blog p,.vz-blog span,.vz-blog a,.vz-blog li,
.vz-blog input,.vz-blog button,.vz-blog select{font-family:var(--font)}
.vz-hero h1,.vz-title,.vz-post h2,.vz-card h3,.vz-body h2,.vz-body h3,
.vz-toc-inline summary{font-family:var(--font-display)}
/* Bricolage is a display face: it carries weight better than Poppins did, so
   headings step down from 600 to a tighter setting rather than getting heavier. */
.vz-hero h1{font-weight:700;letter-spacing:-.03em}
.vz-title{font-weight:700;letter-spacing:-.03em}
.vz-post h2,.vz-body h2,.vz-body h3,.vz-card h3{font-weight:700;letter-spacing:-.02em}
.vz-body{color:var(--body)}

/* ---------------------------------------------------------------------------
   FIX — related-post title and meta collided
   The markup is two sibling <span>s inside an <a>:
       <span class="vz-rel__t">Title</span><span class="vz-rel__m">Date · N min</span>
   Both are inline, so they ran together on one line ("…Beach Road12 Nov 2026 ·
   8 min read") and the `margin-top:3px` on the meta did nothing, because
   vertical margins do not apply to inline boxes.
   ------------------------------------------------------------------------- */
.vz-rel__t,.vz-rel__m{display:block}
.vz-rel a>span:last-child{min-width:0}
.vz-rel__t{overflow-wrap:anywhere}
/* Same shape, same latent bug, in the popular-posts list. */
.vz-pop__t{display:block}

/* ---------------------------------------------------------------------------
   FIX — the share rail was off-screen on ordinary laptops
   .vz-share floats left with margin-left:-72px, but the rule that turns that
   off only fired at max-width:1120px. The rail needs the article column to
   have 72px of clear space to its left, and with --vz-max:1200px plus 24px
   gutters that does not happen until roughly 1345px. Measured before the fix:

       viewport 1140px → rail left edge at -48px   (entirely off-screen)
       viewport 1200px → rail left edge at -48px   (entirely off-screen)
       viewport 1280px → rail left edge at  -8px   (entirely off-screen)
       viewport 1360px → rail left edge at  32px   (visible)

   So on a 1280x800 laptop the whole Share column was invisible. The breakpoint
   moves to where the geometry actually allows it.
   ------------------------------------------------------------------------- */
@media(max-width:1345px){
  .vz-share{position:static;float:none;flex-direction:row;margin:0 0 var(--s3);width:auto}
}
@media(min-width:1346px){
  .vz-share{position:sticky;top:calc(var(--head,78px) + var(--s3));float:left;
    margin-left:-72px;width:48px;flex-direction:column}
}

/* ---------------------------------------------------------------------------
   FIX — teal avatars on an otherwise blue page
   The byline and author-card initials fell back to the retired teal gradient,
   which was the only teal on the blog. Teal now means one thing only: a
   "Startup" pin on the map.
   ------------------------------------------------------------------------- */
.vz-author img,.vz-author .vz-ava,
.vz-authorcard img,.vz-authorcard .vz-ava{background:var(--blue)}

/* ---------------------------------------------------------------------------
   FIX — breadcrumb tap targets measured 18px tall on a phone
   ------------------------------------------------------------------------- */
@media(max-width:820px){
  .vz-bread{row-gap:0}
  .vz-bread a,.vz-bread .cur{display:inline-flex;align-items:center;min-height:var(--tap)}
  .vz-more,.vz-rel__all,.vz-cat{display:inline-flex;align-items:center;min-height:var(--tap)}
  .vz-post__foot{padding-top:var(--s)}
}

/* ---------------------------------------------------------------------------
   Shape and elevation on the unified scale.
   ------------------------------------------------------------------------- */
.vz-card,.vz-post{border-radius:var(--r-xl);box-shadow:var(--sh-2);border-color:var(--line)}
.vz-chip{border-radius:var(--r-pill);border-color:var(--line);font-family:var(--font)}
.vz-chip.is-active{background:var(--blue);border-color:var(--blue)}
.vz-sort select,.vz-page a,.vz-page span,.vz-news input,.vz-btn{border-radius:var(--r-md)}
.vz-search{border-radius:var(--r-md);border-color:var(--line)}
.vz-post__media{border-radius:var(--r-md)}
.vz-heroimg{border-radius:var(--r-xl)}

/* The listing page sits on white; the footer now follows it with no seam. */
.vz-blog{background:var(--surface)}

.vz-toc-inline summary{min-height:var(--tap)}
.vz-search input{height:100%;min-height:var(--tap)}