/* Team Lemonade — mobile hardening overrides.
   Loaded AFTER team-lemonade.css so the captured Webflow CSS stays pristine.
   Scoped to small screens so desktop and tablet are untouched.

   Program cards (.bento.solo/.coop/.sta): the wrapping <a.program-hovers> is
   display:inline-block (Webflow's w-inline-block). A percentage width on the
   card inside an auto-width inline-block collapses it to a sliver, the card
   has no intrinsic width (background image + absolutely-positioned titles).
   So: stack the columns, make the anchor a real full-width block, then let the
   card fill it as a full-width banner with a proper height. */
@media screen and (max-width: 767px) {
  .w-row .w-col-stack { width: 100%; left: auto; right: auto; }
  a.program-hovers { display: block; width: 100%; }
  .div-column-left.bento.solo,
  .div-column-left.bento.coop,
  .div-column-left.bento.sta {
    width: 100%;
    height: 300px;
    margin-bottom: 16px;
  }
}