/* ============================================================
   MUIY — wide-screen responsive layer (loaded after liquid-glass)
   Phones (<560px) are untouched: this file only ADDS behavior for
   bigger screens, so the shipped phone design stays exactly as-is.

   The size ladder:
     <560px            phone            — one fluid column (unchanged)
     ≥560px  + touch   tablet portrait  — full-bleed 600px column (app.css)
     ≥900px  + touch   tablet landscape — full-bleed 720px column, grids go 2-up
     ≥1100px + mouse   desktop          — the floating card widens to 720px,
                                          same 2-up grids inside
   Desktop between 560–1100px keeps the classic 410px phone card.

   "wide mode" below = the last two rungs, expressed as one media list:
   @media (min-width:900px) and (pointer:coarse), (min-width:1100px)
   ============================================================ */

/* ---------- the app column itself ---------- */
/* Big touch tablets (landscape iPad etc.): full-bleed, wider column. */
@media (min-width:900px) and (pointer: coarse){
  .phone{width:min(100%, 720px);}
}
/* Desktop with room to spare: keep the floating-card look but let it
   breathe — wider and taller than the phone-sized card. */
@media (min-width:1100px) and (pointer: fine){
  .desk{align-items:center;}
  .phone{width:720px; height:min(100%, 960px);}
}

/* ---------- content reflow in wide mode ---------- */
@media (min-width:900px) and (pointer: coarse), (min-width:1100px){

  /* Donor pool: cards flow 2-up so each stays a readable phone-ish width.
     align-items:start keeps a short card from stretching to its row mate. */
  .pool-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:12px;
    align-items:start;
  }
  /* the empty state spans the whole grid, not one column */
  .pool-list > .empty{grid-column:1 / -1;}

  /* Learn hub: 2-up tiles become 3-up */
  .learn-grid{grid-template-columns:repeat(3, 1fr);}

  /* Full-page sheets: cap the reading column so forms and articles don't
     stretch across the whole width; stays centred inside the sheet. */
  .mon-page-body{max-width:640px; margin:0 auto; width:100%;}
  .sheet{max-width:640px; margin:0 auto;}

  /* Wider gutters for the main pages so content doesn't hug the edges */
  .tc-page{padding-left:26px; padding-right:26px;}
}