/* “More campaigns” row at the bottom of each campaign detail (banner cards from the index). */

.vl-campaigns-more {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  box-sizing: border-box;
  clear: both;
}

.vl-campaigns-more__head {
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

.vl-campaigns-more__head .slider__title {
  margin: 0 0 0.35rem;
}

.vl-campaigns-more__sub {
  margin: 0;
  opacity: 0.78;
  max-width: 36rem;
}

.vl-campaigns-more__slider .slider__slides {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.vl-campaigns-more__slider .slider__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(1rem, 2.4vw, 1.65rem);
  width: max-content;
  min-width: min(100%, 1px);
  margin: 0;
  padding: 0 0 0.65rem;
  list-style: none;
}

.vl-campaigns-more__slider .slider__list > .work {
  flex: 0 0 clamp(16.5rem, 42vw, 22.5rem);
  scroll-snap-align: start;
  margin: 0;
}

.vl-campaigns-more .work__container.grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  height: 100%;
}

.vl-campaigns-more .work__thumbnail {
  grid-column: 1 !important;
  grid-row: 1 !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
}

.vl-campaigns-more .work__thumbnail .media,
.vl-campaigns-more .work__thumbnail .media img {
  width: 100%;
  height: 100%;
  display: block;
}

.vl-campaigns-more .work__thumbnail .media img {
  object-fit: cover;
  object-position: center;
}

.vl-campaigns-more .work__link {
  grid-column: 1 !important;
  grid-row: 2 !important;
  padding-top: clamp(0.55rem, 1.5vw, 0.8rem) !important;
  text-decoration: none;
  color: inherit;
}

.vl-campaigns-more .work__title {
  display: block !important;
  color: #fafafa !important;
}

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

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

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

.vl-campaigns-more .work__excerpt {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

.vl-campaigns-more .work__excerpt,
.vl-campaigns-more .work__excerpt p {
  color: rgba(250, 250, 250, 0.84) !important;
  margin: 0;
}

body.vl-page-campaigns.vl-theme-middle .vl-campaigns-more .work__title {
  color: #111 !important;
}

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

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

/* Hide the campaign the reader is already viewing. */
#vl-campaigns-vmodel-placeholder:target
  .vl-campaigns-more
  [data-vl-campaign-card="vl-campaigns-vmodel-placeholder"],
#vl-campaigns-welcome-vmodel-placeholder:target
  .vl-campaigns-more
  [data-vl-campaign-card="vl-campaigns-welcome-vmodel-placeholder"] {
  display: none !important;
}

/*
 * Full-width band below the rail + prose block (not beside the handset at the top).
 * Desktop: inset content to the prose column with comfortable gap from the frame.
 */
@media (min-width: 900px) {
  body.vl-page-campaigns .vl-campaigns-detail:target .vl-campaigns-more {
    --vl-campaigns-more-prose-inset: calc(
      4 * var(--space-grid-width) + 4 * var(--space-grid-gap) +
        var(--space-grid-padding, clamp(1rem, 4vw, 1.5rem))
    );
    padding-left: var(--vl-campaigns-more-prose-inset);
    padding-right: var(--space-grid-padding, clamp(1rem, 4vw, 1.5rem));
    margin-top: clamp(3.5rem, 7vw, 5.5rem);
    padding-top: clamp(2.5rem, 4.5vw, 3.5rem);
  }
}

@media (max-width: 899px) {
  body.vl-page-campaigns .vl-campaigns-detail:target .vl-campaigns-more {
    padding-inline: var(--space-grid-padding, clamp(1rem, 4vw, 1.5rem));
    margin-top: clamp(2.5rem, 8vw, 3.75rem);
  }
}