/* ==========================================================================
   native-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
   NATIVE format shows that the text design has no equivalent for:

     the creative itself, and the publisher page it sits in

   A text ad is a headline, a URL and a description, so text-ads draws it in
   markup (`.ta-adcard`) and parks it in the top-right of the mock page. A
   native ad is a picture with a caption, and it lives in the publisher's OWN
   card grid — which is the entire point of the format, and the reason the S3
   tablet here is a different page rather than the same page with a different
   card in it.

   Everything is scoped under `.native-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.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 990x656 screen and drops
   straight into the coordinate system the shared sheet already uses.
   ========================================================================== */

.native-ads-page {
  /* THE CREATIVE, AT THE ONE SIZE THE DESIGN DRAWS IT. 267px wide on the
     1920 artboard, which is where 13.906vw comes from. The floor keeps it
     legible on a phone; the ceiling stops it growing past the artboard's
     size on a wide monitor, exactly as `.ta-adcard`'s own clamp does. */
  --na-creative-w: clamp(190px, 13.906vw, 267px);

  /* The artwork's own corner, so a box-shadow on the card follows the picture
     instead of drawing a rectangle behind it. 18px on a 267x299 file — TWO
     radii, because the box is not square and one percentage would give an
     ellipse: 18/267 across and 18/299 down. */
  --na-creative-r: 6.742% / 6.020%;

  /* The publisher page's own cards. #282828 is the caption strip under each
     one, which is where the placeholder mirrors the real creative's white
     caption bar — measured off the frame at rgb(40,40,40). */
  --na-card-fill: var(--c-surface);
  --na-card-caption: #282828;
}

/* --------------------------------------------------------------------------
   The creative

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

   It KEEPS the `.ta-adcard` class. That is not decoration: scroll.js finds
   the flight's target with `.ta-device .ta-adcard`, and the shared sheet
   hides that copy while the flight is in the air. Reusing the class is what
   makes the flight work here with no JavaScript change at all.
   -------------------------------------------------------------------------- */
.native-ads-page .ta-adcard.na-adcard {
  /* `.ta-adcard` is a padded white flex column; none of that applies to a
     picture. 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: transparent;
  border-radius: var(--na-creative-r);
  overflow: hidden;
}

.native-ads-page .na-adcard img {
  display: block;
  width: 100%;
  height: auto;
}

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

/* --------------------------------------------------------------------------
   S3 — the mock publisher page

   Same 990x656 screen as text-ads, two changes to what is on it.

   1. THE COPY 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 down in the card grid — so the article runs the whole
      content column, 90.51% (896/990) against the same 4.65% left inset.

   2. THE THIRD PARAGRAPH GROUP IS A CARD GRID. text-ads has twelve bars in
      three groups; the frame here keeps the first eight and gives the space
      below them to the publisher's card row, with the ad in it.
   -------------------------------------------------------------------------- */
.native-ads-page .ta-device__bar { width: 90.51%; }          /* 896 / 990 */
.native-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 card row -------------------------------------------------------- */

/* THE ROW IS WIDER THAN THE PAGE IT SITS ON, AND THAT IS THE DESIGN.

   Five cards at 226px with 14px gutters come to 1174px inside an 896px
   column, so the first is cut by the column's left edge and the last by its
   right — the row reads as a strip continuing past both sides, which is what
   a real publisher grid looks like. `overflow: hidden` here is what does the
   cutting; the children are positioned in the row's own coordinates and two
   of them deliberately fall outside it.

   Measured: visible slivers of 87px on the left and 75px on the right, and
   87 + 14 + 226 + 14 + 226 + 14 + 226 + 14 + 75 = 896 exactly. */
.native-ads-page .na-cards {
  position: absolute;
  left: 4.65%;                /* x 46 / 990  — the article's own inset */
  top: 52.44%;                /* y 344 / 656 — where text-ads' third group was */
  width: 90.51%;              /* 896 / 990 */
  height: 38.57%;             /* 253 / 656 */
  overflow: hidden;
}

/* Every slot, real or placeholder, is the same box. Percentages are of the
   ROW (896 wide), not the screen: 226/896 across, and the five lefts stepping
   by 226 + 14 from a start 139px outside the left edge. */
.native-ads-page .na-cards > * {
  position: absolute;
  top: 0;
  width: 25.223%;             /* 226 / 896 */
  height: 100%;
}
.native-ads-page .na-cards > *:nth-child(1) { left: -15.513%; }  /* -139 / 896 */
.native-ads-page .na-cards > *:nth-child(2) { left:  11.272%; }  /*  101 / 896 */
.native-ads-page .na-cards > *:nth-child(3) { left:  38.058%; }  /*  341 / 896 */
.native-ads-page .na-cards > *:nth-child(4) { left:  64.844%; }  /*  581 / 896 */
.native-ads-page .na-cards > *:nth-child(5) { left:  91.629%; }  /*  821 / 896 */

/* The four placeholders. Each is the real creative's shape with the picture
   taken out: a block, and a lighter strip across the bottom standing in for
   the caption. Drawn with a gradient rather than a child element so a slot
   stays one empty tag in the markup — there is nothing in it to describe. */
.native-ads-page .na-card {
  background-image: linear-gradient(
    to bottom,
    var(--na-card-fill) 0,
    var(--na-card-fill) 89.33%,       /* 226 / 253 — where the caption starts */
    var(--na-card-caption) 89.33%,
    var(--na-card-caption) 100%
  );
  border-radius: clamp(8px, 1.04vw, 20px);   /* 20px on the 1920 artboard */
}

/* The ad slot, and this rule sets NO geometry on purpose.

   The shared sheet parks text-ads' card in the top-right of the screen with
   `.ta-device .ta-adcard { left: 68.48%; top: 12.04%; width: 28.05% }`. That
   is already outscored by the `.na-cards > *` rules above — two classes
   against three — so the row places this card like any other slot and there
   is nothing here to undo.

   Writing `left: auto` here instead was the bug: at four classes it beat the
   `:nth-child(3)` rule that carries the slot's position, and the ad landed on
   the row's left edge underneath the first placeholder. Only what the row
   cannot know belongs in this rule. */
.native-ads-page .ta-device .ta-adcard.na-adcard {
  padding: 0;
  border-radius: var(--na-creative-r);
}
.native-ads-page .ta-device .na-adcard img {
  width: 100%;
  height: 100%;
  /* The slot's 226x253 is a hair taller in proportion than the file's
     267x299, so the picture fills it and loses a sliver rather than letting
     the caption bar float off the card's bottom edge. */
  object-fit: cover;
}

/* Phones: the row is most of a small screen, so a 226px card scaled down is
   a thumbnail either way. Nothing to change — the whole device scales as one
   block and the percentages hold. This note exists so the absence of a
   breakpoint here reads as a decision rather than an omission. */