/* Prompt Queen AI — responsive layer over the desktop-fixed design.
   Targets the design's inline-style grids by substring so no JSX edits are
   needed. Desktop is untouched; these only apply at small widths. */

@media (max-width: 900px) {
  /* 6-col Learning Hub strip -> 2 cols */
  [style*="repeat(6, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  /* 3-up card rows -> 1 col */
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  /* hero + two-column splits -> stack */
  [style*="1.15fr 0.85fr"],
  [style*="1fr 1fr"][style*="gap: 48"] { grid-template-columns: 1fr !important; }
  /* footer 2fr 1fr 1fr 1fr -> 2 cols */
  [style*="2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  /* trim the big section top paddings a bit */
  [style*="padding: 96px 32px"] { padding: 56px 24px !important; }

  /* Learning Hub: level / start-here sections use a 1fr 2fr split -> stack,
     drop the sticky left rail, and trim the generous side padding so cards
     get the full phone width. */
  [style*="grid-template-columns: 1fr 2fr"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  [style*="top: 96px"] { position: static !important; top: auto !important; }
  [style*="padding: 48px 32px"] { padding: 36px 20px !important; }
  [style*="padding: 80px 32px"] { padding: 52px 20px !important; }
}

@media (max-width: 560px) {
  [style*="repeat(6, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* Balanced grids (news page): desktop uses N-track grids with per-card column
   spans so every row fills the width at any story count. On small screens,
   reset the span math to simple uniform columns. Placed after the generic
   substring rules above so these win for balanced containers. */
@media (max-width: 900px) {
  [data-balanced-grid] { grid-template-columns: 1fr 1fr !important; }
  [data-balanced-grid] > * { grid-column: auto !important; }
}
@media (max-width: 560px) {
  [data-balanced-grid] { grid-template-columns: 1fr !important; }
}