/* =========================================
   Tour27
========================================= */

.usm-tour27 {
  width: 100%;
  overflow: hidden;

  padding-block:
    clamp(40px, 4vw, 72px)
    clamp(56px, 6vw, 112px);

  background: var(--surface-dark, #111);
  color: var(--text-on-dark, #fff);
}

.usm-tour27__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(360px, .85fr);
  align-items: start;
  gap: clamp(48px, 5vw, 96px);

  width: var(--site-width);
  margin-inline: auto;
}

/* =========================================
   Image
========================================= */

.usm-tour27__media {
  min-width: 0;
  margin: 0;
  overflow: hidden;

  background: var(--surface-dark, #111);
}

.usm-tour27__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.usm-tour27__image {
  display: block;

  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;

  object-fit: cover;
  object-position: center;
}

/* =========================================
   Content
========================================= */

.usm-tour27__content {
  min-width: 0;
}

/* Eyebrow */

.usm-tour27__eyebrow {
  margin: 0 0 clamp(28px, 3vw, 56px);

  color: var(--tour27-text, #fff);
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--w-700);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
}

/* Animated locations */

.usm-tour27__locations {
  position: relative;

  width: 100%;
  height: clamp(96px, 8.5vw, 160px);
  overflow:  visible;

  padding-top: .04em;
}

.usm-tour27__location {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: start;

  opacity: 0;
  transform: translateY(.35em);

  color: var(--tour27-text);
  font-family: var(--font-display);
  font-size: clamp(72px, 8vw, 150px);
  font-weight: var(--w-700);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  white-space: nowrap;

  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.usm-tour27__location.is-active {
  opacity: 1;
  transform: translateY(0);
}

.usm-tour27__location.is-leaving {
  opacity: 0;
  transform: translateY(-.35em);
}

/* Description */

.usm-tour27__description {
  max-width: 58ch;
  margin-top: clamp(8px, 1vw, 16px);
	
  color: var(--tour27-muted, rgba(255, 255, 255, .7));
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--w-400);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.usm-tour27__description p {
  margin: 0;
}

.usm-tour27__description p + p {
  margin-top: 1em;
}

.usm-tour27__description strong {
  color: var(--tour27-text, #fff);
  font-weight: var(--w-700);
}

/* =========================================
   Partner logos
========================================= */

.usm-tour27__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(22px, 2.5vw, 48px);

  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: clamp(32px, 3vw, 56px);
}

.usm-tour27__logo {
  display: grid;
  place-items: center;

  flex: 0 0 auto;
  width: auto;
  height: clamp(46px, 4vw, 76px);
}

.usm-tour27__logo-link {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;
}

.usm-tour27__logo-image {
  display: block;

  width: auto !important;
  max-width: clamp(86px, 8vw, 150px) !important;
  height: 100% !important;
  max-height: 100% !important;

  object-fit: contain;
  filter: brightness(0) invert(1);

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.usm-tour27__logo-link:hover .usm-tour27__logo-image,
.usm-tour27__logo-link:focus-visible .usm-tour27__logo-image {
  opacity: .75;
  transform: translateY(-2px);
}

/* Optional ACF logo styles */

.usm-tour27__logo--wide .usm-tour27__logo-image {
  max-width: clamp(120px, 11vw, 200px) !important;
}

.usm-tour27__logo--compact .usm-tour27__logo-image {
  max-width: clamp(60px, 6vw, 100px) !important;
}

/* =========================================
   Compact desktop
========================================= */

@media (max-width: 1200px) {
  .usm-tour27__logos {
    gap: clamp(16px, 2vw, 28px);
  }

  .usm-tour27__logo-image {
    max-width: clamp(72px, 7vw, 110px) !important;
  }

  .usm-tour27__logo--wide .usm-tour27__logo-image {
    max-width: clamp(105px, 10vw, 150px) !important;
  }

  .usm-tour27__logo--compact .usm-tour27__logo-image {
    max-width: clamp(58px, 6vw, 82px) !important;
  }
}

/* =========================================
   Tablet
========================================= */

@media (max-width: 1024px) {
  .usm-tour27__inner {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(320px, .9fr);
    gap: clamp(32px, 4vw, 56px);
  }

  .usm-tour27__locations {
    height: clamp(74px, 8vw, 110px);
  }

  .usm-tour27__location {
    font-size: clamp(64px, 8vw, 96px);
  }
}

/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {
  .usm-tour27 {
    padding-block: 0;
  }

  .usm-tour27__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;

    width: 100%;
    max-width: none;
  }

  .usm-tour27__media {
    width: 100%;
  }

  .usm-tour27__image {
    width: 100% !important;
    aspect-ratio: 4 / 3;

    object-fit: cover;
    object-position: center;
  }

  .usm-tour27__content {
    width: var(--site-width);
    margin-inline: auto;
    padding-block:
      clamp(56px, 14vw, 88px)
      clamp(64px, 16vw, 96px);
  }

  .usm-tour27__eyebrow {
    margin-bottom: clamp(52px, 14vw, 80px);
  }

  .usm-tour27__locations {
    height: clamp(72px, 23vw, 104px);
  }

  .usm-tour27__location {
    align-items: flex-start;
    font-size: clamp(58px, 18vw, 84px);
    white-space: nowrap;
  }

  .usm-tour27__description {
    max-width: none;
    margin-top: clamp(40px, 11vw, 64px);
  }

  .usm-tour27__logos {
    flex-wrap: wrap;
    gap: clamp(20px, 7vw, 36px);

    margin-top: clamp(48px, 13vw, 72px);
  }

  .usm-tour27__logo {
    height: clamp(48px, 13vw, 68px);
  }

  .usm-tour27__logo-image {
    max-width: clamp(84px, 25vw, 128px) !important;
  }

  .usm-tour27__logo--wide .usm-tour27__logo-image {
    max-width: clamp(110px, 31vw, 160px) !important;
  }

  .usm-tour27__logo--compact .usm-tour27__logo-image {
    max-width: clamp(58px, 18vw, 90px) !important;
  }
}

/* =========================================
   Reduced motion
========================================= */

@media (prefers-reduced-motion: reduce) {
  .usm-tour27__location,
  .usm-tour27__logo-image {
    transition: none;
  }
}