/* Mobile order for the home page of the Best onlyfans 1 chain.

Same change as on Best onlyfans 2: on a phone the hero is a single column, so
the "Top of the board" panel used to come before the live partner directory —
the cards a reader came for were pushed a whole screen down. This puts the
live directory right under the headline and the panel below it. The desktop
layout is not touched.

This chain marks its home page with the class "bf" on <body>, unlike chain 2
which uses "bf bf-home", so the rules are keyed on the presence of the hero
section instead of a body class.
*/
@media (max-width: 980px) {
  body.bf main:has(> section.bf-hero) { display: flex; flex-direction: column; }
  body.bf main:has(> section.bf-hero) > section.bf-hero { display: contents; }
  body.bf main:has(> section.bf-hero) .bf-hero__inner { display: contents; }

  body.bf main:has(> section.bf-hero) .bf-hero__copy {
    order: 1;
    background: var(--hero-bg);
    background-image:
      radial-gradient(120% 130% at 88% -10%, rgba(13, 177, 242, .28) 0%, rgba(13, 177, 242, 0) 58%);
    padding: 48px 20px 34px;
  }
  body.bf main:has(> section.bf-hero) > section.bf-live { order: 2; }
  body.bf main:has(> section.bf-hero) .bf-hero__panel {
    order: 3;
    background: var(--hero-bg);
    padding: 0 20px 34px;
  }
  body.bf main:has(> section.bf-hero) .bf-hero__shelf {
    order: 4;
    background: var(--hero-bg);
    padding: 0 20px 48px;
  }
  body.bf main:has(> section.bf-hero) > section:not(.bf-hero):not(.bf-live) { order: 5; }
}