/* ProViotic Kids page-specific overrides */

/* Reserve space for the desktop visual to avoid CLS before image load */
body.proviotic-kids-page .visual {
  min-height: clamp(320px, 46vw, 600px);
}

/* Provide a fallback aspect-ratio so browsers can allocate space before the image downloads */
body.proviotic-kids-page .visual img {
  aspect-ratio: auto 3 / 4; /* fallback until intrinsic ratio is known */
}

@media (max-width: 800px) {
  body.proviotic-kids-page h1,
  body.proviotic-kids-page .copy h1 {
    font-size: 1.4rem !important;
  }

  body.proviotic-kids-page h2,
  body.proviotic-kids-page .copy h2 {
    font-size: 1.2rem !important;
  }

  /* On mobile we hide .visual and show .mobile-img. Reserve space with aspect-ratio. */
  body.proviotic-kids-page .mobile-img {
    aspect-ratio: auto 3 / 4; /* roughly portrait packshot */
  }
}