/* ============================================================================
   NEWS — the cards, the editor and the article.

   Loaded by the league page, the news page and the admin console, because all
   three draw the same card and an article body has to look the same wherever
   it is being written or read. The card itself is the club plate from the kit;
   everything here is what sits ON it.
   ============================================================================ */

/* ---------- the cards ---------- */
.news-grid{
  display:grid; gap:calc(var(--u)*2);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  padding:0 calc(var(--u)*3) calc(var(--u)*2);
}
/* The lead card is wider where there is room. A news strip in which every
   item is the same size has no front page, and the first article is the one
   the league chose to lead with. */
@media (min-width:1000px){
  .news-grid{grid-template-columns:repeat(6,1fr)}
  .news-grid > .news-card{grid-column:span 2}
  .news-grid > .news-card:first-child{grid-column:span 3}
}
@media (min-width:1400px){
  .news-grid > .news-card:first-child{grid-column:span 2}
}



.news-card{position:relative; text-decoration:none; color:inherit}
.news-card .club-plate{aspect-ratio:16/10; position:relative; overflow:hidden}
.news-card:first-child .club-plate{aspect-ratio:16/9}

/* the cover floods the plate, under the words and over the generated field */
.news-cover-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
}

/* A scrim, because a headline over a photograph is unreadable without one and
   a photograph under a solid panel may as well not be there. */
.news-over{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:calc(var(--u)*2);
  background:linear-gradient(to top,
    rgba(4,16,11,.94) 0%, rgba(4,16,11,.78) 46%, rgba(4,16,11,0) 100%);
}
.news-title{
  font-family:var(--f-ui); font-weight:800; font-size:15px; line-height:1.22;
  color:#eafff4; text-wrap:balance;
}
.news-card:first-child .news-title{font-size:19px}
.news-stand{
  font-family:var(--f-micro); font-size:9px; line-height:1.8; color:rgba(234,255,244,.72);
  margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.news-card:hover .news-title{color:var(--ink-c,var(--lume))}

.news-flag{
  position:absolute; top:10px; left:10px; z-index:3;
  font-family:var(--f-micro); font-size:7.5px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--amber); color:#04100b; padding:3px 8px;
}

/* PINNED IS NOT LATEST, so it does not look like it. Amber is the "this just
   happened" colour and it belongs to the newest article; a pin is an editorial
   decision that holds a piece at the front for as long as somebody wants it
   there, which is a quieter thing. Same shape, so the two read as one family
   of flag rather than two unrelated badges. */
.news-flag.pin{
  background:transparent; color:var(--text-primary,#e6fff1);
  box-shadow:inset 0 0 0 1px currentColor; padding:2px 7px;
}
.news-more{padding:0 calc(var(--u)*3) calc(var(--u)*2)}

/* ---------- the article ---------- */
.art-cover{padding:0 calc(var(--u)*3)}
.art-cover img{
  display:block; width:100%; max-height:min(58vh,520px); object-fit:cover;
  border:1px solid var(--rule);
}
.art-body{
  padding:calc(var(--u)*3); max-width:74ch;
  font-family:var(--f-ui); font-size:15.5px; line-height:1.75; color:var(--ink-2);
}
.art-stand{
  font-family:var(--f-ui); font-weight:700; font-size:17px; line-height:1.55;
  color:var(--ink); margin:0 0 calc(var(--u)*3);
}
.art-body p{margin:0 0 calc(var(--u)*2)}
.art-body h2{font-family:var(--f-ui);font-weight:800;font-size:19px;
  margin:calc(var(--u)*4) 0 calc(var(--u)); color:var(--ink)}
.art-body h3{font-family:var(--f-ui);font-weight:800;font-size:15.5px;
  margin:calc(var(--u)*3) 0 calc(var(--u)); color:var(--ink)}
.art-body blockquote{
  margin:calc(var(--u)*3) 0; padding:calc(var(--u)) 0 calc(var(--u)) calc(var(--u)*2);
  border-left:2px solid var(--lume); font-size:17px; line-height:1.7; color:var(--ink);
}
.art-body ul, .art-body ol{margin:0 0 calc(var(--u)*2); padding-left:22px}
.art-body li{margin-bottom:6px}
.art-body a{color:var(--lume)}
.art-body hr{border:none;border-top:1px solid var(--rule);margin:calc(var(--u)*4) 0}
.art-body figure{margin:calc(var(--u)*3) 0}
.art-body figure img{display:block;width:100%;border:1px solid var(--rule)}
.art-body figcaption{
  font-family:var(--f-micro); font-size:9px; color:var(--ink-3);
  margin-top:7px; line-height:1.8;
}
.art-foot{padding:0 calc(var(--u)*3) calc(var(--u)*5)}

/* ---------- the editor ---------- */
.news-ed{border:1px solid var(--rule-2);padding:calc(var(--u)*2);margin-top:calc(var(--u)*2)}
.news-ed.hide{display:none}
.news-bar{
  display:flex; flex-wrap:wrap; gap:5px;
  padding:calc(var(--u)) 0; border-bottom:1px solid var(--rule);
  position:sticky; top:0; background:var(--ground); z-index:2;
}
.news-bar .ep-btn{min-width:30px}
.news-body{
  min-height:280px; padding:calc(var(--u)*2) 0;
  font-family:var(--f-ui); font-size:15px; line-height:1.75; color:var(--ink);
  outline:none;
}
.news-body:focus{outline:none}
.news-body p{margin:0 0 calc(var(--u)*1.5)}
.news-body h2{font-size:19px;font-weight:800;margin:calc(var(--u)*2) 0 calc(var(--u))}
.news-body h3{font-size:15.5px;font-weight:800;margin:calc(var(--u)*2) 0 calc(var(--u))}
.news-body blockquote{border-left:2px solid var(--lume);padding-left:calc(var(--u)*2);
  margin:calc(var(--u)*2) 0;color:var(--ink-2)}
.news-body ul, .news-body ol{padding-left:22px;margin:0 0 calc(var(--u)*1.5)}
.news-body figure{margin:calc(var(--u)*2) 0;border:1px solid var(--rule);padding:6px}
.news-body figure img{display:block;width:100%;max-height:320px;object-fit:cover}
.news-body figcaption{font-family:var(--f-micro);font-size:9px;color:var(--ink-3);
  margin-top:6px;outline:none}
.news-body hr{border:none;border-top:1px solid var(--rule);margin:calc(var(--u)*2) 0}
.news-body a{color:var(--lume)}
.news-cover{margin:calc(var(--u)) 0}
.news-cover img{display:block;max-width:min(100%,420px);border:1px solid var(--rule-2)}

/* ---------------------------------------------------------------------------
   ON A PHONE, ALL FIVE FIT — TWO THEN THREE.

   auto-fill with a 230px minimum gives ONE column on a 390px screen, so the
   five articles became five full-width plates and the section ran the length
   of the page. A reader scrolling past five identical rectangles is not being
   shown a front page; they are being shown a list with pictures.

   Six columns divides both ways: the lead pair take three each, the remaining
   three take two each. That is the same editorial shape as the desktop layout
   — something leads, the rest follow — at a size a thumb can take in at once.

   The type has to come down with the card or the headline wins an argument
   with its own plate. It is set in ch-independent steps rather than a scale
   factor so the second row, which is narrowest, stays readable.

   THIS BLOCK LIVES AT THE END OF THE FILE ON PURPOSE. The base .news-title is
   declared further down, at the same specificity, so an override written above
   it loses the cascade and the three cards in the second row kept their
   full-size headline — measured at 15px in a 166px card.  */
@media (max-width:720px){
  .news-grid{
    grid-template-columns:repeat(6,1fr);
    gap:calc(var(--u)*1.25);
    padding:0 calc(var(--u)*2) calc(var(--u)*2);
  }
  .news-grid > .news-card{grid-column:span 2}
  .news-grid > .news-card:nth-child(-n+2){grid-column:span 3}

  /* squarer, because a 16/9 plate two-fifths of a phone wide is a stripe */
  .news-card .club-plate{aspect-ratio:1}
  .news-card:first-child .club-plate{aspect-ratio:4/3}
  .news-grid > .news-card:nth-child(-n+2) .club-plate{aspect-ratio:4/3}

  .news-title{font-size:11px; line-height:1.2}
  .news-card:first-child .news-title{font-size:12.5px}
  .news-grid > .news-card:nth-child(-n+2) .news-title{font-size:12.5px}
  /* the standfirst is the first thing to go: at this width it is two words a
     line and the headline already carries the story */
  .news-grid > .news-card:nth-child(n+3) .news-stand{display:none}
  .news-stand{font-size:8px; -webkit-line-clamp:2}
  .news-over{padding:8px}
  .news-flag{font-size:6.5px; padding:2px 5px; top:6px; left:6px}
}