/*
 * The DigitalMe phone, on its own (B2b, 20 Oct 2026).
 *
 * Rohan, 19 Oct 2026 14:01: "Every phone across the ShareRing website uses the
 * same phone style as the DigitalMe page (its iPhone silhouette style); no page
 * gets its own phone frame or styling." These are its rules, moved unchanged
 * out of product-kit.css (B2a) so a page that is not a product-kit page (the
 * industry pages, the age assurance hub, /pricing/, /sharering-me/) can draw
 * the same phone without loading the whole kit. inc/dm-phone.php enqueues this
 * file on every template that renders a DigitalMe phone and product-kit.css
 * depends on it, so the cascade on a kit page is what it was: these rules
 * first, then the kit's "The DigitalMe phone in the kit phone's place".
 *
 * Printer: srpk_dm_phone() / srpk_dm_phone_html() in inc/dm-phone.php.
 */

/* ---------------------------------------------------------------- The phone: DigitalMe's */

/*
 * Rohan, 19 Oct 2026 14:01: every phone on the site uses the DigitalMe page's
 * phone (its iPhone silhouette), not the product suite's frame above. This is
 * that phone, the component LIVE /digital-me/ draws: its rules copied
 * unchanged from the digital-me-landing plugin's digital-me.css (sharering_pages
 * pages/digital-me), which this template cannot load and which stays as it is.
 *
 *   .phone-hero    the phone: a box 2.174 times as tall as it is wide, its
 *                  corners the SILHOUETTE radius of iphone-frame-chrome.svg,
 *                  clipping what is in it, with a drop shadow (digital-me.css,
 *                  the "persistent hero" rule for width, filter; the "fix 3"
 *                  rule for height, overflow). See the radius note below: the
 *                  value fix 3 carried was the APERTURE radius and leaked.
 *   .phone-image   a capture of the whole phone's face, filling it (fix 3, and
 *                  fix 34.1's transition). One shows at a time; the DigitalMe
 *                  page shows it with an inline opacity, this page with .is-on.
 *   .phone-chrome  the static chrome over it, iphone-frame-chrome.svg (bezel,
 *                  Dynamic Island, side buttons, home indicator, a transparent
 *                  screen cutout; fix 22). Copied to assets/img/products/.
 *
 * Left out, because they are the DigitalMe page's scroll choreography and not
 * the phone: position fixed, top, left, transform, opacity, z-index and
 * pointer-events on .phone-hero, its --phone-scale and its transitions. Here
 * a phone stands in its scene (position relative, so the layers inside it
 * have a box to fill). The page says how wide it is with --phone-width.
 *
 * Every kit page (20 Oct 2026; /shareprotect/ only before): the rules are
 * scoped .srk-page, unchanged. A page prints the phone with srpk_dm_phone()
 * (inc/product-kit.php) and says how wide it is with --phone-width, or uses
 * srpk_phone(), which puts it in the kit phone's place (the next section).
 */
/*
 * THE RADIUS IS THE SILHOUETTE'S, NOT THE APERTURE'S (SHA-88, 26 Oct 2026).
 *
 * iphone-frame-chrome.svg carries TWO radii in its 402 x 874 units, and they
 * are not interchangeable:
 *
 *   r 54, at the box edge      the phone's painted OUTER BODY, the silhouette
 *   r 48, inset 7              the screen APERTURE cut out of the bezel
 *
 * This rule shipped `border-radius: 12% / 5.5%`, which on a 402 x 874 box is
 * rx 48.24, ry 48.07: the APERTURE radius, applied at the OUTER box edge. So
 * the clip was squarer than the body the SVG paints, and a crescent of screen
 * colour sat OUTSIDE the bezel on all four corner arcs, about the full 7 unit
 * bezel thickness wide on the diagonal. Rohan, 26 Oct 2026, on the ShareProtect
 * hero: "you can see the colour bleeding out the edges in the corners."
 *
 * It had been there since the component was first drawn, on every page that
 * draws a phone, and it was invisible wherever the face is dark at the corner
 * arcs, which is nearly every face in the library. ShareProtect was the first
 * page to put a light face on a light backdrop and show it.
 *
 * A PERCENTAGE PAIR AND NOT A LENGTH, and the reason is worth the words
 * because the obvious choice is the wrong one. 54 of 402 units is 13.433% of
 * the width; the box is 2.174 times as tall as it is wide, so the same 54 is
 * 13.433 / 2.174 = 6.179% of the height, and the pair draws a circular corner.
 *
 * `calc(var(--phone-width) * 0.13433)` looks better. It says the geometry
 * directly and cannot go oval if the height above ever changes. IT WAS TRIED,
 * ON 26 OCT 2026, AND IT BREAKS /sharering-me/. The rule that puts the phone
 * over the tile there (product-sharering-me.css, `.srm-dm > .phone-hero`) sets
 * `width: auto`, `left: -1px`, `right: -1px` and `aspect-ratio: 1 / 2.174`: the
 * box comes from the wrapper, --phone-width is never set, and the calc()
 * resolves to nothing, so the radius falls back to ZERO and every phone on the
 * page goes square cornered. The gate caught it on the first sweep, which is
 * the only reason this comment is not a bug.
 *
 * So: a percentage, because a percentage needs no custom property and measures
 * the box that is actually there. --phone-width is the usual way a page sizes
 * this phone, not the only one.
 *
 * bin/phone-corner-clip.sh is the gate. It paints the face a flat colour under
 * the chrome and fails if one pixel of it lands outside the chrome's painted
 * silhouette. Nothing was looking at the phone's outline before it, which is
 * why this shipped; bin/phone-face-shape.sh checks the ASSETS and was green
 * throughout, correctly, because the fault was never in an asset.
 */
.srk-page .phone-hero {
  position: relative;
  width: var(--phone-width);
  height: calc(var(--phone-width) * 2.174);
  overflow: hidden;
  border-radius: 13.433% / 6.179%; /* 54 of the SVG's 402 units: the SILHOUETTE, not the aperture */
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}

.srk-page .phone-hero > .phone-image,
.srk-page .phone-hero > picture > .phone-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: translateY(0);
  opacity: 0;
  transition: none;
}

.srk-page .phone-hero > .phone-image.is-on,
.srk-page .phone-hero > picture > .phone-image.is-on { opacity: 1; }

/*
 * A face that changes with the viewport (B2b): one <picture> in the phone,
 * drawing no box of its own, its img the .phone-image (srm_phone_pic() on
 * /sharering-me/). The same rules, one element further in.
 */
.srk-page .phone-hero > picture { display: contents; }

.srk-page .phone-hero > .phone-chrome {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 5;
  pointer-events: none;
}