/* Reusable, token-based editorial components for news article bodies.
   Namespaced .news-story-* to avoid colliding with the unrelated .news-timeline*
   used on news/index.html (both stylesheets load together on a story page).
   Loaded alongside css/style.css and css/news-tables.css.
   Reused as-is elsewhere, no duplicate styles here: .news-pictogram-grid,
   .news-pictogram (css/style.css), .faq-item/.faq-question/.faq-answer
   (css/style.css), .news-checklist (css/news-tables.css), .news-story-panel*
   and .news-story-source (css/style.css). */

/* "Коротко" summary box */
.news-story-brief {
  margin: var(--sp-7) 0;
  padding: var(--sp-5);
  background: var(--clr-bg-blue);
  border-radius: var(--radius-lg);
}
.news-story-body .news-story-brief-label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-accent);
}
.news-story-brief p,
.news-story-brief li {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-loose);
  color: var(--clr-ink);
}
.news-story-brief ul {
  margin: 0;
  padding-left: 20px;
}
.news-story-brief li + li {
  margin-top: var(--sp-2);
}

/* "Було / Стало" comparison */
.news-story-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-7) 0;
}
.news-story-compare-was,
.news-story-compare-now {
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(13, 44, 52, 0.1);
}
.news-story-compare-was {
  background: #f7f7f6;
}
.news-story-compare-now {
  background: #fff7f2;
  border-color: rgba(211, 89, 58, 0.18);
}
.news-story-compare-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-gray);
}
.news-story-compare-now .news-story-compare-label {
  color: var(--clr-accent);
}
.news-story-compare-was p,
.news-story-compare-now p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: var(--clr-ink);
}

/* Evidence / citation card */
.news-story-evidence {
  margin: var(--sp-7) 0;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid rgba(13, 44, 52, 0.1);
  border-left: 3px solid var(--clr-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: 0 8px 24px rgba(13, 44, 52, 0.05);
}
.news-story-body .news-story-evidence-quote {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-body-sm);
  font-style: italic;
  line-height: var(--lh-loose);
  color: var(--clr-ink);
}
.news-story-body .news-story-evidence-source {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--clr-gray);
}
.news-story-evidence-link {
  color: var(--clr-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-story-body .news-story-evidence-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: var(--clr-ink);
}

/* "Кого стосується" without icons.
   Selector qualified with .news-story-body to out-specificity the sitewide
   `.news-story-body ul { list-style: disc; margin: ... }` rule in style.css. */
.news-story-body .news-story-audience {
  display: flex;
  flex-wrap: wrap;
  /* Default align-items:stretch would force every chip in a wrapped row to
     match the row's tallest chip — visible as inconsistent pill heights
     when one chip's text happens to wrap differently than its neighbors. */
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-6) 0;
  padding: 0;
  list-style: none;
}
.news-story-body .news-story-audience-tag {
  /* Plain label, not a pill/button — a bordered pill shape visually implies
     "clickable" (like a filter chip), but this is a static informational
     list. Reuses the .news-story-*-label tag style already used elsewhere
     (Коротко, Було/Стало) for visual consistency: small, bold, uppercase,
     accent-colored, no border/background. */
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-accent);
  white-space: nowrap;
}
.news-story-body .news-story-audience-tag:not(:last-child)::after {
  content: '\00B7';
  margin-left: var(--sp-2);
  color: rgba(13, 44, 52, 0.3);
  text-transform: none;
}

/* Timeline (namespaced — see file header for why it's not .news-timeline) */
.news-story-timeline {
  position: relative;
  display: grid;
  gap: 0;
  margin: var(--sp-6) 0 var(--sp-7);
  max-width: 820px;
}
.news-story-timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--clr-line);
}
.news-story-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: 0 0 var(--sp-6);
}
.news-story-timeline-item:last-child {
  padding-bottom: 0;
}
.news-story-timeline-dot {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--clr-accent);
  color: var(--clr-accent);
  font-weight: var(--fw-bold);
  font-size: 13px;
  box-shadow: 0 0 0 6px #fff;
}
.news-story-timeline-card {
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid rgba(13, 44, 52, 0.1);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 8px 24px rgba(13, 44, 52, 0.06);
}
.news-story-timeline-date {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--clr-accent);
}
.news-story-timeline-card p {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
}

/* Actionable checklist item — no separate button/wrapper component needed.
   When a checklist item ties to a UKRCERT service, its text simply contains
   a normal inline link (e.g. `...для <a href="/declaration/">декларації
   відповідності</a>...`). It's already inside .news-story-body, so it picks
   up the sitewide `.news-story-body a` link styling (accent color,
   underline) automatically — no extra CSS, no hover-only mobile edge case,
   no specificity fight. */

/* "План дій (формування запиту)" — the interactive request-builder variant
   of the practical-meaning/checklist block. An alternative to the plain
   .news-checklist (css/news-tables.css) for cases where composing a
   request to a UKRCERT specialist genuinely helps the reader — see
   docs/NEWS_TEMPLATE.md and .agents/skills/ukrcert-news-writing/SKILL.md
   for when to use which. Counts as the article's one interactive element. */

/* Card wrapper for the heading+checklist pair — mild emphasis (border +
   very light off-white "paper" tint), not a heavy callout. Two zones: a
   tinted head strip (heading+icon) visually separated from the plain-
   background body (checklist), same idea as the sitewide
   `.news-story-body h2` background-bar treatment, just contained in a card. */
.news-story-action-plan {
  margin: var(--sp-6) 0;
  border: 1px solid rgba(13, 44, 52, 0.12);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.news-story-action-plan-head {
  padding: var(--sp-3) var(--sp-5);
  background: var(--clr-bg-blue);
  border-bottom: 1px solid rgba(13, 44, 52, 0.08);
}
/* Dismissible tip — a floating overlay (position: absolute, elevated
   z-index + shadow) that points at item 1 specifically, without covering
   it and without reaching into the head strip's heading text. Since there
   isn't naturally enough gap between the head and item 1 for a tooltip to
   fit without overlapping one or the other, .news-checklist-plain reserves
   extra top padding (below) so the tip has real room to sit in — it's
   still visually "floating" (shadow, elevated z-index, out of flow), it
   just doesn't have to physically overlap content to do it.
   .news-story-action-plan-tip-wrap is a zero-height positioning anchor. */
.news-story-action-plan-tip-wrap {
  position: relative;
  height: 0;
}
.news-story-action-plan-tip {
  position: absolute;
  top: 4px;
  left: 60px;
  max-width: 380px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 8px 10px 12px;
  border: 1px solid rgba(13, 44, 52, 0.12);
  border-radius: var(--radius-sm);
  background: var(--clr-bg-blue);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--clr-ink);
  box-shadow: 0 16px 34px rgba(13, 44, 52, 0.22);
}
.news-story-action-plan-tip[hidden] {
  display: none;
}
.news-story-action-plan-tip::before,
.news-story-action-plan-tip::after {
  content: '';
  position: absolute;
  left: 24px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.news-story-action-plan-tip::before {
  top: 100%;
  border-top: 8px solid rgba(13, 44, 52, 0.12);
}
.news-story-action-plan-tip::after {
  top: calc(100% - 1px);
  border-top: 7px solid var(--clr-bg-blue);
}
.news-story-action-plan-tip-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--clr-gray);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.news-story-action-plan-tip-close:hover {
  color: var(--clr-accent);
}

/* List of real checkboxes now (functional again — checking an item builds
   the request preview below, see the inline script in the demo page). No
   per-item card (no border/background/shadow), just the checkbox itself as
   the marker. Padding lives here (not on .news-story-action-plan) since the
   card is split into a head strip + this body zone with different
   backgrounds. Qualified with .news-story-body to out-specify the sitewide
   `.news-story-body ul { list-style: disc; ... }` and `li` font rules. */
.news-story-body .news-checklist-plain {
  list-style: none;
  margin: 0;
  /* Extra top padding reserves room for .news-story-action-plan-tip to
     float above item 1 without covering it (see comment above the tip
     rules). Collapses back to the normal var(--sp-4) once the tip is
     dismissed — toggled by the inline script in the demo page. */
  padding: 88px var(--sp-5) var(--sp-5);
  transition: padding-top 0.2s ease;
  display: grid;
  gap: 10px;
}
.news-story-body .news-checklist-plain.news-story-action-plan-tip-dismissed {
  padding-top: var(--sp-4);
}
.news-checklist-plain label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: var(--clr-ink);
}
.news-checklist-plain input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  /* Nudged down from the row's top edge to optically align with the text's
     cap-height, not its full line-height leading. */
  margin-top: 5px;
  border: 2px solid #9aa8ae;
  border-radius: 4px;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.news-checklist-plain input[type="checkbox"]::before {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.12s ease;
}
.news-checklist-plain input[type="checkbox"]:checked {
  border-color: var(--clr-accent);
  background: var(--clr-accent);
}
.news-checklist-plain input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1);
}

/* Footer area holding the send button — disabled until at least one
   checklist item is checked. See inline script in the article. */
.news-story-action-plan-output {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.news-story-action-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
/* Qualified with .news-story-body to out-specify the sitewide
   `.news-story-body a { color: var(--clr-accent); text-decoration:
   underline; }` — without this, the button's own white/no-underline lose
   the specificity fight and render as accent-on-accent (invisible text),
   same bug already fixed once for the earlier checklist CTA. */
.news-story-body .news-story-action-plan-send {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--clr-accent);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.news-story-body .news-story-action-plan-send:disabled {
  background: #d9dde0;
  color: #8a97a0;
  cursor: not-allowed;
}
.news-story-body .news-story-action-plan-send:hover:not(:disabled) {
  background: #c44e30;
  color: #fff;
}
/* Secondary variant — outline, same shape/typography, less visually
   dominant than the primary UKRCERT send button. */
.news-story-body .news-story-action-plan-send-secondary {
  background: transparent;
  border: 1px solid var(--clr-accent);
  color: var(--clr-accent);
}
.news-story-body .news-story-action-plan-send-secondary:disabled {
  background: transparent;
  border-color: #d9dde0;
  color: #8a97a0;
}
.news-story-body .news-story-action-plan-send-secondary:hover:not(:disabled) {
  background: var(--clr-accent);
  color: #fff;
}

/* Smaller subheading inside a section — for a label like "План дій" nested
   under a full .news-story-body h2, clearly one visual step down from it
   (the generic .news-story-body h3 rule is 28px, same size as h2, so it
   doesn't read as a subheading here — this uses the actual --fs-h3 token). */
.news-story-body h3.news-story-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

/* Matches .news-story-article's own max-width:720px/margin:auto centering
   (css/style.css) — .news-story-back sits outside .news-story-article as a
   sibling inside the wider .container (1100px), so without this wrapper it
   starts flush at the container's edge instead of lining up under the
   article's actual text column. */
.news-story-back-row {
  max-width: 720px;
  margin: 0 auto;
}

/* Outline button matching the sitewide .btn shape/typography (css/style.css
   ~line 479), filled with accent color on hover — mirrors .btn-accent's
   hover but inverted (starts outline, fills on hover instead of the other
   way around). */
.news-story-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: 14px 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-accent);
  color: var(--clr-accent);
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.news-story-back:hover {
  background: var(--clr-accent);
  color: var(--clr-white);
}
.news-story-back::before {
  content: '\2190';
}

/* Screenshot / source figure */
.news-story-figure {
  margin: var(--sp-7) 0;
}
.news-story-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(13, 44, 52, 0.12);
}
.news-story-figure figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--clr-gray);
}
.news-story-figure-source-link {
  color: var(--clr-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Multiple sources — calm footnote-style reference list, not a colored callout
   (deliberately quieter than .news-story-source: no accent border, no tinted
   background, no colored underlined links). */
.news-story-sources {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--clr-line);
}
.news-story-body .news-story-sources-label {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-gray);
}
.news-story-sources ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: news-story-source;
  display: grid;
  gap: var(--sp-2);
}
.news-story-sources li {
  counter-increment: news-story-source;
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--clr-gray);
}
.news-story-sources li::before {
  content: counter(news-story-source) '.';
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--clr-gray);
}
.news-story-sources a {
  color: var(--clr-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 44, 52, 0.25);
}
.news-story-sources a:hover {
  color: var(--clr-accent);
  border-bottom-color: var(--clr-accent);
}

@media (max-width: 640px) {
  .news-story-action-plan-tip {
    left: var(--sp-4);
    right: var(--sp-4);
    max-width: none;
  }
  .news-story-compare {
    grid-template-columns: 1fr;
  }
  .news-story-timeline::before {
    left: 15px;
  }
  .news-story-timeline-item {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--sp-3);
    padding-bottom: var(--sp-5);
  }
  .news-story-timeline-dot {
    width: 32px;
    height: 32px;
    font-size: 11px;
    box-shadow: 0 0 0 4px #fff;
  }
  .news-story-timeline-card {
    padding: var(--sp-3) var(--sp-4);
  }
}