/*
 * DOUT / NEWS desktop "default" package -- Article-detail presentation
 * (Prompt 1465; Prompt 1466 splits this out of the former monolithic style.css
 * so the homepage and the compatibility list no longer download Article-only
 * CSS).
 *
 * Loaded ONLY by pages/article_detail.html, alongside common.css (tokens/shell/
 * shared editorial primitives -- kicker, byline, region heading, editorial-link
 * -- all reused unmodified from there, never redefined here).
 *
 * Reading-first surface: whitespace/hairline separators, no application-style
 * outer card, no rounded white panel around the whole page.
 */

/* =========================================================================
 * 1. Article composition
 * ========================================================================= */

.dn-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: var(--space-8, 64px);
    font-family: var(--dn-font-body);
}

.dn-article__reading {
    min-width: 0;
}

/* =========================================================================
 * 2. Article header (back link, Topic breadcrumb, headline, dek)
 *
 * The Topic breadcrumb is common.css's shared `.dn-topic-crumbs` (see
 * components/topic_breadcrumb.html) -- not redeclared here.
 * ========================================================================= */

/* Prompt 1469: visual weight reduced so this reads as quiet navigation,
 * subordinate to the Topic breadcrumb/headline/dek that follow it -- smaller size,
 * lighter/secondary color (unchanged), a tighter icon gap, and less bottom
 * margin than before so it sits close to the breadcrumb rather than claiming its
 * own visual "row". The label text itself is now the short "Back"/"Назад" --
 * see article_back_link.html's own comment. */
.dn-article__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-4, 16px);
    font-size: 13px;
    font-weight: 400;
    color: var(--dn-text-secondary);
}

.dn-article__back:hover {
    color: var(--dn-accent-primary);
}

/* Prompt 1468 correction: weight/size/line-height/letter-spacing now match
 * `.dn-home__hero--solo .dn-lead__headline` (home.css) exactly -- the SAME
 * established editorial-serif treatment already visually approved for the
 * homepage's own solo hero headline, rather than an independently-chosen 700
 * weight. This matters more than it looks: `--dn-font-serif` (Georgia, "Times
 * New Roman", "Noto Serif", serif) has no real Georgia/Times face installed in
 * this environment, so Linux font substitution resolves it to a real,
 * Cyrillic-capable serif substitute (verified: Cyrillic glyphs render
 * correctly, this is not a tofu/missing-glyph bug) -- but requesting a
 * synthetic BOLD (700) on that substitute reads visibly heavier/blockier than
 * the reference's "substantial but not excessively heavy" headline. Weight 400
 * is what the homepage already ships and already passed visual review. */
.dn-article__headline {
    margin: 0 0 var(--space-4, 16px);
    font-family: var(--dn-font-serif);
    font-weight: 400;
    font-size: 38px;
    line-height: 1.13;
    letter-spacing: -0.018em;
    color: var(--dn-text-primary);
}

/* Prompt 1469: the dek and the Article body now share ONE reading typography --
 * same actual serif font family, size, line-height and color, grouped here in
 * one selector rather than duplicated in `.dn-article__dek` and
 * `.dn-article__body` separately (each keeps only what makes it different: the
 * dek's italic style/clamp/spacing below, the body's upright style/paragraph
 * spacing in section 5). The dek's own pre-existing values (Prompt 1468's
 * tightened 1.4 line-height included) are the baseline the body now adopts --
 * this is a typography-only change, not a rewrite of either element's markup
 * or content.
 *
 * Cyrillic italic verified in real Chrome rendering, not just declared CSS
 * (fc-match alone is not trustworthy here -- Prompt 1468 already found it can
 * disagree with what Chrome actually resolves). A side-by-side screenshot probe
 * (upright vs. italic vs. explicit "Noto Serif" vs. explicit "Liberation Serif"
 * vs. a sans-serif control, same Cyrillic sentence) showed: the upright
 * `--dn-font-serif` stack and explicit "Liberation Serif" render pixel-identical
 * letterforms, and so do their italic counterparts -- confirming this
 * environment's Georgia/Times/serif substitution resolves to installed
 * "Liberation Serif" (not the "Noto Serif" fc-match alone would suggest). Its
 * italic is a genuine hand-designed italic font file, not a synthetic
 * oblique of the upright glyphs: letters like "д"/"л"/"и" take real cursive
 * italic forms distinct from just slanting the upright shapes. The result is
 * coherent and legible -- no fallback to a visibly unrelated typeface, no mixed
 * fonts within a line, no missing glyphs -- and no new font dependency was
 * added to get it (this environment vendors no serif webfont at all -- see
 * common.css's `--dn-font-serif` comment). */
.dn-article__dek,
.dn-article__body {
    font-family: var(--dn-font-serif);
    font-size: 19px;
    line-height: 1.4;
    color: var(--dn-text-secondary);
}

.dn-article__dek {
    font-style: italic;
    /* Visual clamp only: a very long display_summary fallback (which can be the
     * full `content` when no ai_summary exists) stays intact in the DOM -- this
     * never truncates the underlying text itself. */
    margin: 0 0 var(--space-5, 24px);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

/* --- DOUT / NEWS editorial-author byline (Prompt 1497.1) -----------------
 * Rendered above the metadata rail only when the Article carries a durable
 * editorial-author snapshot. Deliberately distinct from the source/date byline
 * below: an accent mono label + serif name, so a reader never confuses the
 * DOUT / NEWS editorial author with the external source. No link (no Author
 * Profile exists yet). */
.dn-article__editorial-author {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    margin: 0 0 var(--space-4, 16px);
}

.dn-article__editorial-author-label {
    font-family: var(--dn-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dn-accent-primary);
}

.dn-article__editorial-author-name {
    font-family: var(--dn-font-serif);
    font-size: 18px;
    line-height: 1.2;
    color: var(--dn-text-primary);
}

/* =========================================================================
 * 3. Metadata rail
 *
 * The rail is multi-classed `class="dn-byline dn-article__meta"` in
 * article_meta.html: `.dn-byline` (common.css) supplies the shared metadata
 * typography (mono/12px/secondary/flex) this rail reuses unmodified; only the
 * rail's own wrapping/border/padding/action-button additions live here.
 *
 * Prompt 1469 recomposes the row into three semantic groups (source
 * provenance, DOUT / NEWS availability, utilities) -- see article_meta.html's
 * own comment for what each group means. The grouping is expressed purely
 * through spacing and a subtle vertical rule between groups
 * (`.dn-article__meta-group` below), never a second font family: every group
 * still renders on the same inherited `.dn-byline` mono face.
 * ========================================================================= */

.dn-article__meta {
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-2, 8px);
    /* Spacing between groups now comes from `.dn-article__meta-group`'s own
     * margin/border below, not a uniform column-gap -- see that rule. */
    column-gap: 0;
    padding: var(--space-4, 16px) 0;
    margin: 0 0 var(--space-6, 32px);
    border-top: 1px solid var(--dn-rule-subtle);
    border-bottom: 1px solid var(--dn-rule-subtle);
}

/* One semantic group ("По материалам X · date", "На DOUT / NEWS · date", or the
 * views/Save/Share utility cluster): its own children stay close together
 * (inner `gap`), while a subsequent group gets a subtle vertical rule and
 * wider spacing from the one before it -- the same restrained divider language
 * the masthead/footer brand mark already uses (`.dn-brand__divider`,
 * common.css), reused here through plain CSS rather than a shared class, since
 * this one is Article-only. */
.dn-article__meta-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.dn-article__meta-group + .dn-article__meta-group {
    margin-left: var(--space-4, 16px);
    padding-left: var(--space-4, 16px);
    border-left: 1px solid var(--dn-rule-subtle);
}

/* Prompt 1468: source reads as attribution ("По материалам <source>"/"Based on
 * <source>"), not a bare label -- still the row's one emphasized (bold/primary)
 * item, with everything else expressing hierarchy through weight/color alone,
 * never a different font family (all of `.dn-article__meta`'s children stay on
 * the inherited `.dn-byline` mono face). */
.dn-article__meta-source {
    font-weight: 700;
    color: var(--dn-text-primary);
}

.dn-article__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Icon-only (Prompt 1468): no visible text child, so `gap` is moot and removed;
 * the icon itself is sized up slightly (inherited mono is 12px, too small to
 * read as a control) -- the exact same pattern `.dn-masthead__search button`
 * already uses for its own icon-only affordance. */
.dn-article__meta-action {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    color: var(--dn-text-secondary);
    cursor: pointer;
}

/* A visibly non-functional placeholder (e.g. Save), never styled to look live. */
.dn-article__meta-action:disabled {
    cursor: default;
    opacity: 0.55;
}

.dn-article__meta-action:not(:disabled):hover {
    color: var(--dn-accent-primary);
}

/* =========================================================================
 * 4. Hero
 * ========================================================================= */

.dn-article__hero {
    margin: 0 0 var(--space-6, 32px);
}

.dn-article__hero-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1px;
}

.dn-article__hero-caption {
    margin-top: var(--space-2, 8px);
    font-family: var(--dn-font-mono);
    font-size: 12px;
    line-height: 1.4;
    color: var(--dn-text-secondary);
}

.dn-article__hero-caption a {
    text-decoration: underline;
}

/* =========================================================================
 * 5. Reading body
 * ========================================================================= */

.dn-article__body {
    /* Family, size, line-height and text color all come from the shared
     * `.dn-article__dek, .dn-article__body` rule above -- see its own comment.
     * `font-style: normal` is the only property that differentiates the body
     * from the dek's italic. */
    font-style: normal;
}

.dn-article__body p {
    margin: 0 0 var(--space-4, 16px);
}

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

/* =========================================================================
 * 6. Original-source block
 * ========================================================================= */

/* Prompt 1468 correction: a discrete bordered block (the approved reference's
 * "complete thin border around the whole region"), not the previous plain
 * top-rule separator. Same page background (`--dn-surface-page`, not the
 * lighter `--dn-surface-panel` any card/panel elsewhere uses) so it reads as an
 * outlined editorial note, never a filled/raised SaaS card -- minimal radius,
 * no shadow and restrained padding. The block keeps the prose's readable
 * measure while the structural reading column can use the full publication
 * grid. The heading inside it is
 * `.dn-kicker` (common.css), reused unmodified -- see
 * article_original_source.html's own comment. */
.dn-article__original-source {
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    margin-top: var(--space-6, 32px);
    padding: var(--space-4, 16px) var(--space-5, 24px);
    border: 1px solid var(--dn-rule-subtle);
    border-radius: 2px;
    background: var(--dn-surface-page);
}

/* Editorial action link (shared shape: common.css's `.dn-editorial-link`) --
 * only this component's own weight/color are declared here. Permanently accent
 * (not hover-only accent like `.dn-lead__more`/`.dn-briefing__more`/
 * `.dn-region-heading__all`): a deliberate, pre-existing difference in visual
 * treatment for this call-to-action, not something this cleanup changes. */
.dn-article__original-source-link {
    font-weight: 600;
    color: var(--dn-accent-primary);
}

/* =========================================================================
 * 7. Rail
 *
 * The rail's collections render through reusable widgets whose templates
 * request their own CSS/JS. Only rail composition and container sizing, which
 * stay genuinely Article-specific layout, live here.
 * ========================================================================= */

.dn-article__context {
    min-width: 0;
}

/* Prompt 1474: the rail now stacks two independent collections (Related
 * Materials, Latest in Topic) -- the gap BETWEEN them is this page's own
 * rail-composition concern, not something either widget should assume about
 * its neighbors, so it lives here rather than in either widget's own CSS.
 * Each `{% widget %}` call also emits its own invisible `<link>` immediately
 * before its `<section>` (Prompt 1471's self-contained-asset pattern), so a
 * plain "every child after the first" rule would incorrectly margin the
 * FIRST widget's own section too (it is the second ELEMENT child, after that
 * first `<link>`) -- the general sibling combinator targets only a `section`
 * that follows another `section`, however many non-section siblings (like a
 * `<link>`) sit between them, and keeps working if the rail's composition
 * changes again later. */
.dn-article__context section ~ section {
    margin-top: var(--space-6, 32px);
}

/* =========================================================================
 * 8. Article responsive
 * ========================================================================= */

@media (max-width: 980px) {
    .dn-article {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .dn-article__headline {
        font-size: 28px;
    }

    .dn-article__dek,
    .dn-article__body {
        font-size: 16px;
    }
}