/* Campaign video handset rail: same tilt + scroll stack as product-bars; video sits in DaisyUI mockup-phone. */

.vl-product-detail-rail[data-vl-product-slug="campaigns"] .vl-product-bars-rail__slide.is-active {
  pointer-events: auto;
}

/* Match DaisyUI stock mockup proportions (awards reference); scale to rail width, do not stretch bezel geometry. */
.vl-product-detail-rail[data-vl-product-slug="campaigns"] .vl-product-bars-rail__tilt {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vl-product-detail-rail[data-vl-product-slug="campaigns"] .vl-campaign-mockup-phone {
  display: inline-grid;
  width: 100%;
  max-width: 462px;
  height: auto;
  max-height: 100%;
  aspect-ratio: 462 / 978;
  box-sizing: border-box;
  vertical-align: middle;
}

.vl-product-detail-rail[data-vl-product-slug="campaigns"] .vl-campaign-mockup-phone .mockup-phone-display {
  position: relative;
  min-height: 0;
}

.vl-campaign-rail-video.vl-product-bars-rail__slide {
  border-radius: 0;
  /* `overflow: hidden` on `<video>` clips the shadow-DOM control bar in Chrome. */
  overflow: visible;
  /* Contain (not cover): show the full frame inside the rounded display without zoom/crop. */
  object-fit: contain;
  object-position: center;
  z-index: 0;
}

.vl-product-detail-rail[data-vl-product-slug="campaigns"] .mockup-phone-display {
  display: grid;
  place-content: center;
}

/* Inset native controls so timeline does not touch rounded bezel (WebKit/Blink). */
.vl-campaign-rail-video::-webkit-media-controls-panel {
  padding-inline: clamp(0.65rem, 3.5vw, 1.35rem);
}

.vl-campaign-rail-video::-webkit-media-controls-timeline-container {
  margin-inline: clamp(0.5rem, 2.5vw, 1rem);
}

/* Do not clip the control layer; clipping here made controls disappear on hover. */
.vl-campaign-rail-video::-webkit-media-controls-enclosure {
  overflow: visible;
}

/*
 * Chronology index: stack banner → campaign title → excerpt (theme + @container work
 * often keeps title beside the thumb or hides it in a narrow cell).
 */
body.vl-page-campaigns .works-chronology .work .work__container.grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
}

body.vl-page-campaigns .works-chronology .work__thumbnail {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

@media screen and (min-width: 1024px) and (pointer: fine) {
  body.vl-page-campaigns .works-chronology .work__thumbnail {
    cursor: pointer;
  }
}

body.vl-page-campaigns .works-chronology .work__link {
  grid-column: 1 !important;
  grid-row: 2 !important;
  padding-top: clamp(0.55rem, 1.6vw, 0.85rem) !important;
  position: relative;
}

/* Confine the theme’s full-card hit target to the title row only (not the banner). */
body.vl-page-campaigns .works-chronology .work__link::after {
  inset: 0;
}

body.vl-page-campaigns .works-chronology .work__thumbnail.vl-dual-banner-thumb {
  z-index: 2;
}

body.vl-page-campaigns .works-chronology .work__excerpt {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

body.vl-page-campaigns .works-chronology .work__title {
  display: block !important;
}

body.vl-page-campaigns .works-chronology .work__link {
  color: inherit;
}

body.vl-page-campaigns .works-chronology .work__sector {
  display: block !important;
  color: rgba(250, 250, 250, 0.88) !important;
}

body.vl-page-campaigns .works-chronology .work__sector .work__sector-brand {
  color: var(--color-accent, #ff2b2b) !important;
}

body.vl-page-campaigns.vl-theme-middle .works-chronology .work__sector {
  color: rgba(17, 17, 17, 0.78) !important;
}

body.vl-page-campaigns.vl-theme-middle .works-chronology .work__sector .work__sector-brand {
  color: var(--color-accent, #ff2b2b) !important;
}

body.vl-page-campaigns .works-chronology .work__excerpt,
body.vl-page-campaigns .works-chronology .work__excerpt p {
  color: rgba(250, 250, 250, 0.84) !important;
}

body.vl-page-campaigns.vl-theme-middle .works-chronology .work__excerpt,
body.vl-page-campaigns.vl-theme-middle .works-chronology .work__excerpt p {
  color: rgba(17, 17, 17, 0.78) !important;
}

/* Portfolio-style routing on one URL: index at /campaigns, longform only when fragment matches. */
body.vl-page-campaigns .vl-campaigns-detail {
  display: none !important;
}

body.vl-page-campaigns:has(.vl-campaigns-detail:target) .works-chronology {
  display: none !important;
}

body.vl-page-campaigns .vl-campaigns-detail:target {
  display: flex !important;
  flex-direction: column !important;
  scroll-margin-top: clamp(4.5rem, 12vh, 6.5rem);
  margin-top: clamp(0.35rem, 1.2vw, 0.85rem);
}

body.vl-page-campaigns .vl-campaigns-detail:target > .vl-product-detail-combined {
  flex: 0 0 auto;
  width: 100%;
}

body.vl-page-campaigns .vl-campaigns-detail:target > .vl-campaigns-more {
  flex: 0 0 auto;
  order: 2;
  width: 100%;
  align-self: stretch;
}

/* Portfolio-style index + campaign longform shell (fragment target; no intro banner). */
.vl-campaigns-detail {
  margin-top: clamp(1rem, 3vw, 2rem);
}

/*
 * Campaign longform: one flowing hero headline (full scale, no product subtitle clamp/stack).
 * White + red spans sit inline and wrap only when the line runs out of room.
 */
body.vl-page-campaigns .vl-campaigns-detail .vl-product-detail-hero .hero__description {
  line-height: 1.1 !important;
  overflow: visible !important;
}

body.vl-page-campaigns
  .vl-campaigns-detail
  .vl-product-detail-hero
  .hero__description
  .vl-red-pour-line {
  display: inline-block;
  font-size: inherit !important;
  line-height: 1.1 !important;
  vertical-align: baseline;
}

body.vl-page-campaigns
  .vl-campaigns-detail
  .vl-product-detail-hero
  .hero__description
  .vl-red-pour-line
  + span[style*="ff2b2b"] {
  display: inline;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.1 !important;
  padding-block: 0 !important;
  margin: 0;
  vertical-align: baseline;
}

body.vl-page-campaigns .vl-campaigns-detail h2 .vl-red-pour-line {
  display: inline-block;
  font-size: inherit !important;
  vertical-align: baseline;
}

body.vl-page-campaigns .vl-campaigns-detail h2 .vl-red-pour-line + span[style*="ff2b2b"] {
  display: inline;
  font-size: inherit !important;
  vertical-align: baseline;
}