/* ==========================================================================
   Yari Stats

   A direct port of the Chad Carroll Group's #about_cover composition, measured
   off their live page at 1710x963 and re-expressed as ratios of the group so
   it holds at any width.

     THEIRS (px at 1710)          OURS (ratio)
     group      1365 x 836        100% of the wrap, 0.612 aspect
     photo      1542 x 836        113% wide, offset -13%
     name       127px, bottom -30px   7.4vw, bottom -0.24em
     panel      770 x 440         56.4% x 32.2% of the group, top right
     card       385 x 220 (50%)   50%, flush, no gutter at rest

   Type and colour are Yaritza's; nothing else is.

   The resting state in THIS file is the finished one. stats-scroll.css winds
   it back and drives the timeline. That ordering is deliberate: with no JS,
   a narrow screen, or reduced motion, the section is simply complete.
   ========================================================================== */

.yp-stats {
  position: relative;
  background: var(--yp-shell);
  /* Their cover carries 400px of tail that the last timeline step collapses.
     Ours is a ratio so it does not swamp a short viewport. */
  padding: clamp(56px, 6vw, 90px) 0 clamp(120px, 20vh, 400px);
  /* NO overflow:hidden here. An overflow other than visible on ANY ancestor
     silently disables position:sticky for its descendants, and the pin is the
     whole section. This cost an afternoon: the stage looked correct at rest
     and simply scrolled away instead of locking. Clipping, where it is needed,
     belongs on .yp-stats-stage, which is not a sticky ancestor. */
}

.yp-stats-stage { position: relative; }

/* Wider than the text column but not edge to edge: her portrait cannot carry
   a full bleed the way his environmental shot does. */
.yp-stats-bleed {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ---- the group ----------------------------------------------------------- */

.yp-stats-cover {
  position: relative;
  width: 100%;
  /* The photograph's width, and the name's. Both read from this, so the name
     is flush with the picture by construction rather than by coincidence, and
     one value moves the pair together. 70% so the group sits as a block on the
     left rather than running the full page width. */
  --yp-stats-photo-w: 70%;
  /* Theirs is 1365/836 because his photograph is a wide environmental shot.
     Hers is a tall studio portrait, and forcing it into that frame showed
     mostly empty backdrop. 3/2 keeps her in the frame while still reading as
     a spread rather than a column. */
  /* Sized off the viewport, not off the width. The stage is a pinned 100vh
     box, so a cover derived from the page width overflows it on a wide screen
     and the middle of the composition ends up above the fold. */
  height: min(128vh, 1270px);   /* stepped up six times by 10 percent from the original 74vh/720px */
}

.yp-stats-animate {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 50% 100%;
}

/* Wider than its frame and pulled left, so the crop is off-centre the way
   theirs is rather than politely centred. */
.yp-stats-img {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--yp-stats-photo-w);
  height: 100%;
}

/* The source is a 2:3 portrait and the frame is landscape, so object-fit:cover
   scales to fill the WIDTH and only crops vertically. That makes the horizontal
   half of object-position inert: she stays wherever she happens to sit in the
   original, which was left of centre with a lot of empty sweep beside her.

   Oversizing the image past its frame gives the crop something to take off the
   sides, so she can actually be centred in what you see. */
.yp-stats-img img {
  /* Fills its frame exactly. This carried width:150% and margin-left:-28% to
     centre her horizontally, and that is precisely what broke the alignment:
     the picture's visible right edge sat 422px inside its own container, so
     the name looked like it overhung when it was in fact flush with the box.
     The name reads its width from this frame, so the two only agree if the
     picture actually fills it. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* She sits low and left in the frame; 30% keeps her face in the upper band
     where the panel is not. */
  object-position: 50% 42%;
  display: block;
}

/* ---- the name ------------------------------------------------------------
   Absolute, oversized, and deliberately hanging below the picture. This is
   the single loudest element in the composition on their page and the reason
   the block reads as a portrait rather than as a stats box. */

.yp-stats-name {
  position: absolute;
  z-index: 2;
  left: 0;
  right: auto;
  width: var(--yp-stats-photo-w);
  bottom: 0;
  margin: 0;
  line-height: 0;
}

.yp-stats-name svg { display: block; width: 100%; height: auto; }

.yp-stats-name text {
  font-family: var(--yp-serif);
  font-weight: var(--yp-w-display, 560);
  font-size: 116px;
  letter-spacing: 0;
  text-transform: uppercase;
  fill: var(--yp-ink);
}

/* ---- the records panel ---------------------------------------------------- */

.yp-stats-records {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 52%;
  height: 68%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  background: var(--yp-ink);
}

/* Flush 2x2 at rest: 50% wide, no gutter. Step 7 of the timeline opens these
   to 48% with a 30px row gap, which is the whole point of the move. */
.yp-stats-card {
  width: 50%;
  height: 50%;
  margin-bottom: 0;
  padding: clamp(16px, 1.8vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgb(var(--yp-ink-rgb) / 0.8);
}

.yp-stats-figure {
  margin: 0 0 0.3em;
  color: var(--yp-white);
  font-family: var(--yp-serif);
  font-weight: var(--yp-w-section, 540);
  font-size: clamp(1.25rem, 2.6vw, 2.75rem);
  /* Once step 6 dissolves the panel these sit directly on the photograph, so
     they carry their own shadow rather than depending on the slab behind. */
  text-shadow: 0 1px 18px rgb(var(--yp-ink-rgb) / 0.55);
  line-height: 1.05;
  letter-spacing: 0.01em;
  /* The character spans rise out of this box, so it has to clip them. */
  overflow: hidden;
}

.yp-stats-chars { display: none; }
.yp-stats-chars span { display: inline-block; }

.yp-stats-note {
  margin: 0;
  color: rgb(var(--yp-white-rgb) / 0.86);
  font-family: var(--yp-serif);
  font-size: clamp(0.75rem, 0.85vw, 1.0625rem);
  text-shadow: 0 1px 14px rgb(var(--yp-ink-rgb) / 0.55);
  line-height: 1.35;
  letter-spacing: var(--yp-track-sub, 0.09em);
  text-transform: uppercase;
}

/* The mark that sits inside the panel until the timeline scales it away.
   Injected by stats-scroll.js, because with no scrub there is nothing to
   remove it and it would sit on top of the stats permanently. */
.yp-stats-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---- responsive ----------------------------------------------------------
   Below 1024 there is no pinned timeline (stats-scroll.js does not engage),
   so the panel comes out of the corner and sits under the picture where it
   can be read at full width. */

@media (max-width: 1023px) {
  .yp-stats-cover { aspect-ratio: auto; }
  .yp-stats-animate { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .yp-stats-name {
    position: relative;
    bottom: auto;
    margin: 18px 0 0;
    font-size: clamp(2rem, 9vw, 4rem);
    white-space: normal;
  }
  .yp-stats-records {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 26px;
  }
  .yp-stats-card { height: auto; min-height: 150px; }
}

@media (max-width: 560px) {
  .yp-stats-card { width: 100%; }
}