/* Youth Oasis — breakpoint overrides only.
   Base styling stays inline on the elements (so pages paint immediately);
   this file carries the rules that cannot be expressed inline. Hooks are
   data-r attributes, not classes, so nothing here defines base appearance.

   data-r values:
     split   two-column section -> stacks
     cols3   three-up grid -> two-up -> one
     cols2   two-up grid -> one
     tiers   gift-tier grid -> two-up -> one
     sect    section padding tightens
     h1/h2   headline sizes step down
     bignum  oversized phone/stat numbers step down
     pad     leaves room for the fixed mobile action bar
     marquee continuous ticker -> static stacked list
*/

@media (max-width: 1000px) {
  [data-r="split"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-r="cols4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r="cols3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r="tiers"] { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 900px) {
  [data-r="mobilebar"] { display: flex !important; }
  /* Reserved room for the bar must appear at the same width as the bar itself. */
  [data-r="pad"] { padding-bottom: 96px !important; }
  [data-r="marquee"] {
    animation: none !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  [data-r="marquee-dup"] { display: none !important; }
}

@media (max-width: 640px) {
  [data-r="cols3"], [data-r="cols2"], [data-r="tiers"], [data-r="cols4"] { grid-template-columns: 1fr !important; }
  [data-r="sect"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-r="h1"] { font-size: 34px !important; line-height: 1.15 !important; }
  [data-r="h2"] { font-size: 26px !important; }
  [data-r="bignum"] { font-size: 30px !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-r="marquee"] { animation: none !important; }
}