/* ==========================================================================
   BLOG + CONTACT                     Figma yxS12YXqOnX0RmudmUW4DW · 11:150
   Shared by blog.html, blog-post.html and contact.html. Every colour, radius
   and type size below is the comp's; the tokens, buttons, reveal and chrome
   are the site's own, so the new pages read as the same product.
   ========================================================================== */
.zr-bl{
  --bl-hair   : #E9E9E9;   /* card and input border          */
  --bl-rule   : #EEF3FA;   /* the hairline inside a card     */
  --bl-ink    : #1F2328;   /* titles                         */
  --bl-body   : #525252;   /* running copy                   */
  --bl-dim    : #919191;   /* excerpts, dates                */
  --bl-dot    : #C3C8CF;   /* the · between meta items       */
  --bl-ph     : #EDEDED;   /* cover placeholder              */
  --bl-card-sh : 0 6px 16px -4px rgba(31,36,41,.05);
  --bl-feat-sh : 0 10px 24px -8px rgba(31,36,41,.07);

  font-family:var(--zr-font);
}
.zr-bl *, .zr-bl *::before, .zr-bl *::after{ box-sizing:border-box; }

/* ── hero ─────────────────────────────────────────────────────────────────
   The wash is the same gradient language as the rest of the site rather than
   the comp's raster: nothing to ship, nothing to go stale. */
.zr-bl__hero{
  position:relative; isolation:isolate;
  padding:clamp(56px, 5.6vw, 92px) var(--zr-pad) clamp(40px, 4vw, 64px);
  text-align:center;
}
.zr-bl__hero::before{
  content:""; position:absolute; inset:-104px 0 0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(76% 120% at 12% 0%,  rgba(124,92,245,.14) 0%, rgba(124,92,245,0) 62%),
    radial-gradient(70% 110% at 92% 8%,  rgba(0,145,255,.12)  0%, rgba(0,145,255,0)  60%),
    linear-gradient(180deg, #F7F6FE 0%, #FCFCFE 58%, #fff 100%);
}
/* The measure is 760px, but seven real category names need ~880px to sit on
   one row, and a tab bar that wraps to two reads as two groups. The shell
   opens to 980px and the type keeps the measure. */
.zr-bl__hero-in{ display:flex; flex-direction:column; align-items:center; gap:18px; width:min(980px,100%); margin:0 auto; }
.zr-bl__hero-in > .zr-bl__h1, .zr-bl__hero-in > .zr-bl__lede{ width:min(760px,100%); }
.zr-bl__eyebrow{
  display:inline-flex; align-items:center; padding:5px 14px;
  border:1px solid var(--bl-hair); border-radius:999px; background:#fff;
  font-size:12.5px; line-height:18px; color:var(--bl-body);
}
.zr-bl__h1{
  margin:0; text-wrap:balance;
  font-size:clamp(32px, 4.4vw, 48px); font-weight:500; line-height:1.18;
  letter-spacing:-.028em;
  background:var(--zr-head-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.zr-bl__lede{ margin:0; text-wrap:balance; font-size:16px; line-height:26px; color:var(--bl-body); }

/* the category filter — a real control, so these are buttons */
.zr-bl__filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:6px; }
.zr-bl__filter{
  padding:7px 15px; border:1px solid var(--bl-hair); border-radius:999px;
  background:#fff; font:inherit; font-size:13px; color:var(--bl-body);
  cursor:pointer;
  transition:background .16s var(--zr-ease-out-quad),
             border-color .16s var(--zr-ease-out-quad),
             color .16s var(--zr-ease-out-quad);
}
.zr-bl__filter:hover{ border-color:#D3D8E0; color:var(--bl-ink); }
.zr-bl__filter[aria-pressed="true"]{ background:var(--bl-ink); border-color:var(--bl-ink); color:#fff; }

/* ── page shell ─────────────────────────────────────────────────────────── */
.zr-bl__wrap{ width:min(1200px, 100%); margin:0 auto; padding-inline:var(--zr-pad); }
.zr-bl__sec{ padding-block:clamp(28px, 3vw, 44px); }
.zr-bl__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; }
.zr-bl__head h2{ margin:0; font-size:22px; font-weight:500; letter-spacing:-.02em; color:var(--bl-ink); }

/* ── category pills ─────────────────────────────────────────────────────── */
.zr-pill{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:22px;
  font-family:'Inter', var(--zr-font); font-size:12.5px; font-weight:500; line-height:18px;
  white-space:nowrap;
}
/* One per category on zerorank.ai/blog. Five are the comp's own pairs; the
   teal is new, because the comp keys five categories and the blog runs six. */
.zr-pill--tools{ background:#E8F1FF; color:#1D5FBF; }   /* AI Search Tools      */
.zr-pill--strat{ background:#E2F4F6; color:#12707C; }   /* AI Search Strategies */
.zr-pill--edu  { background:#E6F7EE; color:#1C7A4F; }   /* AI Search Education  */
.zr-pill--zero { background:#F3F4F6; color:#525252; }   /* Zero-Click Search    */
.zr-pill--case { background:#F1ECFF; color:#5B3BC4; }   /* Case Studies         */
.zr-pill--prod { background:#FFF1E6; color:#9A4B12; }   /* Product              */
.zr-pill--dark { background:var(--bl-ink); color:#fff; }

/* ── post meta line ────────────────────────────────────────────────────── */
/* Real bylines are longer than the comp's. Without the wrap the row broke
   inside a name — "Kelvin / Çobanaj", "8 min / read" — so it wraps between
   items instead and each item stays whole. */
.zr-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; width:100%; min-width:0; }
.zr-meta__by, .zr-meta time, .zr-meta__read{ white-space:nowrap; }
.zr-meta__av{
  flex:0 0 auto; width:28px; height:28px; border-radius:99px;
  background:var(--bl-ph); border:1px solid var(--bl-hair);
  overflow:hidden;
}
.zr-meta__av img{ width:100%; height:100%; object-fit:cover; display:block; }
/* No photos in this repo for four of the six writers, and half a byline row
   in portraits and half in grey discs reads worse than none. Initials on the
   author's own brand colour — both are the live site's data — say who wrote
   it without inventing a face. Swap the <img> back in when the set is whole. */
.zr-meta__av--i{
  display:grid; place-items:center; border-color:transparent;
  background:var(--av-bg); color:var(--av-fg);
  font-family:'Inter', var(--zr-font);
  font-size:10.5px; font-weight:600; line-height:1; letter-spacing:.01em;
}
.zr-meta__by{ font-size:13.5px; font-weight:500; line-height:20px; color:var(--bl-ink); }
.zr-meta__dot{ font-size:13.5px; line-height:20px; color:var(--bl-dot); }
.zr-meta time, .zr-meta__read{
  font-family:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; line-height:18px; color:var(--bl-dim);
}

/* ── the cover placeholder ──────────────────────────────────────────────
   The comp ships grey boxes labelled "cover". Rather than invent imagery,
   they stay grey and labelled — swap the <img> in when art exists. */
.zr-cover{
  display:grid; place-items:center; width:100%;
  background:var(--bl-ph); overflow:hidden;
}
.zr-cover span{
  font-family:'Geist Mono', ui-monospace, monospace;
  font-size:12px; line-height:18px; color:#A5A5A5;
}
.zr-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── post card ─────────────────────────────────────────────────────────── */
.zr-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.zr-card{
  display:flex; flex-direction:column; min-width:0;
  background:#fff; border:1px solid var(--bl-hair); border-radius:22px;
  box-shadow:var(--bl-card-sh);
  overflow:hidden; text-decoration:none;
  transition:border-color .18s var(--zr-ease-out-quad),
             box-shadow .18s var(--zr-ease-out-quad);
}
.zr-card:hover{ border-color:#D8E2F6; box-shadow:0 10px 22px -8px rgba(31,36,41,.10); }
.zr-card .zr-cover{ height:200px; flex:0 0 auto; }
.zr-card__body{ display:flex; flex-direction:column; gap:12px; padding:20px; }
/* The comp's cards carry one-line titles. The real ones run to fourteen
   words, so both title and excerpt clamp at three lines and the rule takes
   the slack — every byline in a row then sits on the same baseline. */
.zr-card__body{ flex:1 1 auto; }
.zr-card__h{
  margin:0; font-size:20px; font-weight:500; line-height:28px;
  letter-spacing:-.35px; color:var(--bl-ink); text-wrap:pretty;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .16s var(--zr-ease-out-quad);
}
.zr-card:hover .zr-card__h{ color:#0B1220; }
.zr-card__p{
  margin:0; font-size:14.5px; line-height:22px; color:var(--bl-dim); text-wrap:pretty;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.zr-card__rule{ height:1px; margin-top:auto; background:var(--bl-rule); }

/* the count beside "Latest", and the line when a tab comes back empty */
.zr-bl__count{
  margin:0; flex:0 0 auto;
  font-family:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; line-height:18px; color:var(--bl-dim);
}
.zr-bl__empty{ margin:0; padding:48px 0; text-align:center; font-size:15px; color:var(--bl-dim); }

/* `hidden` has to win. .zr-card is display:flex and .zr-cards is a grid, both
   of which outrank the UA's [hidden]{display:none} on specificity — so the
   filter set the attribute and nothing moved. */
.zr-bl [hidden]{ display:none !important; }

/* ── featured post ─────────────────────────────────────────────────────── */
.zr-feat{
  display:flex; align-items:center; gap:32px;
  padding:24px; background:#fff;
  border:1px solid var(--bl-hair); border-radius:24px;
  box-shadow:var(--bl-feat-sh);
  text-decoration:none;
  transition:border-color .18s var(--zr-ease-out-quad),
             box-shadow .18s var(--zr-ease-out-quad);
}
.zr-feat:hover{ border-color:#D8E2F6; box-shadow:0 14px 30px -10px rgba(31,36,41,.13); }
.zr-feat .zr-cover{ flex:0 0 auto; width:560px; max-width:52%; aspect-ratio:16/10; border-radius:16px; }
.zr-feat__copy{ display:flex; flex-direction:column; gap:16px; min-width:0; flex:1 1 auto; }
.zr-feat__tags{ display:flex; align-items:center; gap:8px; }
.zr-feat__h{
  margin:0; font-size:clamp(24px, 2.2vw, 32px); font-weight:500; line-height:1.31;
  letter-spacing:-.028em; color:var(--bl-ink); text-wrap:pretty;
}
.zr-feat__p{ margin:0; font-size:16px; line-height:26px; color:var(--bl-body); text-wrap:pretty; }

/* ── newsletter strip ──────────────────────────────────────────────────── */
.zr-news{
  display:flex; align-items:center; gap:48px; flex-wrap:wrap;
  padding:40px 44px;
  background:#FBFCFE; border:1px solid var(--bl-hair); border-radius:24px;
}
.zr-news__copy{ display:flex; flex-direction:column; gap:10px; flex:1 1 320px; min-width:0; }
.zr-news__h{ margin:0; font-size:clamp(22px, 2vw, 28px); font-weight:500; line-height:1.29; letter-spacing:-.025em; color:var(--bl-ink); }
.zr-news__p{ margin:0; font-size:16px; line-height:24px; color:var(--bl-body); }
.zr-news__form{ display:flex; align-items:center; gap:10px; width:min(480px, 100%); }
.zr-news__form input{
  flex:1 1 auto; min-width:0; height:52px; padding-inline:18px;
  background:#fff; border:1px solid var(--bl-hair); border-radius:12px;
  font:inherit; font-size:16px; color:var(--zr-ink);
}
.zr-news__form input::placeholder{ color:#A9AEB5; }
.zr-news__form input:focus-visible{ outline:2px solid var(--zr-blue); outline-offset:1px; }
.zr-news__form button{
  flex:0 0 auto; height:52px; padding-inline:24px;
  border:0; border-radius:12px; background:var(--zr-blue); color:#fff;
  font:inherit; font-size:16px; font-weight:500; cursor:pointer;
  box-shadow:0 1px 1px rgba(0,0,0,.1), inset 0 3px 14px rgba(255,255,255,.35);
  transition:background .16s linear, box-shadow .16s linear;
}
.zr-news__form button:hover{ background:#0D55DD; box-shadow:0 1px 1px rgba(0,0,0,.1), inset 0 3px 14px rgba(255,255,255,.5); }
.zr-news__form button:active{ translate:0 1px; box-shadow:inset 0 2px 8px rgba(15,23,42,.24); }
.zr-news__note{ flex:1 1 100%; margin:0; font-size:12.5px; color:var(--bl-dim); }