/* ==========================================================================
   TeamTrek V5 — Footer link columns
   --------------------------------------------------------------------------
   Loaded only by index-v5.html. css/sections.css and css/responsive.css are
   shared with v1, v3 and v4, and they size .footer__cols for three groups:
   two columns to 600px, three above it. This page carries four.

   Nothing else in the footer changes — the brand block, the status chip, the
   social row, the ghosted wordmark and the bottom bar are all untouched, and
   js/footer-v3.js still turns these same groups into accordions below
   1024px, reading them straight out of the markup.
   ========================================================================== */

/* Four groups, so four columns once there is room for them. Below 1024px the
   accordion takes over and these never apply. */
@media (min-width: 1024px) {
  .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }

  /* The link block needs more of the row than it did with three groups, so
     the brand column gives some back. Shared value was .95fr / 1.35fr. */
  .footer__top { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: 3.5rem; }

  /* The lists start at the same line as the brand blurb and run to their own
     length: four groups of 4, 3, 6 and 5 links are uneven by nature, and
     padding them out would mean inventing entries. A straight top edge and a
     ragged bottom is what a footer is. */
  .footer__cols > div { align-content: start; }

  /* 15px links in a 200px column wrap "Project & Task Tracking" and
     "Templates & Tools" onto a second line, which breaks the row rhythm
     against the neighbouring columns. 14px holds all twenty on one line. */
  .footer__links a { font-size: .875rem; }
  .footer__links { gap: .625rem; }
}

/* Between 600px and 1023px the shared sheet asks for three columns and the
   accordion has not taken over yet on the widest of those — two columns of
   four groups reads better than three plus an orphan. */
@media (min-width: 600px) and (max-width: 1023px) {
  /* :not(--acc) matters: js/footer-v3.js rebuilds these groups as accordion
     rows below 1024px and marks the container .footer__cols--acc, which
     css/product-v3.css lays out as a single column. This sheet loads after
     that one at equal specificity, so without the guard it would win and
     split the accordion into two columns. */
  .footer__cols:not(.footer__cols--acc) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}