/* ==========================================================================
   Responsive grid utilities
   --------------------------------------------------------------------------
   These replace the grid-template-columns declarations that used to sit in
   inline style attributes. Inline styles cannot be overridden by a media
   query without !important, which is why a layout that looked fine on a
   desktop could overflow a phone with no way to correct it from the
   stylesheet. Naming them here makes every page's behaviour at small widths
   a property of the design system rather than of each template.

   The auto-fit family uses minmax(min(Npx, 100%), 1fr): the track can never
   demand more than the container has, so these need no breakpoint at all and
   cannot overflow at any width, however narrow the phone.
   ========================================================================== */
.g-fit-360 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.g-fit-320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.g-fit-300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.g-fit-280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.g-fit-260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.g-fit-220 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.g-fit-200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.g-fit-160 { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.g-fit-140 { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.g-fill-110 { grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); }
.g-fill-74 { grid-template-columns: repeat(auto-fill, minmax(min(74px, 100%), 1fr)); }
.g-fill-70 { grid-template-columns: repeat(auto-fill, minmax(min(70px, 100%), 1fr)); }

/* Two-column layouts: a record beside its side panel. Below the breakpoint the
   panel goes under the record rather than being squeezed into a sliver. */
.g-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-split-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.g-half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.g-sidebar { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .g-split, .g-split-rev, .g-sidebar { grid-template-columns: minmax(0, 1fr); }
    .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .g-half { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A sticky filter rail is useful on a desktop and a nuisance on a phone,
   where it eats the top of a screen that is already short. */
@media (max-width: 900px) {
    .g-sidebar > form[style*="sticky"] { position: static !important; }
}