/**
 * blog-editorial.css — Blog's 2026-09 (Phase 5) editorial reskin, the
 * fifth and last of this pass (Listing/Engine/Profile/Product already had
 * one). Direct owner feedback: "blog still using its own kind of css i do
 * not need that / all drive from template white bg etc" — Blog used to
 * ship a completely separate design system (blog-public.css, its own
 * Fraunces + IBM Plex MONO pairing, its own .pf-eyebrow/.pf-title/
 * .pf-byline/.pf-post-card vocabulary, its own --pf-* tokens). This file
 * retires all of that outright and rebuilds blog-list.php/blog-post.php
 * on the SAME class names Listing's own hero already uses — .sector-chip/
 * .hero-name/.hero-handle/.cover-hero/.banner-noimg/.stat-pill — mirrored
 * onto --bl-* tokens exactly like the other four reskins mirror --le-*,
 * not re-invented per page. Loaded only when BlogController's three
 * render() calls (index/category/show) pass $blogEditorialTheme = true
 * (see views/layout.php's conditional <link> block). Scoped under
 * .bl-editorial, the wrapper blog-list.php/blog-post.php print around
 * their own visible markup.
 *
 * Token names/values (--bl-x) are byte-identical to --le-x/--ee-x/--pe-x/
 * --pp-x, for one consistent site identity across all five reskinned
 * templates — this is the whole point of the "template resolver" phase:
 * one visual language, not five.
 *
 * Shared atoms deliberately reused, not renamed: .panel (sidebar
 * Categories card), .kit-pill (category chips) and .kit-card (the
 * list-grid card's border/shadow/hover — see .bl-post-card below, same
 * "page class + kit-card" pairing listing.php's own prod-svc-card
 * already uses) all read color from the re-pointed OLD sitewide vars
 * below, the same legitimate cascade technique the other four reskins
 * use — not a color overlay on dead page-specific classes.
 *
 * views/components/related-posts.php (blog-post.php's own "Related
 * reading" grid) is rewritten alongside this file to emit these same
 * .bl-card-grid/.bl-post-card classes instead of its previous, separate
 * .pf-rp-* vocabulary — one card shape for both the /blog list and a
 * post's own related-reading grid, not two.
 */
.bl-editorial {
  --bl-ink:      #1B1D18;
  --bl-soft:     #5A594C;
  --bl-mute:     #8D8879;
  --bl-bg:       #FFFFFF;
  --bl-surface:  #FFFFFF;
  --bl-surface-2:#F7F7F5;
  --bl-surface-3:#EFEEE9;
  --bl-border:   #E6E4DC;
  --bl-brand:      #1E4B3D;
  --bl-brand-dark: #163A2F;
  --bl-brand-tint: #E3F1E9;
  --bl-brand-ink:  #1F7A4D;
  --bl-signal:     #B5740E;
  --bl-signal-tint:#FBF0DA;
  --bl-verified:      #1568A8;
  --bl-verified-tint: #E8F1FA;
  --bl-danger:     #B3261E;
  --bl-danger-tint:#FBECEB;
  --bl-shadow: 0 1px 2px rgba(20,22,17,.04), 0 18px 40px -22px rgba(20,22,17,.22);
  --bl-r-sm: 12px; --bl-r-md: 16px; --bl-r-lg: 20px;
  --bl-font-h: 'Fraunces', Georgia, serif;
  --bl-font-b: 'IBM Plex Sans', system-ui, sans-serif;

  background: var(--bl-bg);
  color: var(--bl-ink);
  font-family: var(--bl-font-b);
  font-size: 15px;
  line-height: 1.6;

  /* Old sitewide vars, re-pointed — same technique product-editorial.css's
     own docblock explains: every shared atom this page uses (.panel,
     .kit-pill, .kit-card, .btn-*) already reads color from these, so
     re-pointing just them re-themes every one at once, in both light and
     dark, with zero markup changes. */
  --primary: var(--bl-brand);
  --ink: var(--bl-ink);
  --text-primary: var(--bl-ink);
  --text-secondary: var(--bl-soft);
  --text-muted: var(--bl-mute);
  --line: var(--bl-border);
  --border-color: var(--bl-border);
  --surface: var(--bl-surface);
  --surface-1: var(--bl-surface-2);
  --card-bg: var(--bl-surface);
  --bg: var(--bl-bg);
  --bg-page: var(--bl-bg);
  --bg-accent: var(--bl-surface-2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bl-editorial {
    --bl-ink:      #EDEDE6; --bl-soft: #C2C0B2; --bl-mute: #8F8C7C;
    --bl-bg:       #14161A; --bl-surface: #191C1F; --bl-surface-2:#20242A; --bl-surface-3:#262B31;
    --bl-border:   #2C3138;
    --bl-brand:      #4FAE83; --bl-brand-dark: #6FC49B; --bl-brand-tint: #163227; --bl-brand-ink: #6FC49B;
    --bl-signal:     #E0A548; --bl-signal-tint:#332811;
    --bl-verified:      #6BB4EA; --bl-verified-tint: #17293A;
    --bl-danger:     #E28880; --bl-danger-tint:#33201E;
  }
}
:root[data-theme="dark"] .bl-editorial {
  --bl-ink:      #EDEDE6; --bl-soft: #C2C0B2; --bl-mute: #8F8C7C;
  --bl-bg:       #14161A; --bl-surface: #191C1F; --bl-surface-2:#20242A; --bl-surface-3:#262B31;
  --bl-border:   #2C3138;
  --bl-brand:      #4FAE83; --bl-brand-dark: #6FC49B; --bl-brand-tint: #163227; --bl-brand-ink: #6FC49B;
  --bl-signal:     #E0A548; --bl-signal-tint:#332811;
  --bl-verified:      #6BB4EA; --bl-verified-tint: #17293A;
  --bl-danger:     #E28880; --bl-danger-tint:#33201E;
}

.bl-editorial h1, .bl-editorial h2, .bl-editorial h3 { font-family: var(--bl-font-h); color: var(--bl-ink); letter-spacing: -.01em; }

/* ---- Cover — 2026-09 (v5.98) direct owner correction (annotated
   reference screenshot, approved mockup r3): this is NO LONGER a
   full-bleed hero above the row (that was the v5.96/v5.97 shape, matching
   Listing's own .cover-hero) — it now renders INSIDE <article
   class="col-lg-8"> below the title/byline/meta-strip, so its box is
   already contained to the column's own width; only the aspect-ratio
   changes here, from a wide 16/4.5 letterbox (built for spanning the full
   page) to a 16/9 block that reads correctly at column width, per the
   Execora reference. Blog-only — scoped under .bl-editorial, so
   listing-editorial.css/profile-editorial.css/engine-editorial.css's own
   .cover-hero rules (still full-bleed, unchanged) are untouched. */
.bl-editorial .cover-hero{border-radius:var(--bl-r-lg);overflow:hidden;position:relative;aspect-ratio:16/9}
@media(max-width:767px){.bl-editorial .cover-hero{aspect-ratio:4/3;border-radius:var(--bl-r-md)}}
.bl-editorial .cover-main{overflow:hidden;position:relative;background:linear-gradient(135deg,var(--bl-brand-tint),var(--bl-surface-3));height:100%;width:100%}
.bl-editorial .cover-main img{width:100%;height:100%;object-fit:cover;display:block}
.bl-editorial .banner-noimg{width:100%;height:100%;position:relative;display:flex;align-items:flex-start;padding:22px}
.bl-editorial .banner-noimg::before{content:"";position:absolute;inset:0;background:var(--ni-grad)}
.bl-editorial .banner-noimg-inner{position:relative;z-index:2;color:#fff}
.bl-editorial .banner-noimg-inner h1{color:#fff;font-size:24px;font-weight:660;margin:0}

/* ---- Title row — byte-identical to listing-editorial.css's own
   .sector-chip/.hero-name/.hero-handle. Kicker = category name (the same
   slot Listing's sector chip occupies); handle = author · read time ·
   views, one line, same shape the approved mockup used. */
.bl-editorial .sector-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--bl-brand-tint);color:var(--bl-brand-ink);font-weight:600;font-size:12.3px;padding:.3rem .7rem;border-radius:999px;text-decoration:none;margin-bottom:.6rem}
.bl-editorial .hero-name{font-weight:660;font-size:28px;text-wrap:balance}
.bl-editorial .hero-handle{color:var(--bl-mute);font-size:13.5px;margin-bottom:.5rem}
.bl-editorial .stat-pill{background:var(--bl-surface-2);border:1px solid var(--bl-border);color:var(--bl-soft);font-size:12.5px;font-weight:650;padding:.3rem .65rem;border-radius:999px;display:inline-flex;align-items:center;gap:.3rem}

/* ---- Article body typography — the actual post content. */
.bl-editorial .article-body{font-size:15.5px;line-height:1.8;color:var(--bl-ink)}
.bl-editorial .article-body p{margin-bottom:1.1em}
.bl-editorial .article-body img{max-width:100%;border-radius:var(--bl-r-md);margin:1.2em 0}
.bl-editorial .article-body h2,.bl-editorial .article-body h3{margin:1.6em 0 .6em}
.bl-editorial .article-body blockquote{border-left:3px solid var(--bl-brand);padding:.4em 1em;color:var(--bl-soft);margin:1.2em 0}
.bl-editorial .article-body ul,.bl-editorial .article-body ol{padding-left:1.4em;margin-bottom:1.1em}
.bl-editorial .video-frame{border-radius:var(--bl-r-md);overflow:hidden;margin-bottom:1.5rem}
.bl-editorial .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:1.5rem}
.bl-editorial .gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--bl-r-sm)}

/* Legacy per-format body markup — Blog::renderBody() (core/Blog.php) emits
   these exact class names directly into a post's rendered HTML for
   body_format='legacy' listicle/guide posts (predates the 2026-09 one-page
   editor), and core/BlogShortcodes.php emits .blog-embed/.blog-embed-missing
   for [listing id=..]/[product id=..] embeds in ANY post's body — both are
   real, live PHP-side dependencies on these class names, ported over
   byte-for-byte (values re-pointed to --bl-* tokens) rather than dropped
   when blog-public.css retired, which would have silently un-styled every
   existing listicle/guide post and every shortcode embed on the site. */
.bl-editorial .pf-listicle{list-style:none;counter-reset:pf-li;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.bl-editorial .pf-listicle li{counter-increment:pf-li;position:relative;padding:14px 16px 14px 54px;background:var(--bl-surface);border:1px solid var(--bl-border);border-radius:var(--bl-r-sm)}
.bl-editorial .pf-listicle li::before{content:counter(pf-li);position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--bl-brand-tint);color:var(--bl-brand-ink);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.bl-editorial .pf-guide-step{display:flex;gap:14px;margin-bottom:22px}
.bl-editorial .pf-guide-num{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--bl-brand-tint);color:var(--bl-brand-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.bl-editorial .blog-embed{margin:1.6em 0;max-width:340px}
.bl-editorial .blog-embed .kit-card{box-shadow:var(--bl-shadow)}
.bl-editorial .blog-embed-missing{margin:1.2em 0;padding:10px 14px;border:1px dashed var(--bl-border);border-radius:var(--bl-r-sm);color:var(--bl-mute);font-size:13px}

/* ---- Format/featured badges — same visual language as Listing's own
   badge-status chips, re-scoped. */
.bl-editorial .fmt-badge{display:inline-flex;align-items:center;gap:5px;background:var(--bl-surface-2);border:1px solid var(--bl-border);color:var(--bl-soft);font-size:11.5px;font-weight:650;padding:.25rem .6rem;border-radius:999px}
.bl-editorial .fmt-badge-featured{background:var(--bl-signal-tint);color:var(--bl-signal);border-color:transparent}

/* ---- Tags ---- */
.bl-editorial .tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:1.5rem 0}
.bl-editorial .tag-chip{background:var(--bl-surface-2);color:var(--bl-soft);font-size:12.5px;padding:.3rem .7rem;border-radius:999px;text-decoration:none}
.bl-editorial .tag-chip:hover{background:var(--bl-brand-tint);color:var(--bl-brand-ink)}

/* ---- Comments ---- */
.bl-editorial .comment-row{border-top:1px solid var(--bl-border);padding:1rem 0}
.bl-editorial .comment-row:first-of-type{border-top:0}
.bl-editorial .comment-name{font-weight:650;font-size:13.5px}
.bl-editorial .comment-time{color:var(--bl-mute);font-size:12px}

/* ---- List grid — same "page class + kit-card" pairing listing.php's own
   prod-svc-card uses (border/shadow/hover come from the shared .kit-card
   atom via the re-pointed vars above; only this page's own cover/body
   layout is new). One card component for both the /blog grid and the
   Related-reading grid at the bottom of a post (see related-posts.php,
   which already renders through this same class since m_0… — no second
   card shape on this page). */
.bl-editorial .bl-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.bl-editorial .bl-post-card{display:block;text-decoration:none;color:inherit;overflow:hidden}
/* Phase 5 — was border-radius:var(--bl-r-md) var(--bl-r-md) 0 0 (a fixed
   16px, independent of the card's own corner radius), so assigning this
   card a sharper/rounder card_definitions style (see kit.css's
   --kit-card-radius) moved the outer .kit-card box but left this inner
   cover image's top corners at the old fixed radius — same box, two
   corner radii. Reads from the same var the outer box reads, with the
   old 16px as its fallback so an unassigned context is unchanged. */
.bl-editorial .bl-post-card .cov{aspect-ratio:16/10;overflow:hidden;border-radius:var(--kit-card-radius, var(--bl-r-md)) var(--kit-card-radius, var(--bl-r-md)) 0 0;background:linear-gradient(135deg,var(--bl-brand-tint),var(--bl-surface-3));position:relative}
.bl-editorial .bl-post-card .cov img{width:100%;height:100%;object-fit:cover;display:block}
.bl-editorial .bl-post-card .cov .banner-noimg-inner h1{font-size:16px}
.bl-editorial .bl-post-card .body{padding:14px 16px 16px}
.bl-editorial .bl-post-card h2{font-size:16px;font-weight:650;margin:.5rem 0 .35rem;line-height:1.35}
.bl-editorial .bl-post-card .desc{font-size:13px;color:var(--bl-soft);margin-bottom:.6rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-editorial .bl-post-card .foot{font-size:12px;color:var(--bl-mute)}
.bl-editorial .bl-post-card .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bl-editorial .bl-card-grid-compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* related-posts.php's "list" variant (sidebar/mobile row layout) — the one
   shape .bl-card-grid/.bl-post-card doesn't cover, so it gets its own
   small rule set rather than being forced into a card grid. */
.bl-editorial .bl-list{display:flex;flex-direction:column;gap:2px}
.bl-editorial .bl-list-row{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;padding:.6rem 0;border-bottom:1px solid var(--bl-border)}
.bl-editorial .bl-list-row:last-child{border-bottom:0}
.bl-editorial .bl-list-row .thumb{width:64px;height:64px;border-radius:var(--bl-r-sm);overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--bl-brand-tint),var(--bl-surface-3))}
.bl-editorial .bl-list-row .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bl-editorial .bl-list-row h3{font-size:13.5px;font-weight:650;margin:0 0 .2rem;line-height:1.3}
.bl-editorial .bl-list-row .foot{font-size:11.5px;color:var(--bl-mute)}

.bl-editorial .rp-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}
.bl-editorial .rp-head h2{font-size:19px;margin:0}
.bl-editorial .rp-viewall{font-size:13px;color:var(--bl-brand-ink);text-decoration:none;font-weight:600}

/* ---- Page head (blog-list.php's own kicker + h1 + count line) ---- */
.bl-editorial .page-head{margin-bottom:1.6rem}
.bl-editorial .page-head h1{font-size:32px;margin:.4rem 0 .25rem;text-wrap:balance}
.bl-editorial .page-sub{color:var(--bl-mute);font-size:13.5px}

.bl-editorial .empty-note{background:var(--bl-surface-2);border:1px dashed var(--bl-border);border-radius:var(--bl-r-md);padding:2.5rem;text-align:center;color:var(--bl-mute)}

/* ---- Sidebar — blog-list.php's Categories box still reuses the shared
   .panel atom (re-pointed vars above), same as every other page's plain
   sidebar cards.

   2026-09 audit fix #3 (v5.97) — direct owner report: "blog is not full
   width [...] sidebar ek taraf, sidebar is sticky and author block also,
   like event page." blog-post.php's own sidebar used that same plain,
   non-sticky .panel — the only page family whose sidebar didn't stick
   with the reader while scrolling, and the only one with no author
   block. .side-card/.content-sec here are the byte-identical recipe
   engine-editorial.css's own .es-editorial .side-card/.content-sec and
   profile-editorial.css's .pf-editorial .pf-side/.content-sec already
   use (position:sticky, one card, internal dividers — never a second
   sibling sticky card, the same overlap bug engine-single.php's own
   docblock already documents avoiding), just re-scoped to --bl-* tokens.
   blog-post.php now wraps its Author block + Categories in ONE
   .side-card so both scroll together, same shape as engine-single.php's
   "who posted this" contact card. blog-list.php is unchanged — a post
   INDEX page has no single author to show and its Categories box is
   short enough that sticky adds nothing there. */
.bl-editorial .side-card{background:var(--bl-surface);border:1px solid var(--bl-border);border-radius:var(--bl-r-md);padding:20px 22px;position:sticky;top:76px}
@media(max-width:991px){.bl-editorial .side-card{position:static;padding:18px}}
.bl-editorial .content-sec{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--bl-border)}
.bl-editorial .side-card>.content-sec:first-child{margin-top:0;padding-top:0;border-top:0}

.bl-editorial .author-block{display:flex;align-items:center;gap:.7rem}
.bl-editorial .author-av{width:48px;height:48px;border-radius:50%;background:var(--bl-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;flex-shrink:0;overflow:hidden}
.bl-editorial .author-av img{width:100%;height:100%;object-fit:cover}
.bl-editorial .author-name{font-weight:650;font-size:14.5px;color:var(--bl-ink);text-decoration:none}
.bl-editorial .author-name:hover{color:var(--bl-brand-ink)}
.bl-editorial .author-role{font-size:12.5px;color:var(--bl-mute)}

.bl-editorial .cat-link{display:block;padding:.5rem 0;font-size:13.5px;color:var(--bl-soft);text-decoration:none;border-bottom:1px solid var(--bl-border)}
.bl-editorial .cat-link:last-child{border-bottom:0}
.bl-editorial .cat-link:hover,.bl-editorial .cat-link.is-active{color:var(--bl-brand-ink);font-weight:650}

.bl-editorial .preview-banner{background:var(--bl-signal-tint);color:var(--bl-signal);border-radius:var(--bl-r-sm);padding:.75rem 1rem;font-size:13px;margin-bottom:1.2rem}

@media(max-width:991px){.bl-editorial .row.g-5{--bs-gutter-y:2rem}}

/* v5.98 added a 70/30 override here (.bl-ratio-70). v5.99 — direct owner
   follow-up ("locking the ratio of blog listing professional profile to
   66.7/33.3 and product 60/40 only ... quick fix this percentage thing to
   unify") removed it outright: Blog now renders the plain Bootstrap
   col-lg-8/col-lg-4 default (66.7%/33.3%), same as Listing/Profile/
   Professional/Job/Event/Candidate. Product keeps its own distinct 60/40
   (product-editorial.css's .pp-ratio-60) — the one deliberate exception
   sitewide. */