/* ==========================================================================
   interstitial-ads.php — page-specific additions
   ==========================================================================

   Loaded AFTER assets/text-ads/css/style.css, which is the shared ad-format
   design and is not edited from here. That sheet owns every section, token
   and breakpoint on this page; this one exists only for the one thing the
   INTERSTITIAL format shows that the text design has no equivalent for:

     the ad, and what it does to the page underneath it

   A text ad shares the page. An interstitial takes it over — and the section
   only makes its argument if the mock page is visibly interrupted, so the
   article behind goes dim and the ad arrives as a window on top of it. That
   is the whole of this file: a scrim, and a card with browser chrome.

   Everything is scoped under `.interstitial-ads-page` so including this sheet
   can never reach text-ads.php. Tokens (--c-*, --font-*) all come from the
   shared sheet; nothing here re-declares a colour or a face.

   MEASURED FROM THE DESIGN FRAME (Frame 2126 (1).png, 1679x670). The device
   in it is byte-identical to text-ads' — screen box 990x656 at the same
   offsets — so every figure below is a percentage of that same screen and
   drops into the coordinate system the shared sheet already uses.
   ========================================================================== */

.interstitial-ads-page {
  /* THE AD, AT THE ONE SIZE THE DESIGN DRAWS IT. 598px wide on the 1920
     artboard — the creative's own natural width, shown 1:1 — which is where
     31.146vw comes from. */
  --in-card-w: clamp(280px, 31.146vw, 598px);

  /* The browser chrome above the creative: 24px on a 598px card. Held as a
     ratio rather than a height so the bar, the close button inside it and the
     picture below all scale off one number. */
  --in-chrome-ar: 598 / 24;
  --in-creative-ar: 598 / 337;

  /* The close button. 14px across in a 24px bar, 5px in from the card's right
     edge, and its own fill is a shade lighter than the chrome it sits on. */
  --in-close-size: 58.333%;      /* 14 / 24 of the chrome's height */
  --in-close-inset: 0.836%;      /* 5 / 598 of the card's width    */
  --in-close-fill: #D2D2D2;

  /* The × inside it, inlined so it takes currentColor through a mask the way
     the size picker's tick does on banner-ads. */
  --in-close-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");

  /* THE SCRIM. Measured by dividing the article's pixels in this frame by the
     same pixels in the native frame, which draws the identical mock page with
     nothing over it: the ratio sits at 0.87-0.90 right across the screen, so
     the page is under a flat black wash at roughly one-eighth. Low on
     purpose — the article has to still read as an article for the takeover to
     mean anything. */
  --in-scrim: rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   The ad

   One element for both call sites — the hero and the S3 screen — because the
   flight measures one against the other, so any difference between them would
   show as a jump on landing.

   It KEEPS the `.ta-adcard` class. scroll.js finds the flight's target with
   `.ta-device .ta-adcard` and the shared sheet hides that copy while the card
   is in the air, so reusing the class is what lets the flight work here with
   no JavaScript change at all.
   -------------------------------------------------------------------------- */
.interstitial-ads-page .ta-adcard.in-adcard {
  /* `.ta-adcard` is a padded white flex column holding three text nodes; none
     of that applies to a browser window. Cleared explicitly rather than by
     writing a competing rule with more specificity, so what this element IS
     stays readable in one place. */
  display: block;
  padding: 0;
  gap: 0;
  background-color: var(--c-white);
  border: 1px solid var(--c-grey);
  /* 13px on a 598-wide card. Two radii because the box is not square and one
     percentage would give an ellipse: 13/598 across, 13/363 down. */
  border-radius: 2.174% / 3.581%;
  overflow: hidden;
}

/* The chrome bar. `aspect-ratio` rather than a height, because a percentage
   height needs a parent with a definite one and this card's height is derived
   from its width — the bar and the picture below it are the only two things
   that decide it. */
.interstitial-ads-page .in-adcard__chrome {
  position: relative;
  width: 100%;
  aspect-ratio: var(--in-chrome-ar);
  background-color: var(--c-white);
}

.interstitial-ads-page .in-adcard__close {
  position: absolute;
  top: 50%;
  right: var(--in-close-inset);
  height: var(--in-close-size);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background-color: var(--in-close-fill);
  border-radius: 50%;
}
/* The glyph is a mask on a pseudo-element rather than a second background, so
   the white × sits ON the grey disc instead of replacing it. */
.interstitial-ads-page .in-adcard__close::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--c-white);
  -webkit-mask-image: var(--in-close-glyph);
          mask-image: var(--in-close-glyph);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.interstitial-ads-page .in-adcard__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--in-creative-ar);
}

/* --- in the hero --------------------------------------------------------- */
.interstitial-ads-page .ta-hero__card-wrap .in-adcard { width: var(--in-card-w); }

/* --------------------------------------------------------------------------
   S3 — the page being taken over

   Same 990x656 screen as text-ads and the same twelve bars at the same tops.
   Two changes.

   1. THE ARTICLE RUNS THE FULL WIDTH. text-ads' bars stop at 62.42% because
      its ad card sits in the top-right corner of the page. Nothing sits there
      here — the ad is a window over the middle — so the article runs the
      whole content column, 90.51% (896/990) against the same 4.65% inset.

   2. THE PAGE IS DIMMED AND THE AD IS ON TOP OF IT. That is the format.
   -------------------------------------------------------------------------- */
.interstitial-ads-page .ta-device__bar { width: 90.51%; }          /* 896 / 990 */
.interstitial-ads-page .ta-device__bar--short { width: 45.86%; }   /* 454 / 990, the
     same 50.67% of the full bar that text-ads' 313/618 is — the ratio is the
     design's, only the column it is measured against changed. */

/* The wash over the article. A sibling rather than a background on the screen
   itself: it has to sit ABOVE the bars and BELOW the ad, which one element
   cannot do. `inset: 0` covers the screen including its rounded corners,
   because the screen clips. */
.interstitial-ads-page .ta-device__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--in-scrim);
  pointer-events: none;
}

/* The ad itself, centred over the dimmed page. Overrides the shared sheet's
   placement of `.ta-device .ta-adcard`, which parks text-ads' card in the
   top-right corner. */
.interstitial-ads-page .ta-device .ta-adcard.in-adcard {
  z-index: 2;
  left: 19.80%;             /* x 196 / 990 */
  top: 22.26%;              /* y 146 / 656 */
  width: 60.40%;            /* 598 / 990   */
  height: auto;             /* the chrome and the picture decide it */
  padding: 0;
}