/* #difference (pass 7, owner: SECTIONS) · the heading + two film panels (src/partials/s-difference.html).
   Replaces the letter bands of pass 2. Their rules in css/c.css (.diff*, .dl, .vw, .bands, .band*) are dead: new class names (.df*)
   here, so none of them applies. Listed in docs/pass7/sections.md for the core builder.
   The type scale shared by the pass-7 sections: a section heading 34-40 px on phones, 56-72 px on desktops (brief §2); a title on a
   picture a step smaller. Motion: the page's one reveal (data-in, css/c.css + js/motion.js); the picture settles from 1.04 inside its
   panel as the panel arrives (600 ms, compositor). Nothing is scroll-linked. Reduced motion: still and complete. */

.df { position: relative; z-index: 2; padding: 11svh var(--gut) 10svh; }

/* ---------- the heading ---------- */
.df__h {
  font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none;
  font-size: clamp(34px, 3px + 8.6vw, 40px); line-height: 1; color: var(--ink); margin: 0 0 6svh; max-width: 18ch;
}
.df__l { display: block; text-wrap: balance; }

/* ---------- the panels ---------- */
.df__panels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8svh; }
.df__p { min-width: 0; }
.df__media {
  position: relative; overflow: hidden; overflow: clip; aspect-ratio: 4 / 5; max-height: 80vh; background: var(--tone, #3d3732);
  isolation: isolate; color: var(--pearl);
}
.df__media picture, .df__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.df__img { object-fit: cover; object-position: 50% 60%; }
/* the scrim under the title: the panel's lower part goes to film-black so the pearl title holds on any picture */
.df__media::after {
  content: ""; position: absolute; inset: 40% 0 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 10, 9, .82), rgba(11, 10, 9, .5) 45%, rgba(11, 10, 9, 0));
}
.df__tag {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  font: 500 var(--fs-xs)/1 var(--text); letter-spacing: .04em; color: var(--pearl);
  background: rgba(12, 11, 10, .72); padding: 6px 9px 5px; pointer-events: none;
}
.df__t {
  position: absolute; z-index: 2; inset: auto 0 0 0; margin: 0; padding: 0 20px 20px;
  font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none;
  font-size: clamp(30px, 2px + 7.6vw, 36px); line-height: 1; color: var(--pearl);
}
.df__txt { margin: 0; padding-top: 16px; max-width: 34ch; font: 400 var(--fs-lead)/1.5 var(--text); color: var(--ink); }

/* the picture settles inside its frame as the panel arrives (the panel itself rises: data-in) */
html.js .df__media .df__img { transform: scale(1.04); transition: transform 600ms var(--ease-out); }
html.js .df__media.is-in .df__img { transform: none; }

@media (min-width: 900px) {
  .df { padding: 16svh var(--gut) 14svh; }
  .df__h { font-size: clamp(56px, 24px + 2.5vw, 72px); margin-bottom: 9svh; max-width: 20ch; }
  .df__panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 3.2vw, 56px); row-gap: 0; align-items: start; }
  /* an editorial step: the second panel sits a little lower */
  .df__p + .df__p { margin-top: 12svh; }
  /* (at 2000×1000 a 5:6 panel would be taller than the screen: capped, the picture crops; the title on it always shows) */
  .df__media { aspect-ratio: 5 / 6; max-height: min(74vh, 900px); }
  .df__t { font-size: clamp(40px, 12px + 2.4vw, 56px); padding: 0 32px 28px; }
  .df__txt { padding-top: 20px; }
}

/* high contrast: no picture behind the title (css/ui.css paints the page black and white) */
html.a11y-contrast .df__media { aspect-ratio: auto; background: none !important; }
html.a11y-contrast .df__media picture, html.a11y-contrast .df__media::after, html.a11y-contrast .df__tag { display: none; }
html.a11y-contrast .df__t { position: static; padding: 0; }

/* reduced motion and "stop animations": in place */
html.rm .df__media .df__img { transform: none !important; }