@charset "UTF-8";
/**
 * @file
 * Hero Banner - Video component
 */
/**
* @file
* Common dependencies for all theme stylesheets (both global and component specific)
*/
/**
* @file
* Functions
*
* Defines reusable Sass functions that perform calculations or transformations (e.g.,
* color manipulation, scaling values).
*/
/**
 * @file
 * Color functions
 */
/**
* @file
* Tier 1 - Primitive Color Variables
*
* Contains the color design tokens assigned to our aliases.
* These variables are the raw, unchanging values used to define the core visual language of the project.
*/
/**
* @file
* Convert values into rem units.
* Only `px` values are converted to rem.
* ! Use CSS variables whenever possible
* defines the base font size in a way that is understandable by Sass functions
*/
/**
* @file
* Mixins
*
* Contains imports for reusable Sass mixins that encapsulate common patterns or logic, such as
* responsive styles, vendor prefixes, or utility functions.
*/
/**
* @file
* Breakpoints
*
* Defines CSS variables for responsive design breakpoints used throughout the project.
*/
/**
* @file
* Container Mixins
*
* Contains mixins for containers that can be applied on a component level when their associated utility class is applied
*/
/**
* @file
* Container Variables
*/
/**
 * @file
 * Global typography for site
*/
/**
* @file
* Typography
*
* Defines CSS variables and styles related to typography, including font families,
* sizes, weights, line heights, and letter spacing.
*/
/**
* @file
* Type SCSS variables for spacing system
*/
/* === Font Stacks === */
/* === Font Weights === */
/* === Letter Spacing === */
/* === Line Heights === */
/* A single line value will be used for type. The largest value was selected based on comparing between mobile and desktop. */
/* === Font Sizes === */
/* Min / Mobile */
/* Max / Desktop */
/* Font Size / Fluid Units
* Resource: Utopia Clamp Calculator
* @link https://utopia.fyi/clamp/calculator?a=320,1440,92—104|64—88|52—64|48—60|32—40|16—20
*
* viewport values from utopia clamp calculator
* values without clamp are the same for mobile and desktop
*/
/*
 Preset typography
*/
/**
* @file
* Utility Mixins
*/
/**
* @file
* Container Mixins
*
* Contains mixins for containers that can be applied on a component level when their associated utility class is applied
*/
/**
* @file
* Variables
*/
/**
* @file
* Type SCSS variables for transition durations.
*/
/**
* @file
* Typography
*
* Defines CSS variables and styles related to typography, including font families,
* sizes, weights, line heights, and letter spacing.
*/
/**
* @file
* SCSS variables for radii
*/
/**
* @file
* Typography
*
* Defines CSS variables and styles related to typography, including font families,
* sizes, weights, line heights, and letter spacing.
*/
/**
 * @file
 * Global typography for site
*/
/**
* @file
* Z-Index
*
* Source of truth for z-index values used throughout the theme.
*/
/**
* @file
* SCSS variables for miscellaneous items
*/
/**
* @file
* Common dependencies for all theme stylesheets (both global and component specific)
*/
/**
 * Tabs/tab as seen on the search page.
 * Pattern reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role#example
 */
/**
 * Styles for "No Results" message to be displayed when 0 results are returned initiating 
 * a search from the Nav, or when 0 results are returned using filters
 */
/**
* @file
* Utility Mixins
*/
@keyframes hero-scrim-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
:root {
  --hero-sticky-start: max(var(--header-block-size), var(--header-offset));
  --hero-banner-block-size: max(40.3125rem, calc(100dvh - var(--hero-sticky-start)));
  --hero-banner-track-block-size: 100dvh;
  --hero-text-threshold: 33dvh;
  --hero-scrim-threshold: 50dvh;
  --hero-scrim-opacity: ;
}

.paragraph--type--section .layout > .layout__region:has(> .hero-banner) {
  grid-column: 1/-1;
  position: relative;
}

.hero-banner {
  block-size: var(--hero-banner-track-block-size);
  contain: content;
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) var(--container-inline-size) minmax(1rem, 1fr);
  grid-template-rows: [content] 1fr 1rem auto [controls] min-content 1rem;
  position: relative;
}
.hero-banner::after {
  animation: hero-scrim-appear linear forwards;
  animation-range: 0 calc(var(--hero-banner-track-block-size) - var(--hero-banner-block-size));
  animation-timeline: scroll();
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.996) 6.25%, rgba(0, 0, 0, 0.9843) 12.5%, rgba(0, 0, 0, 0.9648) 18.75%, rgba(0, 0, 0, 0.9375) 25%, rgba(0, 0, 0, 0.9023) 31.25%, rgba(0, 0, 0, 0.8593) 37.5%, rgba(0, 0, 0, 0.8085) 43.75%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.6835) 56.25%, rgba(0, 0, 0, 0.6093) 62.5%, rgba(0, 0, 0, 0.5273) 68.75%, rgba(0, 0, 0, 0.4375) 75%, rgba(0, 0, 0, 0.3398) 81.25%, rgba(0, 0, 0, 0.2343) 87.5%, rgba(0, 0, 0, 0.121) 93.75%, rgba(0, 0, 0, 0) 100%);
  block-size: 110%;
  content: "";
  grid-area: 1/1/-1/-1;
  inset-block: auto 0;
  margin-block-start: auto;
  opacity: var(--hero-scrim-opacity, 0);
  pointer-events: none;
  position: sticky;
  z-index: 1;
}

.hero-banner__background,
.hero-banner__video {
  block-size: var(--hero-banner-block-size);
  border: none;
  grid-area: 1/1/-1/-1;
  inline-size: 100%;
  inset: 0;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
}
@media (min-width: 768px) {
  .hero-banner__background,
  .hero-banner__video {
    /* This is a minor hack to address style inconsistencies observed when iframe is injected
       into the DOM https://jira.uhub.biz/browse/VMLNATR-6108. This issue has mostly affects 
       Windows devices. Ideally a better solution should be found and this hack removed. */
    margin-block-start: -0.25rem;
  }
}

.hero-banner__video {
  /* This is a minor hack to address style inconsistencies observed when iframe is injected
     into the DOM https://jira.uhub.biz/browse/VMLNATR-6108. This issue has mostly affects
     Windows devices. Ideally a better solution should be found and this hack removed. */
  background: black;
  z-index: 1;
}

.hero-banner__featured {
  color: var(--text-on-action);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  grid-area: 2/2/-1/-1;
  margin: auto 0 var(--hero-text-threshold);
  z-index: 2;
}
.hero-banner__featured > a[id] {
  grid-area: 2/2/-1/-1;
  inset: calc(-1 * (var(--hero-text-threshold) + var(--header-block-size))) auto auto;
  position: absolute;
}

.hero-banner__background {
  background-color: var(--neutral-color-900);
  color: var(--text-on-action);
  color-scheme: dark light;
  contain: size;
  display: grid;
  grid-template-columns: 1rem 1fr 1rem;
  grid-template-rows: subgrid;
  position: relative;
}
@media (min-width: 768px) {
  .hero-banner__background.hero-banner__background--mobile {
    display: none;
  }
}
.hero-banner__background.hero-banner__background--desktop {
  display: none;
}
@media (min-width: 768px) {
  .hero-banner__background.hero-banner__background--desktop {
    display: block;
  }
}
.hero-banner__background img {
  max-inline-size: unset;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.hero-banner__background img,
.hero-banner__video {
  aspect-ratio: 9/16;
  block-size: var(--hero-banner-block-size);
  inline-size: 100vi;
  overscroll-behavior: none;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 1;
}
@media (min-width: 768px) {
  .hero-banner__background img,
  .hero-banner__video {
    aspect-ratio: 16/9;
    block-size: 56.25vi;
  }
}

.hero-banner__video-container {
  aspect-ratio: 9/16;
  display: grid;
  grid-area: 1/1/-1/-1;
  grid-template-columns: subgrid;
  inline-size: 100vi;
  inset-block-start: var(--hero-sticky-start);
  -o-object-fit: cover;
     object-fit: cover;
  position: sticky;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (min-width: 768px) {
  .hero-banner__video-container {
    aspect-ratio: 16/9;
    block-size: 56.25vi;
  }
}

.hero-banner__video-controls {
  align-items: center;
  block-size: -moz-min-content;
  block-size: min-content;
  display: flex;
  gap: 1rem;
  grid-area: 2/2/-1/2;
  inline-size: 100%;
  inset: auto 1rem 1rem;
  justify-content: space-between;
  margin: auto 1rem 1rem;
  position: sticky;
  z-index: 3;
}
@media (min-width: 768px) {
  .hero-banner__video-controls {
    gap: 2rem;
  }
}

.hero-banner__background:has(.hero-banner__video-container:not([data-load-state], [data-play-state])) ~ .hero-banner__video-controls .video-controls__wrapper {
  display: none;
}

.video-controls__wrapper {
  align-items: center;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  display: flex;
  justify-content: space-between;
  margin-inline-start: 0;
}
@media (min-width: 768px) {
  .video-controls__wrapper {
    justify-content: flex-end;
    margin-inline-start: auto;
  }
}

.video-controls-button {
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  aspect-ratio: 1;
  background-color: transparent;
  border: 0.125rem solid currentColor;
  border-radius: 50%;
  color: var(--text-on-action);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  padding: 0.5rem;
  position: relative;
  transition: background-color 200ms ease-in-out;
}
.video-controls-button:hover {
  background-color: var(--icon-hover);
}
.video-controls-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.video-controls-button svg {
  display: block;
  max-block-size: 1.5rem;
  max-inline-size: 1.5rem;
}

.video-controls-button--sound .tnds-sound-on {
  display: none;
}
.video-controls-button--sound .tnds-sound-off {
  display: block;
}

[data-mutedState=unmuted] .video-controls-button--sound .tnds-sound-on,
.video-controls-button--sound[aria-pressed=true] .tnds-sound-on {
  display: block;
}
[data-mutedState=unmuted] .video-controls-button--sound .tnds-sound-off,
.video-controls-button--sound[aria-pressed=true] .tnds-sound-off {
  display: none;
}

.video-controls-button--play .tnds-play {
  display: none;
}
.video-controls-button--play .tnds-pause {
  display: block;
}

[data-playState=paused] .video-controls-button--play .tnds-play,
.video-controls-button--play[aria-pressed=true] .tnds-play {
  display: block;
}
[data-playState=paused] .video-controls-button--play .tnds-pause,
.video-controls-button--play[aria-pressed=true] .tnds-pause {
  display: none;
}

.hero-banner__get-inspired {
  font-family: "TNSansPerfect", Monaco, monospace;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.1;
  color: var(--text-on-action);
  cursor: pointer;
  inset: auto auto calc(var(--hero-banner-block-size) - var(--hero-text-threshold) - 1lh);
  margin-inline-start: 1rem;
  opacity: calc(1 - var(--hero-scrim-opacity, 0));
  position: sticky;
  text-decoration: none;
  transition: opacity 300ms ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 2;
}
:has(.font-loaded) .hero-banner__get-inspired {
  line-height: 1.1;
}
.hero-banner__get-inspired .tnds-arrow-down-a {
  transform: scale(-1.5, 1.5) translate(1.25rem, -0.1rem);
}
.hero-banner__get-inspired:hover, .hero-banner__get-inspired:focus {
  background: url("/themes/custom/tnvacation/img/menu-underline.svg") no-repeat;
  background-position: center 1.5rem;
  color: var(--text-on-action);
  text-decoration: none;
}

body:has(.ot-floating-button) .hero-banner__get-inspired {
  inset: auto auto calc(var(--hero-banner-block-size) - var(--hero-text-threshold) - 1lh) calc(3.125rem + 3rem);
}

.hero-banner__video-controls:has(~ .hero-banner__featured:has(:target)) {
  --hero-scrim-opacity: 0;
}
.hero-banner__video-controls:has(~ .hero-banner__featured:has(:target)) .hero-banner__get-inspired {
  content-visibility: hidden;
}

body:has(.hero-banner__video) {
  --page-header-fly-point: 71rem;
  --hero-banner-track-block-size: calc(150dvh + var(--hero-sticky-start));
}

@supports (animation-timeline: scroll()) {
  :root:has(.hero-banner__video) {
    overscroll-behavior: none;
    scroll-behavior: smooth;
  }
  body:has(.hero-banner__video) {
    overflow-y: auto;
    overscroll-behavior: none;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
  }
  .hero-banner__video-controls + .hero-banner__featured {
    animation: hero-scrim-appear linear forwards;
    animation-range: 0 calc(var(--hero-banner-track-block-size) - var(--hero-banner-block-size));
    animation-timeline: scroll();
  }
  .hero-banner__video-controls .hero-banner__get-inspired {
    animation: hero-scrim-appear linear both reverse;
    animation-range: 0 calc(var(--hero-banner-block-size) - var(--hero-text-threshold));
    animation-timeline: scroll();
  }
}
/*# sourceMappingURL=../maps/hero-banner/hero-banner.css.map */