/* Phone heroes of Veterinary and Agriculture, both languages: the "poster" (user, 2026-10-20: "keep the same concept, make it look
   significantly better on phones"; 2026-10-25: "like in the French version, but make it smaller, and make sure it is optimised to
   work smooth and easy on phone, not heavy"). Same scene as on desktop: the shape turns one fifth per product, products and props
   ride its edge, the colours follow the product, one scroll gesture per product (vet2-hero.js / agri2-hero.js measure everything
   from these boxes). Loaded after vet2.css / agri2.css; desktop is untouched.
   The shape covers the top of the screen with the text on it in white; both its lower corners and its bottom edge show; the
   product stands on that edge; the product name is a big pale word on the light part below, the scroll cue bottom right.
   Size (2026-10-25): 172cqw, was max(230cqw, 150svh), then 205cqw: the smallest that keeps every line of text and every button on
   the colour through the whole turn (worked out on the real outline for 360-430px phones and texts up to 325px tall).
   Speed: a smaller shape is less to redraw while it turns, and the JS hides its two filters (.mh-shape__light) during the turn.
   Checked at 360x740, 375x667, 390x844, 412x915, 430x932 and 768x1024, Chromium and WebKit (nothing on the text, the name or the
   cue, nothing off screen). The English "medallion" of 2026-10-20 is in the backups (phone-hero-2026-10-25). */
@media (max-width: 900px) {
  /* the picture covers the whole hero; the text lies on it */
  .v2 .mh-pinbox { display: block; padding: 0; }
  /* --edge: the height of the shape's lower-left corner (centre 165px down + .35 of the box), so the bottom edge stays under the
     text and its buttons; from there the edge runs slightly down to the right */
  .v2 .mh-stage { --b: 172cqw; --edge: calc(165px + .35 * var(--b)); position: absolute; inset: 0; margin: 0; min-height: 0; height: auto; }
  /* the shape centred across the screen, cut by its top; both lower corners in view; it still turns one fifth per product */
  .v2 .mh-shape { right: calc(50% - var(--b) / 2); top: calc(var(--edge) - .85 * var(--b)); width: var(--b); height: var(--b); }
  .v2 .mh-shape__light { will-change: opacity; } /* own layer: hiding and showing it redraws nothing */
  /* the slab's thickness: the first and last of each set of 7 stacked outlines draw the same edge at phone size (checked at 3x:
     no pixel differs by more than 2/255) with 30% less drawing on every frame of a turn */
  .v2 .mh-shape__side > use:not(:first-child):not(:nth-child(7)), .v2 .mh-shape__side > g > use:not(:first-child):not(:last-child) { display: none; }
  /* a soft shade under the text so white stays readable on the light colours (gold, rose) */
  .v2 .mh-stage::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: var(--edge); pointer-events: none;
    background: linear-gradient(rgba(10,6,8,.32), rgba(10,6,8,.12) 60%, rgba(10,6,8,0)); }
  .v2 .mh-glow { display: none; }
  /* the product name: a big pale word on the light part, low on the left, under the product, level with the cue */
  .v2 .mh-titles { top: auto; bottom: 14px; left: 16px; right: auto; width: 64%; text-align: left; }
  .v2 .mh-title, .v2 .mh-title--sm { color: color-mix(in srgb, var(--wine) 13%, transparent); font-size: clamp(34px, min(11vw, 6.4svh), 64px); line-height: .92; }
  /* the product stands centred on the bottom edge, 66% across; its props: a above right, b on the colour to the left, c in front
     low right */
  .v2 .mh-wheel { right: 34%; top: calc(var(--edge) + 9.8cqw); }
  .v2 .mh-logo { --x: -17; --y: -22; --w: 36; }
  .v2 .mh-bottle { --x: -8; --y: -23; --w: 16; }
  .v2 .mh-bag { --x: -12; --y: -23; --w: 24; }
  .v2 .mh-ps { --x: -25; --y: -20; --w: 50; }
  .v2 .mh-prop--a { --x: 18; --y: -30; --w: 12; }
  .v2 .mh-prop--b { --x: -34; --y: -12; --w: 9; }
  .v2 .mh-prop--c { --x: 10; --y: 12; --w: 13; }
  .v2 .mh-prop--ear-tag { --x: 18; --y: -32; }
  .v2 .mh-prop--straw { --x: -35; --y: -10; --w: 12; }
  /* text in white on the colour */
  .v2 .mh-in { position: relative; z-index: 3; padding: 0 22px; }
  .v2 .mh-side { padding-top: 26px; color: #fff; }
  .v2 .mh-h { font-size: clamp(26px, 7.4vw, 42px); color: #fff; max-width: 14ch; }
  .v2 .mh-lead { color: rgba(255,255,255,.84); max-width: 30ch; }
  .v2 .mh-ctas { flex-wrap: wrap; }
  .v2 .mh-btn { flex: 0 0 auto; }
  .v2 .mh-btn--primary { background: #fff; color: var(--wine); }
  .v2 .mh-btn--secondary { border-color: rgba(255,255,255,.7); color: #fff; }
  /* the cue on the light part, bottom right (the name is on the left), in the usual dark grey */
  .v2 .mh-cue { left: auto; right: 22px; bottom: 16px; }
  .v2 .mh-cue__hint { display: none; }
}
@media (max-width: 900px) and (max-height: 720px) {
  /* short phones (iPhone SE and the like): products, props and the name a little smaller, the product a little further right,
     so the product stays clear of the name */
  .v2 .mh-stage { --u: min(.86cqw, 3.9px); }
  .v2 .mh-wheel { right: 31%; }
  .v2 .mh-title, .v2 .mh-title--sm { font-size: clamp(28px, min(9vw, 4.8svh), 64px); }
}