/**
 * @file        article.css
 * @description Blog / Insights index and the essay page rebuilt from the
 *              showcase design (Epic 7, 0013)
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         9c4e8a30-6b17-4f25-83d9-71a0e2fc5648
 * @version     0.2.0.5
 * @created     2026-09-12
 * @updated     2026-09-16
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* Semantic aliases only — never a raw brand token or a hex value (DESIGN.md). */

/* --- Index listing -------------------------------------------------------- */

.article-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

/* 375px is the design target; wider viewports are the enhancement, so the
   multi-column form is the media query rather than the default. */
@media (min-width: 48rem) {
  .article-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.article-card__title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.article-card__meta,
.article__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* The date sits next to the author; a separator that is not a bare dash, so a
   screen reader does not read punctuation as part of the name. */
.article-card__meta time,
.article__meta time {
  margin-inline-start: var(--space-3);
}

.article-card__excerpt {
  margin: 0;
}

/* --- Article body --------------------------------------------------------- */

/* The hero image. No fixed height and no object-fit crop: the editor uploads
 * whatever the piece calls for and there is no derivative pipeline on this host
 * to normalise it (ext-imagick is not loaded in production), so the image keeps
 * its own aspect ratio rather than being cut to a shape it was not made for. */
.article__hero {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

/* A standfirst: the publisher's line about the piece, set apart from the body
 * rather than looking like its first paragraph. */
.article__excerpt {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--text-secondary);
  max-width: var(--measure);
  margin: var(--space-5) 0 0;
}

/* --- Essay typography -----------------------------------------------------
 * EVERY RULE BELOW STYLES AUTHORED HTML. The body is operator-written markup
 * rendered with `|raw`, so this file cannot add elements or classes to it - it
 * can only say what an <h2>, a <blockquote> or a <ul> looks like when one
 * arrives. That is the whole design: an editor writes ordinary HTML and the
 * page sets it as an essay.
 *
 * Measure matters more here than anywhere else on the site: this is the only
 * surface with sustained prose. ~70 characters is the readable band. */
.article__body {
  max-width: 70ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

/* Section headings in the brand serif, with far more space above than below so
 * each heading binds to the text it introduces rather than floating between
 * two blocks. */
.article__body h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.article__body h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.article__body p,
.article__body ul,
.article__body ol {
  margin: 0 0 var(--space-5);
}

.article__body li { margin-bottom: var(--space-2); }

/* A pull-quote, not an indented paragraph. Rules above and below rather than a
 * left bar, because at this width a quote reads as an interruption in the
 * column and the horizontal rules are what mark the resumption. */
.article__body blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.article__body blockquote p:last-child { margin-bottom: 0; }

/* An attribution line, if the author writes one as the quote's last child. */
.article__body blockquote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* A section break the editor can reach: <hr> becomes three centred marks
 * rather than a rule across the column. */
.article__body hr {
  border: 0;
  margin: var(--space-8) auto;
  color: var(--color-golden-accent);
  text-align: center;
}

.article__body hr::before {
  content: "\2022 \2022 \2022";
  letter-spacing: 0.6em;
  font-size: var(--text-sm);
}

.article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-block: var(--space-6);
}

/* Authored tables reflow rather than scroll where they can (DESIGN.md section
 * 10), but a wide one must not blow the column open. */
.article__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
}

.article__body th,
.article__body td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

/* --- Breadcrumbs ----------------------------------------------------------
 * Same component and same narrow-viewport rule as the book and author detail
 * pages; this is the third caller, which is the point at which sharing would
 * start to pay for itself. Left duplicated for now because the three copies
 * are identical and a shared file is a fourth thing to load - noted here so
 * the next person sees the count rather than rediscovering it. */

.crumbs { margin-bottom: var(--space-3); }

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.crumbs__list li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--border-subtle);
}

.crumbs__list [aria-current="page"] { color: var(--text-secondary); }

@media (max-width: 47.999rem) {
  .crumbs__list li:last-child { display: none; }
}

/* --- The C02 / R04 CTA block ---------------------------------------------- */

/* Order is the requirement, and it is expressed in DOM order in the template —
   NOT here. Nothing in this file may reorder these items: a visitor with
   stylesheets disabled must meet the same call to action first. */
.article-cta {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .article-cta {
    grid-template-columns: repeat(2, 1fr);
  }
}

.article-cta__title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.article-cta__summary {
  margin: 0;
}

/* The webinar CTA carries a date and place; the service variant has neither,
   which is why only this one has a meta line. Story 5.3. */
.article-cta__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ==========================================================================
 * THE ESSAY PAGE, rebuilt from the showcase design (0013)
 *
 * Every rule below consumes a SEMANTIC ALIAS. There is not a hex value or a
 * raw brand token in this section, which DESIGN.md §13.3 forbids in component
 * CSS and which is also what keeps the contrast guarantees in §2 true: a
 * colour spelled out here is a colour nobody measured.
 *
 * TWO OBSCURA-SHAPED CONSTRAINTS ARE OBSERVED THROUGHOUT, both learned the
 * hard way in earlier releases and both cheap to honour:
 *   1. NO `background: <gradient> left / 3px 100% no-repeat, <colour>`. That
 *      shorthand is valid CSS and renders as a 3px edge in a browser that
 *      implements the position/size form; Obscura drops the size and paints
 *      the gradient across the whole element, which is how three homepage
 *      event cards shipped as solid gold blocks in 0.27.0. Edges are
 *      `border-inline-start`, always.
 *   2. A grid or flex ITEM that wraps gets a block-level child, because
 *      Obscura sizes the item from one line while painting two — measured at
 *      59px box against 65px content on the 0.28.0 credential cards.
 * ========================================================================== */

/* --- The meta bar --------------------------------------------------------
 * A chip, a reading time and a date on one row above the headline. `gap` on a
 * flex container collapses to nothing when every child is absent, so an
 * article with no topics, no body and no date leaves no gap behind — which is
 * why there is no bottom margin here and the headline carries its own. */
.essay-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* The chip is a link, so it is already underlined by the global rule. It keeps
 * its underline here: colour is never the sole state indicator (§13.5). */
.essay-meta__class {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* WITHHELD BELOW 48rem, and this was measured rather than guessed. The chip is
 * a pill with its own padding, and at 375px it takes the meta bar to two lines
 * in German — 79px against English's 44px, because "Firmengruendung" and
 * "Min. Lesezeit" are both longer than their English counterparts. That 35px
 * sits directly above the headline and pushes the essay itself down a screen
 * that has already spent 216px on a three-row masthead.
 *
 * It costs the reader nothing, because the same term is the first chip in the
 * "Filed under" list at the foot of the essay — this is the duplicate, not the
 * original. That is the same reasoning, and the same breakpoint, as the rule
 * below that drops the last breadcrumb because it repeats the <h1>. */
@media (max-width: 47.999rem) {
  .essay-meta__class {
    display: none;
  }
}

/* Separated by a rule rather than a bullet character, so a screen reader does
 * not read punctuation between two facts. The first item after the chip gets
 * no rule, because a leading separator is the defect this avoids. */
.essay-meta__item + .essay-meta__item {
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--border-subtle);
}

.essay-head h1 {
  margin-top: var(--space-3);
}

/* --- The byline strip ---------------------------------------------------- */

.essay-byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* 48px, which is above the 44px touch minimum even though neither the portrait
 * nor the monogram is a target — the name beside them is the link. Sized in
 * rem so it tracks the reader's own text size. */
.essay-byline__photo,
.essay-byline__monogram {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.essay-byline__photo {
  object-fit: cover;
  background: var(--surface-raised);
}

/* The roster's monogram, so a practitioner with no photograph looks the same
 * on the essay page, the author page and the roster rather than three
 * different kinds of missing. */
.essay-byline__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

.essay-byline__who {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.essay-byline__name {
  font-weight: 600;
}

.essay-byline__role {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --- The drop cap --------------------------------------------------------
 * Applied through `::first-letter` on the body's first paragraph, which is the
 * only way to reach authored HTML this template cannot add a class to. It is
 * purely presentational: the letter is still one character of one word in the
 * DOM, so a screen reader reads the sentence normally and selecting the
 * paragraph copies it whole.
 *
 * WITHHELD BELOW 48rem. At 375px a four-line initial eats a third of the
 * column and pushes the first two lines to five or six characters each, which
 * is a worse read than no drop cap at all. */
@media (min-width: 48rem) {
  .article__body > p:first-of-type::first-letter {
    float: inline-start;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 3.5em;
    line-height: 0.82;
    padding-inline-end: var(--space-2);
    padding-block-start: 0.05em;
    color: var(--text-primary);
  }
}

/* --- Filed under ---------------------------------------------------------
 * The taxonomy block now sits BELOW the essay rather than above it. The
 * heading is an <h2> so the outline stays correct; it is small because it
 * labels an exit rather than announcing a section. */
.article__topics-heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

.article__topics {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

/* --- The practitioner band (C-14) ---------------------------------------- */

.essay-author__module {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* The portrait goes beside the prose only where there is room for both to keep
 * their measure. Below that it stacks, which is the default above. */
@media (min-width: 48rem) {
  .essay-author__module {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-6);
  }
}

.essay-author__photo,
.essay-author__monogram {
  inline-size: 7rem;
  block-size: 7rem;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.essay-author__photo {
  object-fit: cover;
  background: var(--surface-raised);
}

.essay-author__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
}

.essay-author__body {
  min-inline-size: 0;
}

.essay-author__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin: 0;
}

.essay-author__headline {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Two labelled facts. The <dt> is not a heading and must not look like one:
   it is the quiet half of the pair. */
.essay-author__practice {
  margin: var(--space-4) 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.essay-author__practice dt {
  color: var(--text-secondary);
  font-weight: 600;
}

.essay-author__practice dd {
  margin: 0;
}

.essay-author__bio {
  margin: var(--space-4) 0 0;
  max-width: var(--measure);
}

/* --- The CTA block: the companion-monograph treatment --------------------
 * The comp gives the book a cover beside its details. The cover is added here
 * and the buy buttons are NOT, which is the same refusal 0.28.0 made on the
 * book page: R05/FR8 puts the practitioner band before the buy band on every
 * surface, and a purchase button at the foot of an essay would be a second buy
 * path that no requirement asked for. The title is the link. */
.article-cta__item--book {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

/* A fixed inline size and an auto block size: covers are uploaded at whatever
 * aspect the edition has and there is no derivative pipeline on this host to
 * normalise them (ext-imagick is not loaded in production), so the image keeps
 * its own shape rather than being cropped to one it was not made for. */
.article-cta__cover {
  inline-size: 5rem;
  block-size: auto;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

/* The block-level child that keeps Obscura from sizing this flex item off one
 * line while painting three. Also what gives the text its own min-width so a
 * long title wraps instead of forcing the row wider. */
.article-cta__text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

/* "Companion book" — a label, not a heading, so it is a <span> and is styled
 * to read as one. On the inverse band it must not be Steel Mist: §13.2 bars
 * that token as text on --surface-inverse at any size. */
.article-cta__kicker {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

/* --- Recirculation (C-15) ------------------------------------------------ */

.essay-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.essay-related__head h2 {
  margin: 0;
}

.essay-related__grid {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

/* 375px is the design target; wider viewports are the enhancement, so the
   multi-column form is the media query rather than the default — matching
   .article-list directly above. */
@media (min-width: 48rem) {
  .essay-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* A card on the raised band needs an edge to be a card at all. border, never
   the gradient-background shorthand: see the note at the top of this section. */
.essay-related__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
}

.essay-related__title {
  font-size: var(--text-lg);
  margin: 0;
}

.essay-related__excerpt {
  margin: 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* Pushed to the foot of the card so three cards of unequal length still line
   their metadata up — the one alignment that makes a row read as a set. */
.essay-related__meta {
  margin: auto 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.essay-related__meta time {
  margin-inline-start: var(--space-3);
}