/* ==========================================================================
   CORE VALUES  —  21st.dev rolling list

   The reference: a full-width row per item, a window exactly one line tall
   holding two stacked copies of the title, and on hover the stack travels
   translateY(-50%) over 500ms on cubic-bezier(0.76, 0, 0.24, 1) so the second
   copy — italic, in the accent — takes the first one's place. A category
   label sits top right and fades out, and a 192x128 plate slides in from the
   right, grayscale to colour.

   Four things the client asked for, all of which change the geometry:

     one line   The titles were wrapping to two. That is not only a look: the
                stack travels exactly ONE line box, so a wrapped title lands
                its second copy half-way up the window. Every size step below
                is chosen so "Unwavering Integrity", the longest title, still
                sets on one line at that step's narrowest width.
     smaller    72px was too big. 42px at the top step now, because the
                title has a column rather than the whole row.
     two cols   Title on the left, paragraph on the right. The promise line
                that sat between them is gone at the client's request, so a
                row is those two things and nothing else.
     full page  The list runs the page width rather than a reading measure.
                The paragraph still keeps a 62-character measure; the column
                is wider than that at large sizes and prose that wide stops
                being readable.
   ========================================================================== */

.yp-val {
  padding: clamp(64px, 7vw, 104px) 0;
  overflow: hidden;   /* the plate slides in from outside the row */
}

/* Full width, with only the page gutter. The reference's own section is
   edge-to-edge; the earlier build put it inside the site's reading measure,
   which is what made the titles wrap in the first place. */
.yp-val-wrap {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  /* The page gutter, not a fluid one: 3vw put this section 13px right of its
     neighbours at 1440. */
  padding: 0 30px;
}

@media (max-width: 540px) {
  .yp-val-wrap { padding: 0 16px; }
}

.yp-val-shead { text-align: left; }

.yp-val-list {
  margin: clamp(34px, 4.5vw, 60px) 0 0;
  padding: 0 !important;          /* Divi indents every ol */
  list-style: none !important;    /* and numbers it */
  counter-reset: none;
}

/* ---- the row ------------------------------------------------------------- */

.yp-val-row {
  /* The title column is narrower than the whole row was, so every step is
     smaller than the centred version. Sized so "Unwavering Integrity", the
     longest title, still sets on one line inside its own column. */
  --yp-val-fs: 42px;
  --yp-val-line: 52px;
  /* The width budget for the longest title, as a share of the title column.
     English's longest ("UNWAVERING INTEGRITY") sets 13.26em, so it fits any
     column at up to 1/13.26 = 7.54cqi; 7.3 leaves margin. This is a token
     rather than a literal because the budget is a property of the COPY, and
     the copy changes per language. */
  --yp-val-cap: 7.3cqi;
  position: relative;
  display: grid;
  /* Title left, paragraph right. minmax(0, ...) on both, or a long unbroken
     word in either column would refuse to shrink and push the grid wider than
     the row. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  column-gap: clamp(28px, 4vw, 72px);
  margin: 0;
  padding: clamp(28px, 3.2vw, 44px) 0;
  border-bottom: 1px solid rgb(var(--yp-ink-rgb) / 0.13);
  text-align: left;
  cursor: default;
}

.yp-val-row:first-child { border-top: 1px solid rgb(var(--yp-ink-rgb) / 0.13); }

/* ---- the rolling window -------------------------------------------------- */

.yp-val-window {
  position: relative;
  height: var(--yp-val-line);
  overflow: hidden;
  /* Makes the column itself the unit the type can be measured against. */
  container-type: inline-size;
}

.yp-val-stack {
  transition: transform 500ms cubic-bezier(0.76, 0, 0.24, 1);
}

.yp-val-line {
  height: var(--yp-val-line);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* typography.css forces a weight on every heading and Divi pads them and
   zeroes their letter-spacing with an inline !important rule, so all three
   have to be taken back here. white-space:nowrap is the guarantee the client
   asked for: the title cannot wrap even if a step is mis-sized. */
.yp-val-title {
  margin: 0;
  padding: 0 !important;
  font-family: var(--yp-serif);
  /* The step sizes are the DESIGN ceiling; the cqi value is the guarantee.
     "UNWAVERING INTEGRITY", the longest title, sets 13.26em wide in this face
     at this tracking, so it fits a column of width W at any size up to
     W / 13.26, i.e. 7.54cqi. 7.3 leaves a little margin.

     Hand-picked px steps alone were not enough: at 42px in a 498px column two
     of the five titles ran 30-60px past their column into the paragraph's
     gutter. Deriving the cap from the column means that cannot happen at any
     width, or if the copy is ever edited. */
  font-size: min(var(--yp-val-fs), var(--yp-val-cap));
  line-height: 1;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--yp-ink);
}

/* The second copy: italic and in the accent, which is what the roll reveals.
   Both copies must be identical in every other respect or the swap reads as
   a jump rather than a change of voice. */
.yp-val-title-alt {
  font-style: italic;
  color: rgb(var(--yp-ink-rgb) / 0.55);
}

/* ---- the paragraph the brief came with ---------------------------------- */

/* The copy the client supplied with each title, which an earlier build left
   out. It keeps a measure even though its column is wider, because prose past
   roughly 62 characters a line stops being comfortable to read. */
.yp-val-body {
  /* Top-aligned with the title's cap line rather than its line box: the line
     box is 10px taller than the type, so margin-top 0 left the paragraph
     sitting visibly high against the title. */
  max-width: 62ch;
  margin: 0;
  /* One declaration, not a longhand followed by the shorthand: `padding: 0`
     after `padding-top: 6px` simply erased it. */
  padding: 6px 0 0 !important;
  font-size: clamp(14.5px, 0.35vw + 13px, 16.5px);
  line-height: 1.7;
  letter-spacing: 0 !important;
  color: rgb(var(--yp-ink-rgb) / 0.78);
  text-wrap: pretty;
}

/* ---- the plate ---------------------------------------------------------- */

.yp-val-reveal {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  width: 192px;
  height: 128px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgb(var(--yp-ink-rgb) / 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(16px) scale(0.95) rotate(3deg);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.yp-val-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter 500ms ease-out;
}

.yp-val-tint {
  position: absolute;
  inset: 0;
  background: rgb(var(--yp-ink-rgb) / 0.12);
  mix-blend-mode: overlay;
}

/* ---- hover -------------------------------------------------------------- */

/* Gated on a real pointer. On a touch screen there is no hover at all, so the
   roll never fires and the plate never appears; both are enhancements, and
   the row reads correctly without either. */
@media (hover: hover) {
  .yp-val-row { cursor: pointer; }
  .yp-val-row:hover .yp-val-stack,
  .yp-val-row:focus-within .yp-val-stack { transform: translateY(-50%); }

  .yp-val-row:hover .yp-val-reveal,
  .yp-val-row:focus-within .yp-val-reveal {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1) rotate(0);
  }

  .yp-val-row:hover .yp-val-img,
  .yp-val-row:focus-within .yp-val-img { filter: grayscale(0); }
}

/* The paragraph now occupies the right of the row, which is where the plate
   used to slide in from. Above 1320px the row reserves a gutter for it;
   below that there is no room and it is dropped rather than landing on the
   copy. */
@media (min-width: 1320px) {
  /* Reserve the plate's own column so it never overlaps the paragraph. */
  .yp-val-row { padding-right: 232px; }
}

@media (max-width: 1319px) {
  .yp-val-reveal { display: none; }
}

/* ---- size steps ---------------------------------------------------------
   Each step is set so "UNWAVERING INTEGRITY" still fits one line inside the
   title COLUMN at that step's narrowest viewport, which is a much tighter
   budget than the full-width centred version had. Measured, not guessed. */

@media (max-width: 1319px) {
  .yp-val-row { --yp-val-fs: 38px; --yp-val-line: 47px; }
}

@media (max-width: 1120px) {
  .yp-val-row { --yp-val-fs: 32px; --yp-val-line: 40px; }
}

@media (max-width: 960px) {
  .yp-val-row { --yp-val-fs: 27px; --yp-val-line: 35px; }
}

/* Below this the two columns stop being two: a 27px title beside a paragraph
   in half a phone screen leaves neither enough room. Stacked, the title keeps
   its size and the paragraph gets the full width. */
@media (max-width: 820px) {
  .yp-val-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    --yp-val-fs: 30px;
    --yp-val-line: 38px;
  }
  .yp-val-body { padding-top: 0 !important; max-width: 68ch; }
}

@media (max-width: 560px) {
  .yp-val-row { --yp-val-fs: 25px; --yp-val-line: 32px; }
}

@media (max-width: 440px) {
  .yp-val-row { --yp-val-fs: 20px; --yp-val-line: 26px; }
}

@media (max-width: 360px) {
  .yp-val-row { --yp-val-fs: 17.5px; --yp-val-line: 23px; }
}

/* ---- per-language width budget -------------------------------------------

   Spanish says the same things in more characters, and these titles are
   nowrap by client requirement, so the budget has to come down or the longest
   title runs into the paragraph's gutter. Measured, not guessed: the longest
   Spanish title sets 14.1em at the current tracking, which fits a column at
   up to 7.09cqi, and 6.9 leaves the same margin the English value has.

   Keyed on :lang(), which works because the Spanish build sets <html
   lang="es">. It costs the short Spanish titles a couple of pixels; a list
   whose rows share one size is the design, so they move together. */
:root:lang(es) .yp-val-row { --yp-val-cap: 6.9cqi; }


/* ---- reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .yp-val-stack,
  .yp-val-reveal,
  .yp-val-img { transition: none; }
}

/* Container query units are Chrome 105 / Safari 16 / Firefox 110. Older
   engines fall back to the px steps, which are correct for the common widths
   and only risk a long title touching the gutter. */
@supports not (font-size: 1cqi) {
  .yp-val-title { font-size: var(--yp-val-fs); }
  /* No container query units means no guarantee, so the px steps carry it.
     Spanish starts a step lower, since its longest title is the one that
     overflowed at 42px in the first place. */
  :root:lang(es) .yp-val-row { --yp-val-fs: 36px; }
}