/* ---------------------------------------------------------------------------
   Hand-written responsive rules.

   Everything else on this site is captured from production. These few rules are
   authored, and they exist for one reason: production renders a handful of
   sections as a DIFFERENT COMPONENT on phones — a row of cards on desktop, a
   swipeable carousel below 992px. A static page cannot swap components, so
   carrying both meant shipping the same words twice, which is bad for search
   engines and for anything reading the page.

   So those sections keep ONE copy of the content, and these rules present it
   appropriately on a small screen.

   This is a deliberate, stated deviation from production: the phone view stacks
   rather than swipes. The content is identical, nothing is lost, and the page is
   smaller. Recorded in IMPROVEMENTS.md.

   Keep this file small. If it grows past a screenful, the right move is to
   rebuild the section properly, not to add more overrides.
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {

  /* Present these as a natively swipeable strip rather than stacking them.
     Stacking worked but made the pages far taller than production; a
     scroll-snap strip matches how production behaves and needs NO JavaScript,
     which matters more here than matching it pixel for pixel. */
  [class*="platformsCardsRow"],
  [class*="featuredDarwinsSection__grid"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [class*="platformsCardsRow"]::-webkit-scrollbar,
  [class*="featuredDarwinsSection__grid"]::-webkit-scrollbar { display: none; }

  [class*="platformsCardsRow"] > *,
  [class*="featuredDarwinsSection__grid"] > * {
    flex: 0 0 72% !important;
    max-width: 72% !important;
    scroll-snap-align: center;
  }

}