/* =====================================================================
   article-brief.css - the "In short" summary box on blog articles
   ---------------------------------------------------------------------
   Sits directly under the title block (cat-chip, h1, art-meta) and
   replaces the old .art-standfirst. Always open, real HTML, no script.

   Loaded on article pages only, by scripts/patch-blog-summaries.php, so
   the site-wide stylesheets do not need a version bump on every page.

   COLOUR NOTE: coral (#FF5A3C) measures 2.81:1 on cream and fails WCAG AA
   for text, so no text here uses it. The label is ink (16.79:1), the
   numerals are blue (6.32:1) and the point text is #3d3829 (10.59:1).
   Keep it that way if you restyle.

   TYPE NOTE: the answer is 1.08rem, one step BELOW the article's opening
   .lead (1.16rem), which is itself below h1.art-title. The page reads
   title, then summary, then article. Raising the answer above the lead
   makes it compete with the headline.
   ===================================================================== */

.article-brief{
  max-width:760px;                 /* matches .art-standfirst and .art-body */
  margin:26px 0 0;
  padding-top:16px;
  border-top:2px solid rgba(22,19,13,.18);
}

/* The global h2 rules are scoped to .art-body, but reset defensively so a
   future site-wide h2 rule cannot squeeze or restyle the label. */
.article-brief .article-brief-label{
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:.7rem;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink,#16130D);
  margin:0 0 12px;
  padding:0;
  max-width:none;
  border:0;
}

.article-brief .article-brief-answer{
  font-family:'Outfit',sans-serif;
  font-size:1.08rem;
  line-height:1.52;
  font-weight:500;
  color:var(--ink,#16130D);
  margin:0 0 16px;
  max-width:64ch;
}

.article-brief .article-brief-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  list-style:none;
  margin:0;
  padding:0;
  border-top:2px solid rgba(22,19,13,.18);
  counter-reset:brief;
}

.article-brief .article-brief-points>li{
  counter-increment:brief;
  padding:13px 18px 2px 0;
  font-size:.93rem;
  line-height:1.46;
  color:#3d3829;
  min-width:0;                     /* grid items default to min-width:auto */
}
.article-brief .article-brief-points>li+li{
  padding-left:18px;
  border-left:2px solid rgba(22,19,13,.18);
}

/* Decorative numerals, drawn by CSS so they are never read aloud. */
.article-brief .article-brief-points>li::before{
  content:"0" counter(brief);
  display:block;
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--blue,#1F46E0);
  margin-bottom:7px;
}

/* The spacer the patcher swaps in for the article's inline <div style="height:20px">.
   Same 20px on desktop; on a phone it is dead space the summary needs. */
.art-head .art-head-gap{height:20px}

/* Phones: the columns become numbered rows divided by hairlines, and the hero
   tightens so the whole box lands inside the first screen.

   WHY THE HERO RULES ARE HERE: measured at 375x812 after the first build, the
   box finished up to 91px below the fold on the longest-titled articles, which
   defeats the point of the pattern. The headline is not shrunk; the space comes
   from whitespace above the title group and from the box's own padding. These
   rules only load on article pages, because only articles link this file. */
@media(max-width:600px){
  .art-head .crumbs{padding-top:14px}
  .art-head .art-head-gap{height:8px}
  .art-head .cat-chip{margin-bottom:11px}
  .art-head .art-meta{margin-top:13px;gap:8px}
  .art-head .art-meta span{padding:5px 11px}

  .article-brief{margin-top:12px;padding-top:11px}
  .article-brief .article-brief-answer{font-size:1rem;line-height:1.44;margin-bottom:9px}
  .article-brief .article-brief-points{grid-template-columns:1fr}
  .article-brief .article-brief-points>li{padding:8px 0 2px;font-size:.9rem;line-height:1.4}
  .article-brief .article-brief-points>li+li{
    padding-left:0;
    border-left:0;
    border-top:2px solid rgba(22,19,13,.18);
  }
  .article-brief .article-brief-points>li::before{margin-bottom:3px}
}

@media print{
  .article-brief{break-inside:avoid}
  .article-brief .article-brief-points{grid-template-columns:1fr}
  .article-brief .article-brief-points>li+li{padding-left:0;border-left:0}
}