/*
 * Fox news grid — shared responsive rules.
 *
 * THIS FILE IS VERSION CONTROLLED — DO NOT EDIT ON THE SERVER.
 * Source of truth: the fox-core repo.
 *
 * Cornerstone gives a layout row only three breakpoints (1199px, 978px, 766px),
 * so a column count at any other width has to come from CSS. That is all this
 * file does: drop the news list to two columns from 1300px down.
 *
 * ⚠️ TWO SELECTORS, because the news list is built two different ways.
 *   - #central-news-posts   the five child sites, where the row carries that id
 *                           and the central-news plugin also injects pages 2+
 *                           into .x-row-inner.
 *   - .fox-news-grid        foxgroup.co, which does NOT run central-news. Its
 *                           news list is a native Cornerstone looper, so the
 *                           class was added by hand to the row in the "News
 *                           Archive Layout" (post 24992). Element-id classes
 *                           like .e24992-e3 were rejected as a hook: they shift
 *                           whenever an element is added above them.
 *
 * ⚠️ SPECIFICITY IS DELIBERATE, not accidental verbosity. Cornerstone emits
 * `.mjka-1d > .x-row-inner > *:nth-child(3n - 0)`, which is three classes.
 *   - The id selector is (1,2,0) and wins outright.
 *   - .fox-news-grid.x-row … .x-col is (0,4,0) and wins on count. Drop any one
 *     of those four classes and it ties at (0,3,0), leaving the result decided
 *     by source order, which is not something to rely on.
 *
 * ⚠️ THE BAND IS BOUNDED AT BOTH ENDS. An open-ended max-width:1300px would
 * also outrank Cornerstone's 1-column rule at 766px and leave phones on two
 * columns. min-width:767px hands the small end back.
 *
 * var(--gap) is reused rather than hardcoded so each site keeps whichever
 * gutter is already in force at that width (60px above 1199px, 20px below).
 */

@media (min-width: 767px) and (max-width: 1300px) {
    #central-news-posts > .x-row-inner > *,
    .fox-news-grid.x-row > .x-row-inner > .x-col {
        flex-basis: calc(50% - clamp(0px, var(--gap), 9999px));
    }

    /* Fallback, so losing .fox-news-grid degrades to nothing rather than to a
       silent three-column page. Finds the row structurally: the blog index
       (foxgroup.co's /news/ is the posts page, so WordPress core puts .blog on
       the body) and the only row there whose columns contain a source badge.
       Everything here is doing a job:
         :not(.x-bar *)  ⚠ REQUIRED. Without it this also matches the 3-column
                         "latest news" row in the site footer, which sits in
                         .x-bar-footer and must keep its own column count. That
                         is not hypothetical — it was matching before this was
                         added.
         > .x-row-inner  direct child, so a nested row cannot be caught.
       Verified on foxgroup.co: 7 rows on the page, this matches exactly one. */
    body.blog .x-row:not(.x-bar *):has(> .x-row-inner > .x-col .newsdivider) > .x-row-inner > .x-col {
        flex-basis: calc(50% - clamp(0px, var(--gap), 9999px));
    }
}