/* Responsive utility classes for the intelligence pages.
 *
 * The Brief / Pulse / Frontier views build their multi-column layouts via
 * inline `gridTemplateColumns` which can't carry media queries. Rather
 * than rewriting every grid as a styled component, attach one of these
 * class names alongside the inline style — the @media rule below collapses
 * the columns on narrow viewports.
 *
 * Breakpoint: 768px is the canonical "phone vs tablet/desktop" line. Above
 * that, the multi-column layout is preserved. Below, every column becomes
 * a row.
 *
 * Usage (in React.createElement props):
 *   className: "ithras-grid-2x1"          // 2fr 1fr → 1fr on phone
 *   className: "ithras-grid-1x1"          // 1fr 1fr → 1fr on phone
 *   className: "ithras-grid-3up"          // any 3-up grid → 1fr on phone
 *   className: "ithras-row-equalstack"    // anything with siblings → stack on phone
 *
 * Inline style still wins, but the !important on the media-query rules
 * overrides the inline `gridTemplateColumns` once we hit the breakpoint.
 */

@media (max-width: 768px) {
  .ithras-grid-2x1,
  .ithras-grid-1x1,
  .ithras-grid-3up {
    grid-template-columns: 1fr !important;
  }
  .ithras-row-equalstack {
    flex-direction: column !important;
  }
  /* Tighten editorial side padding on phone — the Brief / Pulse pages
     wrap a max-width container that already has horizontal padding from
     AppShell. On phone the whole row should hug the viewport edges minus
     a small breathable gutter. */
  .ithras-page-edge {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Reduce display-heading sizes when they were sized for desktop. */
  .ithras-display-shrink-mobile {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
  /* Hide low-priority chrome (e.g. inline secondary nav, tiny status hints)
     when space is precious. Apply only to elements that are genuinely
     skippable on phone — not core CTAs. */
  .ithras-hide-mobile {
    display: none !important;
  }
}

/* Very narrow phones (≤ 380px). Tighter padding still. */
@media (max-width: 380px) {
  .ithras-page-edge {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}