/*
 * Spinnersonic + PONY dual row: two columns; each column is a flex stack (banner → title)
 * so titles sit directly under their own thumbnail even when the two banners differ in height.
 */

body.home .section-works-homepage__list > .work.work--spinnersonic-dual {
  grid-column: 1 / -1 !important;
}

/* Desktop: PONY (narrower) left, Spinnersonic (wider) right - DOM is col-right then col-left. */
body.home .work.work--spinnersonic-dual .work__container.grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto;
  grid-template-areas: "col-right col-left";
  align-items: start;
  column-gap: var(--space-grid-padding, var(--edge-start, clamp(1rem, 4vw, 1.5rem)));
  row-gap: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col {
  display: flex;
  flex-direction: column;
  gap: var(--vl-home-feature-banner-inner-gap, clamp(0.7rem, 2.2vw, 1rem));
  min-width: 0;
  align-items: stretch;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col--left {
  grid-area: col-left;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col--right {
  grid-area: col-right;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--left {
  width: 100%;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--right {
  width: 100%;
}

body.home .work.work--spinnersonic-dual .work__thumbnail {
  position: relative;
  grid-column: auto !important;
  margin-bottom: 0 !important;
  min-width: 0;
}

body.home .work.work--spinnersonic-dual .work__thumbnail .media,
body.home .work.work--spinnersonic-dual .work__thumbnail .vl-home-spinnersonic-dual__img {
  border-radius: inherit;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--left .vl-home-spinnersonic-dual__card {
  aspect-ratio: 4519 / 2541;
  width: 100%;
  height: auto;
  position: relative;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--right .vl-home-spinnersonic-dual__card {
  aspect-ratio: 2101 / 1314;
  width: 100%;
  height: auto;
  position: relative;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--left,
body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--right {
  aspect-ratio: unset;
  height: auto;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__card {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  outline-offset: 4px;
  border-radius: inherit;
  overflow: hidden;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__card:hover,
body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__card:active,
body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__card:visited {
  color: inherit;
  text-decoration: none;
}

body.home .work.work--spinnersonic-dual .work__thumbnail .media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Edge fill when images are cropped (cover) or letterboxed (contain on Spinnersonic). */
  background: var(--color-surface-muted, #ebebeb);
}

/* home-products-banner.css uses flex on `.work__thumbnail .media` for other tiles; that breaks
   absolute-fill stacked imgs here - reset for this row only (loads after, same specificity). */
body.home .section-works-homepage__list .work.work--spinnersonic-dual .work__thumbnail .media {
  display: block;
}

/* Dark canvas (mid-scroll) + system dark: letterbox matches background (no asset resize). */
body.home.vl-theme-middle .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--left .media {
  background: #050505;
}

body.home.vl-theme-middle .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--right .media {
  background: #050505;
}

@media (prefers-color-scheme: dark) {
  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--left .media {
    background: #050505;
  }

  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--right .media {
    background: #050505;
  }
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* PONY column: base + hover art should fill the thumb (no grey/red pillarboxing). */
body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--right .media {
  /* Match banner plate so subpixel gaps never read as white/grey. */
  background: #801418;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--right .vl-home-spinnersonic-dual__img {
  object-fit: cover;
  object-position: left top;
  /* Asset + layout: ~1px light fringe on right/bottom - bleed past the clip. */
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  transform: translate3d(0, 0, 0) scale(1.008);
  transform-origin: left top;
}

/* PONY tile only: simple two-image crossfade. */
body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--right .vl-home-spinnersonic-dual__img--hover {
  opacity: 0;
  transition: opacity 0.32s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--right
    .vl-home-spinnersonic-dual__card:hover
    .vl-home-spinnersonic-dual__img--hover,
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--right
    .vl-home-spinnersonic-dual__card:focus-visible
    .vl-home-spinnersonic-dual__img--hover {
    opacity: 1;
  }
}

/* PONY: mobile tap alternates base / wide art (home-feature-banners-mobile.js). */
@media (max-width: 1023px), (pointer: coarse) {
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--right
    .media.is-vl-mobile-pony-alt
    .vl-home-spinnersonic-dual__img:not(.vl-home-spinnersonic-dual__img--hover) {
    opacity: 0 !important;
  }

  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--right
    .media.is-vl-mobile-pony-alt
    .vl-home-spinnersonic-dual__img--hover {
    opacity: 1 !important;
  }
}

/* Spinnersonic left: base + directional variants - random slide-in on hover (home-spinnersonic-entry-hover.js). */
@keyframes vl-spinnersonic-in-left {
  from {
    opacity: 0;
    transform: translate3d(-16%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vl-spinnersonic-in-right {
  from {
    opacity: 0;
    transform: translate3d(16%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vl-spinnersonic-in-top {
  from {
    opacity: 0;
    transform: translate3d(0, -16%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vl-spinnersonic-in-bottom {
  from {
    opacity: 0;
    transform: translate3d(0, 16%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--left .vl-home-spinnersonic-dual__img--dir {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  z-index: 1;
  animation: none;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--left .vl-home-spinnersonic-dual__img--base {
  z-index: 0;
  transition: opacity 0.38s ease;
}

body.home
  .work.work--spinnersonic-dual
  .vl-home-spinnersonic-dual__thumb--left
  .media[data-vl-entry-from]
  .vl-home-spinnersonic-dual__img--base {
  opacity: 0;
}

/* Hide non-chosen variants while one direction is active */
body.home
  .work.work--spinnersonic-dual
  .vl-home-spinnersonic-dual__thumb--left
  .media[data-vl-entry-from="left"]
  .vl-home-spinnersonic-dual__img--dir:not([data-vl-dir="left"]),
body.home
  .work.work--spinnersonic-dual
  .vl-home-spinnersonic-dual__thumb--left
  .media[data-vl-entry-from="right"]
  .vl-home-spinnersonic-dual__img--dir:not([data-vl-dir="right"]),
body.home
  .work.work--spinnersonic-dual
  .vl-home-spinnersonic-dual__thumb--left
  .media[data-vl-entry-from="top"]
  .vl-home-spinnersonic-dual__img--dir:not([data-vl-dir="top"]),
body.home
  .work.work--spinnersonic-dual
  .vl-home-spinnersonic-dual__thumb--left
  .media[data-vl-entry-from="bottom"]
  .vl-home-spinnersonic-dual__img--dir:not([data-vl-dir="bottom"]) {
  opacity: 0 !important;
  transform: translate3d(0, 0, 0) !important;
  animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="left"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="left"] {
    animation: vl-spinnersonic-in-left 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="right"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="right"] {
    animation: vl-spinnersonic-in-right 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="top"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="top"] {
    animation: vl-spinnersonic-in-top 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="bottom"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="bottom"] {
    animation: vl-spinnersonic-in-bottom 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

/* Touch / coarse pointer: same random pick, instant swap (no slide). */
@media (hover: none), (pointer: coarse) {
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="left"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="left"],
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="right"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="right"],
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="top"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="top"],
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="bottom"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="bottom"] {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Titles: same type scale as Creators / Wearhouse; left-aligned in column (full column width). */
body.home .work.work--spinnersonic-dual .vl-work-vmodel-intro {
  align-items: flex-start;
  text-align: left;
  max-width: none;
  width: 100%;
  min-width: 0;
}

body.home .work.work--spinnersonic-dual .vl-work-vmodel-intro__title {
  text-align: left;
  width: 100%;
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-text, #111);
}

body.home .work.work--spinnersonic-dual .vl-work-vmodel-intro__headline-link {
  color: inherit;
  text-decoration: none;
}

body.home .work.work--spinnersonic-dual .vl-work-vmodel-intro__headline-link:hover {
  text-decoration: underline;
}

body.home .work.work--spinnersonic-dual .vl-work-vmodel-intro__headline-link:focus-visible {
  outline: 2px solid var(--color-accent, #ff2b2b);
  outline-offset: 3px;
}

body.home .work.work--spinnersonic-dual .vl-work-vmodel-intro__panes {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

body.home .work.work--spinnersonic-dual .vl-work-vmodel-intro__pane {
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

@media (max-width: 1023px) {
  /* NotepadPro + PONY: moderate fill inside thumb (between full bleed and letterboxed). */
  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--right .vl-home-spinnersonic-dual__img {
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    transform: none;
    object-fit: cover;
    object-position: left top;
  }

  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--left .vl-home-spinnersonic-dual__img {
    object-fit: cover;
    object-position: center center;
  }

  /* Single column: NotepadPro first, then PONY - gap matches other featured banners. */
  body.home .work.work--spinnersonic-dual .work__container.grid {
    display: flex;
    flex-direction: column;
    gap: var(--vl-home-feature-banner-block-gap, clamp(1.5rem, 4.5vw, 2.15rem));
    width: 100%;
    box-sizing: border-box;
  }

  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col--left,
  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col--right {
    grid-area: unset;
    width: 100%;
    min-width: 0;
  }

  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col--left {
    order: 1;
  }

  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col--right {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--right .vl-home-spinnersonic-dual__img--hover,
  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__thumb--left .vl-home-spinnersonic-dual__img--dir,
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from]
    .vl-home-spinnersonic-dual__img--base {
    transition: none;
    animation: none !important;
    transform: none !important;
  }

  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="left"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="left"],
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="right"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="right"],
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="top"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="top"],
  body.home
    .work.work--spinnersonic-dual
    .vl-home-spinnersonic-dual__thumb--left
    .media[data-vl-entry-from="bottom"]
    .vl-home-spinnersonic-dual__img--dir[data-vl-dir="bottom"] {
    opacity: 1;
    transform: none;
  }
}