/* Quietwork 2026-10-28: homepage footer "Latest articles" on phones
   The panel (mod_articles_latest, .moduletable.footblog, home page only) has its desktop layout
   in the min-width: 769px block at the bottom of template.css: a 5-column grid of ten titles.
   On phones that block does not apply, so the ten titles ran together as one centred block.

   Phones only (max-width 768px, the same breakpoint as mobile-header.css):
   - heading and list left-aligned, inset 8px more so text does not touch the screen edge
     (centring hid how close it sat), titles at 16px like the other footer links
   - the five newest only (items 6 to 10 hidden; the markup and desktop keep all ten)
   - each title is one full-width tappable row, at least 44px tall, with a thin divider
   - an "All articles" row to /blog closes the list. modLatest() in scripts/lib/render.mjs writes
     it after the <ul>, so check.mjs still counts ten <li> items; it is hidden on desktop.
   No bold on "All articles": only Lato 300 and 400 are loaded, so 700 would be a faux bold.
   The divider colour #C9CACC is the one template.css already uses above this panel on desktop.
   Nothing here changes how the panel looks at 769px and wider. */

#footermenus .footblog A.footblog-all {
   display: none;
}

@media (max-width: 768px) {
   #footermenus DIV.moduletable.footblog {
      padding: 0 8px;
   }
   #footermenus DIV.moduletable.footblog,
   #footermenus .footblog H3 {
      text-align: left;
   }
   #footermenus .footblog UL.latestnews LI {
      font-size: 16px;
      line-height: 1.35;
      border-bottom: 1px solid #C9CACC;
   }
   #footermenus .footblog UL.latestnews LI:nth-child(n+6) {
      display: none;
   }
   #footermenus .footblog UL.latestnews LI A,
   #footermenus .footblog A.footblog-all {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      min-height: 44px;
      padding: 10px 0;
   }
   #footermenus .footblog A.footblog-all SPAN {
      margin-left: 0.4em;
   }
}