/* Expertise v2 integration — responsive composition only.
 *
 * The approved isolated models remain unchanged at their native 400×384 and
 * 240×240 sizes. This file owns only the seam between those models and the
 * existing Aeline card stack: desktop keeps the original dimensions; narrower
 * layouts switch to the purpose-built compact composition instead of scaling
 * the desktop UI. The card-stack geometry itself is intentionally untouched.
 */

.section_expertise .visual.hvo-backlog-tile,
.section_expertise .visual.hvo-pulse-tile,
.section_expertise .visual.hvo-thumbnails-tile,
.section_expertise .visual.hvo-sound-tile {
  width: 25rem;
  max-width: 100%;
  height: 24rem;
  overflow: hidden;
}

.section_expertise .visual.hvo-backlog-tile,
.section_expertise .visual.hvo-pulse-tile,
.section_expertise .visual.hvo-thumbnails-tile {
  display: grid;
  place-items: center;
}

/* These models are their own visual surfaces. Remove the legacy transform
   wrappers that belonged to the retired fake UI props. */
.section_expertise .hvo-backlog-tile > .hvo-backlog-v3,
.section_expertise .hvo-pulse-tile > .hvo-pulse-v2,
.section_expertise .hvo-thumbnails-tile > .hvo-thumbnails-v2 {
  flex: none;
}

/* Keep photographic production art and the Ryan clip at authored brightness
   in dark mode. The global dark stylesheet otherwise dims every image/video
   and changes the approved proof frames. */
html[data-theme="dark"] .hvo-thumbnails-v2 img,
html[data-theme="dark"] .hvo-sound-v2 video,
html[data-theme="dark"] .hvo-sound-v2 img {
  filter: none;
}

@media (max-width: 479px) {
  /* FILL THE CARD (Mena 2026-08-28: "enlarge these 4 animations on mobile to
     eliminate the blank space on the sides"). The frames used to be locked
     15rem squares centred in a wider card, which is exactly the blank space
     he saw. The frame now spans the card and stays square, and the 240px
     mobile compositions inside are scaled up to it by --hvo-tile-fill, which
     expertise-v2.js derives from the real frame width. The compositions
     themselves stay authored at 240x240, nothing is relaid out.

     (The .hvo-*-v2/v3 interior selectors the old block carried were stale:
     the live roots are .hvo-sound-v4 / .hvo-thumbnail-v4 / .hvo-x4b /
     .hvo-x4p, and each model's own stylesheet already sizes them 15rem on
     phones.) */
  .section_expertise .visual.hvo-backlog-tile,
  .section_expertise .visual.hvo-pulse-tile,
  .section_expertise .visual.hvo-thumbnails-tile,
  .section_expertise .visual.hvo-sound-tile {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* The sound tile sat out the grid-centering list above; with its child now
     scaled from centre it needs the same centring as the other three. */
  .section_expertise .visual.hvo-sound-tile {
    display: grid;
    place-items: center;
  }

  .section_expertise .hvo-sound-tile > .hvo-sound-v4,
  .section_expertise .hvo-thumbnails-tile > .hvo-thumbnail-v4,
  .section_expertise .hvo-backlog-tile > .hvo-x4b,
  .section_expertise .hvo-pulse-tile > .hvo-x4p {
    transform: scale(var(--hvo-tile-fill, 1));
    transform-origin: 50% 50%;
  }
}