/*
| site-blog.css — /blog and /blog/{slug}.
|
| Loaded ONLY by the two blog views, on top of site.css: every colour, font,
| radius and easing below is one of site.css's own :root tokens, so the blog
| is the same site in the same two themes and inherits every future palette
| change for free. Nothing here redefines a token; the dark rules mirror
| site.css's `html[data-theme="dark"]` selector exactly, which is what keeps
| the blog in step with the theme toggle in the shell's header.
|
| No new primitive is invented where one exists: `.wrap`, `.wrap--tight`,
| `.eyebrow`, `.h-xl`, `.h-md`, `.lead`, `.btn`, `.page__head` and `.page__foot`
| all come from site.css and are used as-is.
|
| Two things ARE defined here that the marketing pages never needed:
|   · `.pgn*` — the shared paginator (resources/views/vendor/pagination/
|     tailwind.blade.php) is styled in app.css against app.css tokens
|     (--brand, --border-strong, --focus-ring). The public site does not load
|     app.css, so without the block at the bottom of this file the paginator
|     would render as unstyled links on /blog.
|   · `.bl-prose *` — App\Support\MaterialMarkdown's output is styled by
|     lms-material.css inside the portal, which the public site also does not
|     load. Same elements, site typography.
*/

/* ═══════════════════════════════════════════════════════ list ══ */

.bl{
  padding-block: clamp(28px,3.4vw,52px) clamp(56px,6vw,96px);
}

.bl__grid{
  display: grid;
  gap: clamp(18px,2vw,28px);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.bl__empty{
  color: var(--mut);
  font-size: 1.05rem;
  padding-block: clamp(40px,6vw,90px);
  text-align: center;
}

.bl__feed{
  margin-block-start: clamp(28px,3vw,44px);
  font-size: .92rem;
}
.bl__feed a{
  color: var(--mut);
  font-family: var(--ff-m);
  letter-spacing: .04em;
  border-block-end: 1px solid var(--line2);
  padding-block-end: 2px;
  transition: color .3s var(--ease);
}
.bl__feed a:hover{ color: var(--navy); }
html[data-theme="dark"] .bl__feed a:hover{ color: var(--sky); }

/* ── the card ─────────────────────────────────────────────────────────────
   One anchor, one destination. Everything inside is a <span>, because an
   <a> may not contain block-level flow content and a nested anchor would
   give the same card two targets. */

.bl-card{
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: translate .4s var(--ease), box-shadow .4s var(--ease);
}
.bl-card:hover{
  translate: 0 -3px;
  box-shadow: inset 0 0 0 1px var(--line2), var(--shadow);
}
.bl-card:focus-visible{
  outline: 2px solid var(--azure);
  outline-offset: 3px;
}

.bl-card__cover{
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg3);
  overflow: hidden;
}
.bl-card__cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .6s var(--ease);
}
.bl-card:hover .bl-card__cover img{ scale: 1.04; }

.bl-card__body{
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(18px,1.7vw,24px);
  flex: 1;
}

.bl-card__meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--ff-m);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--mut);
}
/* A date is atomic Latin data on an Arabic line; without the isolation it
   reorders around the separator. Same treatment the landing gives its own
   numeric runs. */
.bl-card__meta time{ unicode-bidi: isolate; }
.bl-card__dot{ opacity: .5; }

.bl-card__title{
  font-family: var(--ff-a);
  font-weight: 600;
  font-size: clamp(1.08rem,1.25vw,1.28rem);
  line-height: 1.5;
  color: var(--ink);
}

.bl-card__excerpt{
  color: var(--mut);
  font-size: .96rem;
  line-height: 1.8;
  /* Three lines, then stop: the cards sit in a grid and a runaway excerpt
     would set the row height for every card beside it. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bl-card__more{
  margin-block-start: auto;
  padding-block-start: 6px;
  font-family: var(--ff-m);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.bl-card__more::after{
  content: '';
  display: inline-block;
  inline-size: 16px;
  block-size: 1.5px;
  margin-inline-start: 8px;
  vertical-align: middle;
  background: currentColor;
  transition: inline-size .35s var(--ease);
}
.bl-card:hover .bl-card__more::after{ inline-size: 26px; }
html[data-theme="dark"] .bl-card__more{ color: var(--sky); }

/* ═══════════════════════════════════════════════════════ article ══ */

.bl-crumbs{
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-family: var(--ff-m);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--mut);
  margin-block-end: 18px;
}
.bl-crumbs a{ transition: color .3s var(--ease); }
.bl-crumbs a:hover{ color: var(--navy); }
html[data-theme="dark"] .bl-crumbs a:hover{ color: var(--sky); }

.bl-article__meta{
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-family: var(--ff-m);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--mut);
  margin-block: 14px 18px;
}
.bl-article__meta time{ unicode-bidi: isolate; }

/* The reading column and everything that belongs to the piece. 72ch is set
   on the prose, not here: the cover and the CTA are full-width, only the
   text is narrowed.

   The bottom padding lives on `.bl-article__more` instead, because that block
   sits OUTSIDE the <article> element (related links and the way back are
   about the page, not part of it) and is always rendered. Splitting the pad
   this way keeps one continuous rhythm across the boundary. */
.bl-article__body{ padding-block: clamp(26px,3vw,44px) 0; }
.bl-article__more{ padding-block: 0 clamp(56px,6vw,96px); }

.bl-article__cover{
  inline-size: 100%;
  block-size: auto;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  margin-block-end: clamp(26px,3vw,44px);
}

/* ── the rendered body ─────────────────────────────────────────────────── */

.bl-prose{
  max-inline-size: 72ch;
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.95;
}
.bl-prose > :first-child{ margin-block-start: 0; }
.bl-prose > :last-child{ margin-block-end: 0; }

.bl-prose p{ margin-block: 0 1.15em; color: var(--mut); }

.bl-prose h2,
.bl-prose h3,
.bl-prose h4{
  font-family: var(--ff-a);
  color: var(--ink);
  line-height: 1.4;
  margin-block: 1.8em .6em;
}
.bl-prose h2{ font-size: clamp(1.3rem,1.9vw,1.7rem); }
.bl-prose h3{ font-size: clamp(1.14rem,1.5vw,1.35rem); }
.bl-prose h4{ font-size: 1.06rem; }

.bl-prose ul,
.bl-prose ol{
  margin-block: 0 1.15em;
  padding-inline-start: 1.4em;
  color: var(--mut);
}
.bl-prose li{ margin-block-start: .4em; }
.bl-prose li::marker{ color: var(--azure); }

.bl-prose strong{ color: var(--ink); font-weight: 700; }

.bl-prose a{
  color: var(--navy);
  border-block-end: 1px solid color-mix(in srgb, var(--navy) 35%, transparent);
  transition: border-color .3s var(--ease);
}
.bl-prose a:hover{ border-block-end-color: var(--navy); }
html[data-theme="dark"] .bl-prose a{
  color: var(--sky);
  border-block-end-color: color-mix(in srgb, var(--sky) 35%, transparent);
}
html[data-theme="dark"] .bl-prose a:hover{ border-block-end-color: var(--sky); }

/* Inline code and code blocks always read left-to-right, whatever the page
   direction — a snippet is Latin source, not Arabic prose. */
.bl-prose code{
  font-family: var(--ff-m);
  font-size: .92em;
  direction: ltr;
  unicode-bidi: isolate;
  padding: .12em .42em;
  border-radius: 6px;
  background: var(--bg3);
  color: var(--ink);
}

.bl-prose .prose__code{
  direction: ltr;
  text-align: start;
  margin-block: 0 1.3em;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--dark);
  color: #dbe7f7;
  overflow-x: auto;
  line-height: 1.7;
  font-size: .92rem;
  box-shadow: inset 0 0 0 1px var(--line2);
}
.bl-prose .prose__code code{
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.bl-prose .prose__img{
  inline-size: 100%;
  block-size: auto;
  border-radius: 16px;
  margin-block: .4em 1.3em;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── the in-article CTA ───────────────────────────────────────────────── */

.bl-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px,2vw,28px);
  flex-wrap: wrap;
  margin-block-start: clamp(38px,4vw,62px);
  padding: clamp(22px,2.4vw,32px);
  border-radius: 22px;
  background: var(--bg2);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.bl-cta p{ color: var(--mut); margin-block-start: 7px; max-inline-size: 56ch; }

/* ── related ──────────────────────────────────────────────────────────── */

.bl-related{
  margin-block-start: clamp(46px,5vw,80px);
  padding-block-start: clamp(30px,3vw,44px);
  border-block-start: 1px solid var(--line);
}
.bl-related > .h-md{ margin-block-end: clamp(18px,2vw,26px); }

/* ═══════════════════════════════════════════ paginator (site tokens) ══
   Same markup as the platform paginator, restyled against site.css's
   palette — see this file's header for why it cannot simply borrow
   app.css's rules. */

.pgn{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-block-start: clamp(34px,3.6vw,54px);
}
.pgn__link,
.pgn__gap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-inline-size: 40px;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--ff-m);
  font-size: .9rem;
  font-weight: 600;
  color: var(--mut);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.pgn__link:hover{ color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
.pgn__link:focus-visible{ outline: 2px solid var(--azure); outline-offset: 2px; }
.pgn__link.is-current{ background: var(--navy); color: #fff; box-shadow: none; }
.pgn__link.is-disabled{ opacity: .45; pointer-events: none; }
.pgn__gap{ box-shadow: none; padding-inline: 4px; min-inline-size: 0; }
.pgn__ico{ inline-size: 16px; block-size: 16px; flex: 0 0 auto; }
/* One chevron glyph, mirrored for RTL, so "previous" always points back
   toward the start of the list — the RIGHT edge in Arabic. Identical rule to
   app.css's, because the markup it styles is the same file. */
[dir="rtl"] .pgn__ico{ transform: scaleX(-1); }

@media (max-width: 560px){
  .pgn__link--num:not(.is-current),
  .pgn__gap{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .bl-card,
  .bl-card__cover img,
  .bl-card__more::after,
  .pgn__link{ transition: none; }
  .bl-card:hover{ translate: none; }
  .bl-card:hover .bl-card__cover img{ scale: 1; }
}

/* ── the article's keyword chips (D-085) ───────────────────────────────────
   Real content inside the <article>, not a meta tag: what the piece covers,
   said in the words a reader would search for. Deliberately NOT links —
   there is no tag-archive route to point them at, and a chip that looks
   clickable and is not is worse than a plain one. */
.bl-kw{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-block:34px 0;padding-block-start:22px;
  border-block-start:1px solid var(--line2);
}
.bl-kw__label{font-size:13.5px;font-weight:700;color:var(--mut);margin-inline-end:2px}
.bl-kw__chip{
  padding:6px 13px;border-radius:999px;font-size:13.5px;line-height:1.5;
  background:var(--bg3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2);
}
@media (max-width:560px){
  .bl-kw{margin-block-start:26px}
  .bl-kw__label{flex:1 1 100%;margin-block-end:2px}
}