/* ==========================================================================
   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;
}


/* --------------------------------------------------------------------------
   S10 — the closing CTA title

   The shared sheet puts the accent on the <em> (style.css:2165), because on
   text-ads, banner, native, popunder and push the whole second line is lime.
   This page's second line is mixed: "Into a" white, "Revenue Opportunity"
   lime. So the <em> keeps its job as the line break and gives the colour back
   to the title's white; the <span> inside it carries the accent.

   Sampled off the reference: the lit pixels of "Revenue Opportunity" average
   (231,253,66), which is --c-accent #E9FD45 through JPEG. Same lime as every
   other page — only the run it covers changed.
   -------------------------------------------------------------------------- */
.interstitial-ads-page .ta-cta__title em { color: var(--c-white); }
.interstitial-ads-page .ta-cta__title em span { color: var(--c-accent); }


/* --------------------------------------------------------------------------
   PHONES — the hero card

   Two things go wrong here without this block, both from ONE rule fighting
   another: `--in-card-w` is `clamp(280px, 31.146vw, 598px)`, and below about
   900px the vw term falls under the floor, so the card freezes at 280px.

   1. IT STOPS SCALING. At the 603 mobile artboard the card is 364 wide
      against a 541 container — 67.3% — and 280px is 52%. The creative is a
      landscape picture; a fifth of the width missing is the difference
      between reading the ad and seeing a stamp.

   2. IT STOPS BEING CENTRED. text-ads' phone rule is
      `.ta-hero__card-wrap .ta-adcard { width: 100% }`, so its card fills the
      wrap and centres with it. This page's `--in-card-w` rule is more
      specific and wins, leaving a 280px card pinned to the left edge of a
      339px wrap — 37px left of the screen's centre line, which is what the
      reference is measured against.

   So the wrap takes the artboard's share and the card fills it again, which
   puts the centring back where the shared sheet had it.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 364/541 of the container, against text-ads' 62.6% — this page's creative
     is landscape and the artboard gives it the extra width. */
  .interstitial-ads-page .ta-hero__card-wrap { width: 67.3%; }

  /* Beats the unscoped `--in-card-w` rule at the same specificity, so the
     shared phone behaviour (fill the wrap) applies here too. */
  .interstitial-ads-page .ta-hero__card-wrap .in-adcard { width: 100%; }

  /* THE NOTE FOLLOWS THE WIDER WRAP.

     `left` is a percentage OF THE WRAP, measured against text-ads' 62.6% one.
     Widening this page's to 67.3% carried the note right with it: the
     reference sets the text 188px in from the card's left edge (51.6% of a
     364 card), and 58.4% put it at 213.

     `bottom` is deliberately NOT restated — the shared 11vw already lands the
     note 65px above the card top against the reference's 59, and the note's
     clearance does not depend on the wrap's width. */
  .interstitial-ads-page .ta-hero__note { left: 51.1%; }

  /* S3's AD IS SIZED FOR A LANDSCAPE SCREEN, and this one is a phone.

     `left: 19.80% / top: 22.26% / width: 60.40%` above are 196/990, 146/656
     and 598/990 — measured on the desktop artboard's 990x656 browser. The
     phone reference puts the ad wider on its narrower screen: 366 across a
     544 screen, 67.3%, with the 16.35% that leaves split evenly either side.
     At 60.40% it read as a small card floating on a big phone instead of an
     interstitial taking the screen.

     `top` is deliberately left alone: the reference frame is cropped before
     the phone's bottom bezel, so its screen height - and therefore any
     vertical percentage measured against it - cannot be read off it. */
  .interstitial-ads-page .ta-device .ta-adcard.in-adcard {
    left: 16.35%;
    width: 67.30%;
  }
}