/**
 * assets/css/article.css
 *
 * Single article — "News vai raksts" (Figma frame 25:25).
 *
 * This file is the design source of truth for the single-post template. It is
 * enqueued ONLY on single posts (see inc/assets.php snippet) and loads AFTER
 * news.css, so where it repeats a selector it supersedes the older
 * "Jaunums vai raksts" rules that still live in news.css.
 *
 * It also doubles as the block-editor stylesheet (add_editor_style in
 * inc/block-styles.php), so the "Lead" and "Pull quote" block styles preview
 * correctly while editing. That is why the block-style rules are written to
 * match BOTH inside .single-article__content AND standalone (.is-style-lead,
 * .wp-block-quote.is-style-pullquote) — the editor has no .single-article wrapper.
 *
 * REUSES (all existing theme assets — no new artefacts required):
 *   - Colour tokens from fonts.css  (--color--accent-primary #7189bd, etc.)
 *   - --font-sans  (Google Sans Flex + Inter fallback, self-hosted)
 *   - google-sans-flex-latin-ext-600-normal.woff2 (SemiBold 600 — shipped but
 *     undeclared in fonts.css; declared at the top of this file for the lead)
 *   - icon-arrow-left.svg  (back link chevron)
 *   - icon-X.svg / icon-Instagram.svg / icon-LinkedIn.svg / icon-Link.svg (share, mask)
 *   - glyph.svg  (decorative pull-quote glyph — background-image)
 *
 * (A standalone icon-quote.svg is provided only as a fallback in case glyph.svg
 *  is not the quote glyph — see INTEGRATION.md flag #1.)
 *
 * SECURITY / COMPLIANCE (Prasibas_majaslapai.docx)
 *   §2/§3: all assets local, no external font or icon CDN request.
 *   §8 (accessibility): see the LEAD note below — the Figma periwinkle lead
 *   colour on the lavender page is low-contrast; a token override is provided.
 *
 * @package AICenterwp
 * @since   1.0.0
 */

/* ==========================================================================
   CONTENT COLUMN
   Figma: content sits in a ~940px column, centred on the 1440 canvas
   (left ≈ 257px / right ≈ 246px). Back link + body share the same column.
   We narrow the shared .container from 1172 → 940 inside the article only.
   ========================================================================== */

.single-article {
    padding-block: 0 96px;
}

.single-article .container {
    max-width: 940px;          /* Figma content width 937px */
}

.single-article__back-wrap {
    margin-top: 56px;          /* Figma back link ≈ 187px from top, below 100px header */
    margin-bottom: 40px;
}

.single-article__body {
    max-width: 940px;          /* keep the article block aligned to the column */
}

/* ==========================================================================
   BACK LINK  "‹ Visas ziņas"
   Figma node 108:90/91: Inter 15px, periwinkle, small left chevron.
   Overrides news.css .back-link (which is the darker-blue 14px variant).
   ========================================================================== */

.single-article .back-link--article {
    font-family: 'Inter', var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    color: var(--color--accent-primary, #7189bd);
    gap: 8px;
}

.single-article .back-link--article .back-link__arrow {
    width: 8px;
    height: 14px;              /* Figma "Button icon" 8×14 */
}

/* ==========================================================================
   HEADLINE
   Figma node 25:26: Google Sans Flex Bold, 50px, navy #01162a, width axis 120
   ("expanded").

   The expanded width MUST come from a font that carries the width — there is no
   non-destructive CSS way to widen glyphs (a transform: scaleX warps the
   outlines, worst on the macron characters ā/ē/ī/ū). So the title requests an
   expanded face and falls back to the normal stack until that face is added:

     - add a static expanded instance (wght700/wdth120) named
       'Google Sans Flex Expanded'  → the font-family swap does the work; OR
     - add the variable font under that same family name
       → font-stretch / font-variation-settings below take effect.

   Either way the title self-activates the moment the file is added. Until then
   it renders normal-width Bold (clean — not distorted). Recipes: DIAGNOSTICS-5.md.
   ========================================================================== */

.single-article__title {
    font-family: 'Google Sans Flex Expanded', var(--font-sans);
    font-size: 50px;                        /* Figma fixed 50px */
    font-weight: 700;
    line-height: 1.1;
    color: var(--color--base-foreground, #01162a);
    margin: 0 0 40px;
    font-stretch: 120%;                     /* used if the expanded face is the variable font */
    font-variation-settings: 'wght' 700, 'wdth' 120;
}

@media (max-width: 767px) {
    .single-article__title {
        font-size: clamp(30px, 8vw, 40px);
    }
}

/* ==========================================================================
   BODY CONTENT (block editor output)
   Figma body: Google Sans Flex Regular 18px, black, line-height 25px (≈1.4).
   ========================================================================== */

.single-article__content {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;                       /* Figma body is Regular (served by the 400 static face) */
    line-height: 1.4;                       /* 25/18 from Figma */
    color: var(--color--base-foreground-2, #000);
    -webkit-font-smoothing: antialiased;    /* macOS Chrome/Safari renders heavier without this */
    -moz-osx-font-smoothing: grayscale;
}

.single-article__content p,
.single-article__content li {
    font-weight: 400;                       /* regular body text */
}

/* Inline + heading bold stay bold (served by the static 700 face). */
.single-article__content strong,
.single-article__content b,
.single-article__content h2,
.single-article__content h3,
.single-article__content h4 {
    font-weight: 700;
}

.single-article__content > p {
    margin: 0 0 1.4em;
}

.single-article__content a {
    color: var(--color--accent-primary-strong, #185fa5);
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   LEAD PARAGRAPH  (block style "Lead" on a core/paragraph)
   Figma node 25:29: Google Sans Flex SemiBold 25px, periwinkle, lh 33px.
   The editor applies the "Lead" style to the first paragraph.

   ACCESSIBILITY / §8: periwinkle (#7189bd) on the lavender page background
   is ~2:1 contrast — below WCAG AA even for large text (needs 3:1). The
   design ships as-is here; to make the lead compliant, override the token
   in INTEGRATION.md (set --color--lead to a darker periwinkle such as #4d63a0
   or #185fa5). We expose a dedicated token with the Figma value as default so
   it is a one-line change.
   -------------------------------------------------------------------------- */

:root {
    --color--lead: #7189bd;                 /* Figma value; see §8 note above */
}

.single-article__content .wp-block-paragraph.is-style-lead,
.single-article__content p.is-style-lead,
.single-article__content .is-style-lead,
.is-style-lead {
    font-family: var(--font-sans);
    font-size: 25px;                        /* Figma fixed 25px (was a clamp that
                                               drifted below 25 on narrow widths) */
    font-weight: 600;                       /* SemiBold — real 600 static face */
    line-height: 1.32;                      /* 33/25 from Figma */
    color: var(--color--lead, #7189bd);
    margin: 0 0 1.6em;
}

@media (max-width: 767px) {
    .single-article__content p.is-style-lead,
    .single-article__content .is-style-lead,
    .is-style-lead {
        font-size: 20px;
    }
}

/* ==========================================================================
   PULL-QUOTE  (block style "Pull quote" on a core/quote)
   Figma nodes 108:117 (box) + 108:113/118 (top & bottom fades) + 108:204 (glyph).
   A full-width periwinkle panel whose top and bottom edges fade into the page
   background, with the decorative outlined double-quote glyph overlapping the
   top edge, and white bold 40px text.

   Overrides the old news.css pull-quote (top/bottom rules + Georgia " glyph).
   ========================================================================== */

.single-article__content .wp-block-quote.is-style-pullquote,
.wp-block-quote.is-style-pullquote,
.wp-block-aicenter-pullquote {
    position: relative;
    background: var(--color--accent-primary, #7189bd);
    border: 0;                              /* reset core quote left border */
    border-radius: 0;
    margin: 3.5em 0;
    padding: 96px 60px 64px;                /* text top = Figma +96; glyph straddles above */
    overflow: visible;                      /* let the glyph sit above the panel top, as in Figma */
    text-align: left;
}

/* White bold quote text (Figma node 25:27: 40px Bold, white) */
.single-article__content .wp-block-quote.is-style-pullquote p,
.wp-block-quote.is-style-pullquote p,
.wp-block-aicenter-pullquote p {
    font-family: var(--font-sans);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    font-style: normal;
    margin: 0;
}

/* Optional citation, if the editor adds one — kept subtle, hidden by default
   to match the Figma design (no attribution shown). */
.wp-block-quote.is-style-pullquote cite {
    display: block;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    color: rgba(255, 255, 255, 0.85);
}

/* Decorative glyph — overrides the old ::before content:'"' (Georgia).
   Rendered as a CSS MASK (not background-image) so the colour is controlled
   here regardless of what glyph.svg has baked in — this fixes the "wrong /
   too-faint colour" symptom. Size and position match Figma node 108:204
   (~79×73, sitting in the top-left of the panel). One token controls the tint. */
:root {
    --quote-glyph: rgba(255, 255, 255, 0.55);   /* light mark on the periwinkle panel; tweak to taste */
}

.single-article__content .wp-block-quote.is-style-pullquote::before,
.wp-block-quote.is-style-pullquote::before,
.single-article__content blockquote.is-style-pullquote::before,
.wp-block-aicenter-pullquote::before {
    content: '';
    position: absolute;
    top: -30px;                             /* Figma: glyph straddles ~31px above the panel top */
    left: 21px;                             /* Figma: ~21px from the panel edge (left of the text) */
    width: 80px;                            /* Figma glyph ~79×73 */
    height: 74px;
    background-color: var(--quote-glyph, rgba(255,255,255,0.55));
    -webkit-mask: url('../img/glyph.svg') no-repeat left top / contain;
            mask: url('../img/glyph.svg') no-repeat left top / contain;
    font-size: 0;                           /* nuke any inherited glyph sizing */
    margin: 0;
    z-index: 2;                             /* above the top-edge fade overlay */
}

/* Keep the quote text above the edge fades too. */
.single-article__content .wp-block-quote.is-style-pullquote p,
.wp-block-quote.is-style-pullquote p,
.wp-block-aicenter-pullquote p {
    position: relative;
    z-index: 2;
}

/* Top & bottom fades — blend the panel edges into the page background.
   Figma: 60px linear gradient from page bg → periwinkle, top and bottom. */
.wp-block-quote.is-style-pullquote::after,
.wp-block-aicenter-pullquote::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    pointer-events: none;
    top: 0;
    z-index: 1;                             /* below glyph + text */
    background: linear-gradient(
        to bottom,
        var(--color--base-background, #c6c8d4),
        rgba(198, 200, 212, 0)
    );
}

/* Bottom fade — the top fade uses ::after and the glyph uses ::before, so the
   bottom edge fade is painted as a gradient layer on the element's own
   background (over the periwinkle background-color). */
.single-article__content .wp-block-quote.is-style-pullquote,
.wp-block-quote.is-style-pullquote,
.wp-block-aicenter-pullquote {
    background-image:
        linear-gradient(
            to top,
            var(--color--base-background, #c6c8d4),
            rgba(198, 200, 212, 0) 60px
        );
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: var(--color--accent-primary, #7189bd);
}

/* ==========================================================================
   INLINE IMAGE + CAPTION  (core/image block)
   Figma node 25:38: placeholder grey, radius 10px, full content width.
   Caption (node 25:36): 12px, periwinkle, left-aligned.
   Overrides the old news.css image radius (4px) + centred grey caption.
   ========================================================================== */

.single-article__content figure.wp-block-image {
    margin: 2.5em 0;
}

.single-article__content figure.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;                    /* Figma 25:38 */
    background-color: var(--color--base-surface-2, #aeb4c1);
}

.single-article__content figure.wp-block-image figcaption {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--color--accent-primary, #7189bd);
    text-align: left;
}

/* ==========================================================================
   BYLINE  "Article by … " (left)  +  date (right)
   Figma nodes 25:32 / 25:33: 18px, black. (Figma uses TikTok Sans; we reuse
   --font-sans to avoid shipping a third font — see fonts note in INTEGRATION.)
   The new design has NO divider rule, so we hide the old one.
   ========================================================================== */

.single-article__rule {
    display: none;                          /* new design: no divider line */
}

.single-article__byline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 64px;                       /* spacing below caption (Figma) */
    margin-bottom: 28px;
    font-family: var(--font-sans);
    font-size: 18px;
    color: var(--color--base-foreground-2, #000);
}

.single-article__author strong,
.single-article__author b {
    font-weight: 700;
}

.single-article__date {
    color: var(--color--base-foreground-2, #000);
}

/* ==========================================================================
   SHARE ROW  (flat icons — Figma node 25:44)
   X / Instagram / LinkedIn / copy-link, 24px, gap 16px, no chip background.
   Icons drawn via CSS mask from the existing SVG files (same technique the
   theme already uses for arrows), so they recolour uniformly and inherit
   hover state. Overrides the old circular .share-btn chips in news.css.
   ========================================================================== */

.single-article__share {
    display: flex;
    align-items: center;
    gap: 16px;                              /* Figma --sds-size-space-400 */
}

.single-article__share .share-btn {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: transparent;
    color: var(--color--accent-primary, #7189bd);
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.single-article__share .share-btn:hover,
.single-article__share .share-btn:focus-visible {
    background: transparent;
    color: var(--color--accent-coral, #fcab89);
    transform: translateY(-1px);
}

.single-article__share .share-btn:focus-visible {
    outline: 2px solid var(--color--accent-primary, #7189bd);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Icon glyph via mask — file reused, colour follows currentColor. */
.single-article__share .share-btn::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
    -webkit-mask-position: center;   mask-position: center;
    -webkit-mask-size: contain;      mask-size: contain;
}

.single-article__share .share-btn--x::before {
    -webkit-mask-image: url('../img/icon-X.svg');
            mask-image: url('../img/icon-X.svg');
}
.single-article__share .share-btn--instagram::before {
    -webkit-mask-image: url('../img/icon-Instagram.svg');
            mask-image: url('../img/icon-Instagram.svg');
}
.single-article__share .share-btn--linkedin::before {
    -webkit-mask-image: url('../img/icon-LinkedIn.svg');
            mask-image: url('../img/icon-LinkedIn.svg');
}
.single-article__share .share-btn--copy::before {
    width: 20px;                            /* Figma link icon is 20px */
    height: 20px;
    -webkit-mask-image: url('../img/icon-Link.svg');
            mask-image: url('../img/icon-Link.svg');
}

/* "Copied!" toast (kept from the existing template) */
.single-article__share .share-btn--copy {
    position: relative;
}

.single-article__share .share-btn__copied-msg {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color--base-foreground, #01162a);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
}

.single-article__share .share-btn__copied-msg:empty {
    display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
    .single-article__content .wp-block-quote.is-style-pullquote,
    .wp-block-quote.is-style-pullquote,
    .wp-block-aicenter-pullquote {
        padding: 72px 28px 48px;
    }
    .single-article__content .wp-block-quote.is-style-pullquote::before,
    .wp-block-quote.is-style-pullquote::before {
        left: 20px;
        top: -22px;
        width: 60px;
        height: 56px;
    }
    .single-article__byline {
        margin-top: 48px;
    }
}