/* ══════════════════════════════════════════════════════════════════
   blog-article.css — editorial article layout for /blog/ posts
   ──────────────────────────────────────────────────────────────────
   Built on the Ajrakh tokens in ad-styles.css :root (--cloth, --neel,
   --madder, --iron, --ochre, --cloth-border). Flat pigment only, no
   gradients, borders instead of shadows — see DESIGN-SYSTEM.md §0.

   WHY RAW TAG SELECTORS: everything inside `.ad-article-body` is
   styled by element (h2, p, ul, img, a...) rather than by class. The
   CMS stores post bodies as plain HTML, so the editor output drops in
   here unmodified and inherits the whole type scale. Do not convert
   these to utility classes — the admin editor cannot emit them.

   The old post template built articles out of marketing sections
   (.step-card, .cats-grid, .blog-cta) separated by full-width
   .ajrakh-strip dividers. That read as a landing page, not an
   article, and the strip under the title visibly cut the piece in
   two. Both are gone: one column, one uninterrupted read.
   ══════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ───────────────────────────────────────────────────
   Lives here rather than inline in each post: it was copy-pasted into
   every blog file, so a change had to be made in N places. The CMS
   emits it too, and it must match the index page exactly. */
.ad-breadcrumb {
  background: var(--cloth-deep);
  border-bottom: 1px solid var(--cloth-border);
  padding: 10px 0;
}
.ad-breadcrumb-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  font-size: 13px;
}
.ad-breadcrumb-link {
  color: var(--neel);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
}
.ad-breadcrumb-link:hover { text-decoration: underline; }
.ad-breadcrumb-sep { color: var(--cloth-border); font-size: 15px; flex-shrink: 0; }
.ad-breadcrumb-current {
  color: var(--iron);
  opacity: 0.55;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 640px) {
  .ad-breadcrumb-inner { padding: 0 16px; }
}

/* ── Page shell ───────────────────────────────────────────────── */
.ad-article-main {
  padding-top: var(--nav-h);
  background: var(--cloth);
}

/* Measure. 720px ≈ 68–72 characters at 18px Anek — the span where the
   eye reliably finds the next line without a head movement. The cover
   image and pull-quotes are allowed to exceed it; running text is not. */
.ad-article-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Featured image ───────────────────────────────────────────────
   First thing in the article, directly under the breadcrumb, exactly
   as the reference does it. Nothing sits between this and the title. */
.ad-article-cover {
  margin: 28px auto 26px;
  border: 1.5px solid var(--cloth-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cloth-deep);
  /* Reserve the box before the image loads so the title does not jump.
     Matches the 1200x675 the CMS will enforce on upload. */
  aspect-ratio: 16 / 9;
}
.ad-article-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Header: meta line, then title, then standfirst ───────────── */
.ad-article-head {
  margin-bottom: 30px;
}

.ad-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: #7A6A58;
  margin-bottom: 14px;
}
.ad-article-meta a { color: inherit; }
.ad-article-sep { color: var(--cloth-border); }

.ad-article-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  color: var(--neel);
  background: var(--neel-soft);
  text-decoration: none;
}
.ad-article-cat.organizer { color: var(--madder); background: var(--madder-soft); }

.ad-article-head h1 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--iron);
  margin: 0 0 16px;
}

/* Standfirst — one sentence, slightly larger than body, no italics.
   Carries the search snippet, so it is real content, not decoration. */
.ad-article-standfirst {
  font-size: 18.5px;
  line-height: 1.6;
  color: #6B5C4A;
  margin: 0;
}

/* Byline sits below the title so the headline is the first thing read. */
.ad-article-byline {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--cloth-border);
}
.ad-article-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--neel);
  color: var(--resist);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ad-article-byline-text { line-height: 1.4; }
.ad-article-byline-name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--iron);
}
.ad-article-byline-sub {
  display: block;
  font-size: 12.5px;
  color: #8B7B68;
}

/* ── Body prose ───────────────────────────────────────────────── */
.ad-article-body {
  font-size: 18px;
  line-height: 1.75;
  color: #4A4038;
  padding-bottom: 8px;
}

.ad-article-body > *:first-child { margin-top: 0; }
.ad-article-body > *:last-child { margin-bottom: 0; }

.ad-article-body p { margin: 0 0 22px; }

/* Headings. Space above is ~2.2x the space below so a heading binds to
   the text it introduces rather than floating between two blocks. */
.ad-article-body h2 {
  font-size: clamp(23px, 3.4vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--iron);
  margin: 46px 0 16px;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.ad-article-body h3 {
  font-size: clamp(19px, 2.6vw, 21px);
  font-weight: 650;
  line-height: 1.35;
  color: var(--iron);
  margin: 34px 0 12px;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.ad-article-body h4 {
  font-size: 17px;
  font-weight: 650;
  color: var(--iron);
  margin: 26px 0 10px;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* Inline links — underlined, not colour-only, so they survive both
   colour-blindness and the warm cloth ground. */
.ad-article-body a {
  color: var(--neel);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2.5px;
  transition: color 0.15s;
}
.ad-article-body a:hover { color: var(--madder); }

.ad-article-body strong { font-weight: 650; color: var(--iron); }

/* Lists. padding-left (not margin) keeps the marker inside the measure. */
.ad-article-body ul,
.ad-article-body ol {
  margin: 0 0 22px;
  padding-left: 26px;
}
.ad-article-body li { margin-bottom: 9px; }
.ad-article-body li:last-child { margin-bottom: 0; }
.ad-article-body ul li::marker { color: var(--madder); }
.ad-article-body ol li::marker { color: var(--neel); font-weight: 650; }
.ad-article-body ul ul,
.ad-article-body ol ol,
.ad-article-body ul ol,
.ad-article-body ol ul { margin: 9px 0 0; }

/* In-body images break the measure slightly to signal "figure". */
.ad-article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 30px 0;
  border: 1.5px solid var(--cloth-border);
  border-radius: 12px;
}
.ad-article-body figure { margin: 30px 0; }
.ad-article-body figure img { margin: 0; }
.ad-article-body figcaption {
  font-size: 13.5px;
  color: #8B7B68;
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}

.ad-article-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--madder);
  color: #5C5046;
  font-size: 19px;
  line-height: 1.65;
}
.ad-article-body blockquote p:last-child { margin-bottom: 0; }

/* Section rule. The only divider allowed inside an article, and only
   where the author asks for one — never auto-inserted between blocks. */
.ad-article-body hr {
  border: 0;
  border-top: 1px solid var(--cloth-border);
  margin: 40px 0;
}

.ad-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 15.5px;
}
.ad-article-body th,
.ad-article-body td {
  border: 1px solid var(--cloth-border);
  padding: 10px 13px;
  text-align: left;
}
.ad-article-body th {
  background: var(--cloth-deep);
  font-weight: 650;
  color: var(--iron);
}

.ad-article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--iron-soft);
  padding: 2px 6px;
  border-radius: 5px;
}

/* ── Author-inserted blocks the CMS can emit ──────────────────── */

/* Button — for "watch the video" / "open the app" style links. Uses an
   <a class="ad-article-btn"> so it is a real link, not a JS button. */
.ad-article-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 24px;
  padding: 12px 22px;
  background: var(--neel);
  color: var(--resist) !important;
  border: 1.5px solid var(--neel);
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.16s, color 0.16s;
}
.ad-article-btn:hover { background: var(--iron); border-color: var(--iron); }
.ad-article-btn.secondary {
  background: transparent;
  color: var(--neel) !important;
  border-color: var(--cloth-border);
}
.ad-article-btn.secondary:hover {
  background: var(--neel-soft);
  border-color: var(--neel);
  color: var(--neel) !important;
}

/* Responsive video embed. The CMS wraps any YouTube/Vimeo iframe in
   this so a 16:9 player never overflows on a phone. */
.ad-article-embed {
  position: relative;
  margin: 30px 0;
  aspect-ratio: 16 / 9;
  border: 1.5px solid var(--cloth-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--iron);
}
.ad-article-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Callout — the plain-prose replacement for the old .step-tip card. */
.ad-article-note {
  margin: 26px 0;
  padding: 16px 20px;
  background: var(--ochre-soft);
  border-left: 3px solid var(--ochre);
  border-radius: 0 10px 10px 0;
  font-size: 16.5px;
  line-height: 1.65;
}
.ad-article-note p:last-child { margin-bottom: 0; }

/* ── Footer blocks ────────────────────────────────────────────── */
.ad-article-foot {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--cloth-border);
}

.ad-article-bio {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 20px;
  background: var(--resist);
  border: 1.5px solid var(--cloth-border);
  border-radius: 14px;
}
.ad-article-bio .ad-article-avatar { width: 48px; height: 48px; font-size: 16px; }
.ad-article-bio h3 {
  font-size: 16px;
  font-weight: 650;
  color: var(--iron);
  margin: 0 0 5px;
}
.ad-article-bio p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #7A6A58;
  margin: 0;
}

/* Related posts */
.ad-article-related { margin: 44px 0 72px; }
.ad-article-related h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--iron);
  margin: 0 0 18px;
}
.ad-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.ad-related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--resist);
  border: 1.5px solid var(--cloth-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.16s;
}
.ad-related-card:hover { border-color: var(--neel); }
.ad-related-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--cloth-deep);
}
.ad-related-body { padding: 13px 15px 15px; }
.ad-related-body h3 {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--iron);
  margin: 0 0 6px;
}
.ad-related-body span { font-size: 12.5px; color: #8B7B68; }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ad-article-wrap { padding: 0 16px; }
  .ad-article-cover { margin: 16px auto 22px; border-radius: 12px; }
  .ad-article-body { font-size: 17px; line-height: 1.72; }
  .ad-article-body h2 { margin: 36px 0 14px; }
  .ad-article-body h3 { margin: 28px 0 11px; }
  .ad-article-standfirst { font-size: 17px; }
  .ad-related-grid { grid-template-columns: 1fr; }
  .ad-article-related { margin-bottom: 52px; }
}

/* Full-bleed cover on small screens reads better than an inset card. */
@media (max-width: 480px) {
  .ad-article-cover {
    margin-left: -16px;
    margin-right: -16px;
    margin-top: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
  }
}

@media print {
  .ad-header, .ad-mobile-nav, .ad-footer,
  .ad-breadcrumb, .ad-article-related { display: none !important; }
  .ad-article-main { padding-top: 0; }
}