/* ══════════════════════════════════════════════════════════════════════════
   MINEERS 2.0 — TEETH WHITENING (whitening.html only)
   The page's four own sections, placed by _tx-build/add_media.py ("Teeth
   whitening") and kept in the open by ux_pass.py:

     · .wh-shade   the shade guide: sixteen tabs, lightest to darkest
     · .wh-ben     benefits of professional whitening
     · .wh-exp     what to expect, from the chair to home
     · .wh-films   the clinic's YouTube films: a stage and a short list

   Loaded after treatment.css and media.css. Each section is an .mx block, so
   the palette, the label / heading / lead and the reveal (data-mx="rise")
   are media.css's own; only what is new is here, scoped to .tx .wh.
   Motion: whitening.js. Without it the guide is a picture with its reading
   set, and every film opens on YouTube.
   ══════════════════════════════════════════════════════════════════════════ */

.tx .wh { padding: clamp(56px, 5.8vw, 90px) 0; }
.tx .wh .mx__h2 { font-size: clamp(42px, 5vw, 84px); }
.tx .wh .mx__lead { max-width: 44ch; }
/* full-width sections: the heading on the left, its lead on the right, level with the heading */
.tx .wh-shade .mx__head, .tx .wh-exp .mx__head, .tx .wh-films .mx__head { grid-template-columns: minmax(0, 1fr) minmax(0, 31em); align-items: end; }
.tx .wh-shade .mx__lead, .tx .wh-exp .mx__lead, .tx .wh-films .mx__lead { grid-column: 2; grid-row: 2; max-width: none; padding-bottom: .5em; }
.tx .wh h3 { margin: 0; text-transform: none; }
.tx .wh a { color: inherit; }

/* ── The shade guide ─────────────────────────────────────────────────────── */
.tx .wh-defs { position: absolute; }
.tx .wh-shade__body { padding: 0 var(--mx-g); }

/* the row is one control: a pointer or a finger runs along it, arrow keys step through it */
.tx .wh-guide__row {
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: clamp(3px, 1.1vw, 18px);
  padding-top: 30px; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tx .wh-guide__row:focus-visible { outline: 1px solid var(--mx-champ-lt); outline-offset: 12px; }
.tx .wh-tab { position: relative; display: block; text-align: center; transition: transform .55s var(--mx-ease); }
.tx .wh-tab svg { display: block; width: 100%; height: auto; aspect-ratio: 40 / 88; overflow: visible; }
.tx .wh-tab b {
  display: block; margin-top: 14px; font: 500 10.5px/1 var(--mx-mono); letter-spacing: .08em;
  color: var(--mx-od-soft); transition: color .3s;
}
.tx .wh-tab.is-on { transform: translate3d(0, -24px, 0); }
.tx .wh-tab.is-on b { color: var(--mx-champ-lt); }
/* the tabs arrive darkest first, so the row brightens as it lands */
.mx-js .tx .wh-guide__row[data-mx="rise"]:not(.is-in) .wh-tab { opacity: 0; }
.mx-js .tx .wh-guide__row.is-in .wh-tab { animation: wh-tab-in .8s var(--mx-ease) backwards; animation-delay: calc((15 - var(--i)) * 36ms); }
@keyframes wh-tab-in { from { opacity: 0; transform: translate3d(0, 30px, 0); } }

.tx .wh-guide__ends {
  display: flex; align-items: center; gap: 18px; margin-top: 24px;
  font: 500 10px/1 var(--mx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mx-od-soft);
}
.tx .wh-guide__ends i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(241, 233, 221, .5), rgba(241, 233, 221, .1)); }

/* the reading: the name of the lifted tab, then what the row tells you */
.tx .wh-read {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 40px);
  align-items: center; margin-top: clamp(34px, 3.6vw, 54px);
}
.tx .wh-read__now { grid-column: 1 / 6; display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); min-width: 0; }
.tx .wh-read__name {
  display: flex; align-items: center; gap: 16px; min-width: 2.35em;
  font: 500 clamp(72px, 6.6vw, 110px)/.82 var(--mx-serif); letter-spacing: -.04em; color: var(--mx-od);
  font-variant-numeric: lining-nums;
}
.tx .wh-read__name i {
  flex: none; width: clamp(12px, 1.1vw, 17px); height: clamp(12px, 1.1vw, 17px); border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 1px rgba(241, 233, 221, .25); transition: background-color .4s;
}
.tx .wh-read__fam {
  display: grid; gap: 8px; white-space: nowrap;
  font: 500 10.5px/1.4 var(--mx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mx-od);
}
.tx .wh-read__fam span + span { color: var(--mx-od-soft); }
.tx .wh-read__note {
  grid-column: 6 / 10; padding-left: clamp(20px, 2.4vw, 40px); border-left: 1px solid var(--mx-od-line);
  font: 400 clamp(18px, 1.45vw, 23px)/1.42 var(--mx-serif); color: var(--mx-od);
}
.tx .wh-read__fine { grid-column: 10 / 13; font-size: 12.5px; line-height: 1.65; color: var(--mx-od-soft); }
.tx .wh-read__fine a { color: var(--mx-od); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tx .wh-read__fine a:hover { color: var(--mx-champ-lt); }

/* ── Benefits ────────────────────────────────────────────────────────────── */
.tx .wh-ben__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 40px);
  align-items: center; padding: 0 var(--mx-g);
}
.tx .wh-ben__photo { grid-column: 1 / 5; }
.tx .wh-ben__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.tx .wh-ben__text { grid-column: 6 / 13; min-width: 0; }
.tx .wh-ben .mx__head { display: block; padding: 0; margin-bottom: clamp(30px, 3.2vw, 48px); }
.tx .wh-ben .mx__h2 { margin-top: 24px; font-size: clamp(38px, 4.3vw, 70px); line-height: .96; }
.tx .wh-ben .mx__lead { margin-top: 22px; max-width: 34em; }
.tx .wh-ben__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(26px, 3.4vw, 60px); }
.tx .wh-ben__list li { padding: 22px 0 26px; border-top: 1px solid var(--mx-line); }
.tx .wh-ben__list h3 { font: 500 clamp(24px, 2vw, 31px)/1.1 var(--mx-serif); letter-spacing: -.015em; color: var(--mx-ink); }
.tx .wh-ben__list p { margin-top: 9px; max-width: 30em; font-size: 15px; line-height: 1.62; color: var(--mx-soft); }

/* ── What to expect ──────────────────────────────────────────────────────── */
.tx .wh-exp__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(22px, 2.6vw, 44px);
  margin: 0 var(--mx-g); border-top: 1px solid var(--mx-line);
}
.tx .wh-exp__list li { position: relative; padding-top: 30px; }
.tx .wh-exp__list li::before {
  content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--mx-champ);
}
.tx .wh-exp__when { font: 500 10.5px/1 var(--mx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mx-champ); }
.tx .wh-exp__list h3 { margin-top: 18px; font: 500 clamp(26px, 2.3vw, 37px)/1.04 var(--mx-serif); letter-spacing: -.02em; color: var(--mx-ink); }
.tx .wh-exp__list li > p:last-child { margin-top: 13px; max-width: 30em; font-size: 15px; line-height: 1.65; color: var(--mx-soft); }

/* ── Films ───────────────────────────────────────────────────────────────── */
.tx .wh-films__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(22px, 2.8vw, 48px);
  align-items: start; padding: 0 var(--mx-g);
}
.tx .wh-stage { grid-column: 1 / 8; min-width: 0; }
.tx .wh-films__side { grid-column: 8 / 13; min-width: 0; }
.tx .wh-stage__frame { position: relative; aspect-ratio: 16 / 9; background: #0e0b09; overflow: hidden; }
/* the film window's crop marks, as on every film frame of the treatment pages (.txwin) */
.tx .wh-stage__frame::before {
  content: ""; position: absolute; inset: 10px; z-index: 3; pointer-events: none;
  --c: rgba(241, 233, 221, .7); --l: 14px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l) no-repeat;
}
.tx .wh-stage.is-playing .wh-stage__frame::before { display: none; }
.tx .wh-stage.is-playing .wh-stage__play { display: none; }
.tx .wh-stage__play { position: absolute; inset: 0; display: block; color: #fff; }
.tx .wh-stage__play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform 1.4s var(--mx-ease), opacity .4s; }
.tx .wh-stage__play:hover img, .tx .wh-stage__play:focus-visible img { transform: scale(1.025); opacity: 1; }
.tx .wh-stage__play:focus-visible { outline: 1px solid var(--mx-champ-lt); outline-offset: 5px; }
.tx .wh-stage__btn {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(64px, 6.4vw, 92px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); background: rgba(14, 11, 9, .38);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .3s, transform .6s var(--mx-ease);
}
.tx .wh-stage__btn::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff;
}
.tx .wh-stage__play:hover .wh-stage__btn { background: rgba(14, 11, 9, .62); transform: translate(-50%, -50%) scale(1.06); }
.tx .wh-stage__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin-top: 20px; }
.tx .wh-stage__kind { font: 500 10.5px/1 var(--mx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mx-od-soft); }
.tx .wh-stage__title { font: 500 clamp(24px, 2.2vw, 34px)/1.05 var(--mx-serif); letter-spacing: -.02em; color: var(--mx-od); }
.tx .wh-stage__frame iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; display: block; background: #000; }

.tx .wh-films__list { border-top: 1px solid var(--mx-od-line); }
.tx .wh-films__list li { border-bottom: 1px solid var(--mx-od-line); }
.tx .wh-film { position: relative; display: grid; grid-template-columns: clamp(96px, 8vw, 124px) minmax(0, 1fr); gap: 18px; padding: 20px 0; }
.tx .wh-film::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--mx-champ-lt);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--mx-ease);
}
.tx .wh-film.is-on::before { transform: none; }
.tx .wh-film:focus-visible { outline: 1px solid var(--mx-champ-lt); outline-offset: 4px; }
.tx .wh-film__thumb { position: relative; align-self: start; aspect-ratio: 16 / 9; overflow: hidden; background: #0e0b09; }
.tx .wh-film__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .35s; }
.tx .wh-film:hover .wh-film__thumb img, .tx .wh-film.is-on .wh-film__thumb img { opacity: 1; }
.tx .wh-film__body { display: block; min-width: 0; }
.tx .wh-film__kind {
  display: flex; justify-content: space-between; gap: 12px;
  font: 500 10px/1 var(--mx-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mx-od-soft);
}
.tx .wh-film__kind span { letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.tx .wh-film__title { margin-top: 10px; font: 500 clamp(21px, 1.7vw, 26px)/1.12 var(--mx-serif); letter-spacing: -.012em; color: var(--mx-od); transition: color .35s; }
.tx .wh-film:hover .wh-film__title, .tx .wh-film.is-on .wh-film__title { color: var(--mx-champ-lt); }
.tx .wh-film__desc { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.58; color: var(--mx-od-soft); }
.tx .wh-films__more { margin-top: 26px; }

/* ── Narrower screens ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .tx .wh-shade .mx__head, .tx .wh-exp .mx__head, .tx .wh-films .mx__head { grid-template-columns: minmax(0, 1fr); }
  .tx .wh-shade .mx__lead, .tx .wh-exp .mx__lead, .tx .wh-films .mx__lead { grid-column: 1; grid-row: auto; padding-bottom: 0; }
  .tx .wh-read { row-gap: 28px; align-items: start; }
  .tx .wh-read__now { grid-column: 1 / -1; }
  .tx .wh-read__note { grid-column: 1 / 8; padding-left: 0; border-left: 0; }
  .tx .wh-read__fine { grid-column: 8 / 13; }
  .tx .wh-ben__in { align-items: start; }
  .tx .wh-ben__text { grid-column: 5 / 13; }
  .tx .wh-ben__list { grid-template-columns: 1fr; }
  .tx .wh-exp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; border-top: 0; }
  .tx .wh-exp__list li { border-top: 1px solid var(--mx-line); }
  .tx .wh-stage, .tx .wh-films__side { grid-column: 1 / -1; }
  .tx .wh-films__side { margin-top: 34px; }
}
@media (max-width: 700px) {
  .tx .wh { padding: 58px 0; }
  .tx .wh .mx__label span { display: none; }      /* the label keeps its first words; the heading says the rest */
  .tx .wh-read__now { gap: 16px; }
  .tx .wh-read__fam { white-space: normal; letter-spacing: .16em; }
  .tx .wh-guide__row { gap: 3px; padding-top: 20px; }
  .tx .wh-tab b { display: none; }                 /* too narrow to read: the reading under the row names the tab */
  .tx .wh-tab.is-on { transform: translate3d(0, -12px, 0); }
  .tx .wh-guide__ends { margin-top: 16px; }
  .tx .wh-read__name { font-size: 72px; gap: 12px; }
  .tx .wh-read__note, .tx .wh-read__fine { grid-column: 1 / -1; }
  .tx .wh-read { row-gap: 20px; }
  .tx .wh-ben__in { display: flex; flex-direction: column; }
  .tx .wh-ben__text { order: 1; }
  .tx .wh-ben__photo { order: 2; margin-top: 36px; }
  .tx .wh-ben__photo img { aspect-ratio: 3 / 2; object-position: 50% 28%; }
  /* one column: the line runs down the side, a dot at each moment */
  .tx .wh-exp__list { grid-template-columns: 1fr; row-gap: 0; border-left: 1px solid var(--mx-line); }
  .tx .wh-exp__list li { border-top: 0; padding: 0 0 34px 24px; }
  .tx .wh-exp__list li:last-child { padding-bottom: 0; }
  .tx .wh-exp__list li::before { left: -4px; top: 1px; }
  .tx .wh-film { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tx .wh-tab, .tx .wh-stage__play img, .tx .wh-stage__btn, .tx .wh-film::before, .tx .wh-film__thumb img { transition: none; }
  .mx-js .tx .wh-guide__row .wh-tab { animation: none !important; opacity: 1 !important; }
}