/* BAKIPA FITNESS - Mobile fact ribbon refinement v4.
   Keep the four facts editorial on desktop, but stop compressing them into
   unreadable four-column tracks on narrow/mobile viewports. */

:root { --nl-refinement-v4: 1; }

body:has(> main > .hero) .ribbon-inner strong,
body:has(> main > .hero) .ribbon-inner span {
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

@media (max-width: 720px) {
  body:has(> main > .hero) .ribbon-inner {
    /* 9em makes the minimum track width follow the actual text size. At
       normal mobile text size, 360-430px resolves to a calm 2x2 grid. At
       320px, or when text is enlarged to 200%, the minimum grows enough for
       the layout to collapse to one readable column instead of splitting
       short words into fragments. */
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 9em), 1fr)
    );
    gap: 1px;
    background: rgba(247, 243, 236, .13);
  }

  body:has(> main > .hero) .ribbon-inner > div,
  body:has(> main > .hero) .ribbon-inner > div:first-child {
    min-width: 0;
    min-height: 126px;
    margin: 0;
    padding: 1.2rem clamp(1rem, 4.2vw, 1.35rem);
    border: 0;
    background: color-mix(in oklab, var(--teal) 94%, var(--ink));
  }

  body:has(> main > .hero) .ribbon-inner strong {
    max-width: 100%;
    font-size: clamp(1.5rem, 1.34rem + .7vw, 1.8rem);
    line-height: 1.08;
    text-wrap: balance;
  }

  body:has(> main > .hero) .ribbon-inner span {
    max-width: 14ch;
    font-size: clamp(.96rem, .91rem + .22vw, 1.04rem);
    line-height: 1.35;
  }
}

@media (max-width: 340px) {
  body:has(> main > .hero) .ribbon-inner {
    grid-template-columns: 1fr;
  }

  body:has(> main > .hero) .ribbon-inner > div,
  body:has(> main > .hero) .ribbon-inner > div:first-child {
    min-height: 108px;
  }
}