/**
 * @file
 * media.css
 * 
 * Layout and Theme styles for Video Embeds Across the site
 * 
 * -------------------------------------------------
 * Attached thru `.info.yml`
 *
 ============================================================================ */


/**
 * Regions
 ========================================*/
 
 /*main navigation*/
 header {
     margin: auto;
     max-width: 1440px;
     padding: 24px 64px;
 }
 header .header-inner.layout-container {
     padding: 0;
     align-items: flex-end;
     max-width: 100%;
 }
 .menu-bar-inner {
     display: flex;
     flex-direction: column;
     align-items: flex-end;banner-video__player
     gap: 8px;
 }
 .menu-bar-inner nav {
     width: fit-content;
 }
 #block-letsgo-mainnavigation {
     color: #FAECE1;
     margin: 18px 0;
 }
 #block-letsgo-mainnavigation ul li:last-child {
     background: #DD906A;
     color: #162927;
     border-radius: 20px 0 20px 0;
     margin-left: 32px;
     padding: 0;
 } 
 #block-letsgo-mainnavigation ul li:last-child a {
     padding: 20px 24px;
 }
  #block-letsgo-mainnavigation ul li:last-child a:after {
     position: absolute;
     content: url('../images/button-leaf.svg');
     width: 56px;
     height: 48px;
     right: -6px;
     bottom: -6px;     
  }
 #block-letsgo-utilitynavigation {
     color: #94B0B4;
 }
 #block-letsgo-utilitynavigation .menu {
     display: flex;
     gap: 40px;
 }
 
 

/* ─────────────────────────────────────────
   Video Embed on About
───────────────────────────────────────── */
.about-page__media.fullsize {
    margin: auto;
}
.about-page__media.fullsize,
.about-page__media.fullsize img,
.about-page__media.fullsize video,
.about-page__media.fullsize iframe {
    max-width: 1312px;
    height: 130%;    
}
article.node--type-about-page header { display: none; }
.about-page__media,
.about-page__media img,
.about-page__media video,
.about-page__media iframe {
    overflow: clip;
    border-radius: 176px 0 176px 0;
    max-width: 868px;
    height: 488px;
    width: 100%;
    margin-bottom: 24px;
}
.about-page__title {
    padding: 24px 0;
}
.field-node--field-paragraphs > .field__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*video unmute button on about*/
.banner-video {
  position: relative;
}
/* The crop window. Over-scaling the iframe hides logo/title outside this box. */
.banner-video__wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 868 / 488; /* or fix a height for a shorter banner */
  overflow: hidden;
}
.fullsize .banner-video__wrap {
    aspect-ratio: 1312/648;
}
/* YouTube replaces the inner div with its iframe; target both. */
.banner-video__player,
.banner-video__wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Over-scale ~30% so YouTube chrome sits outside the visible crop.
     Tune the scale to taste; bigger = more aggressive crop. */
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* block hover UI / clicks reaching the player */
}
.banner-video__wrap.player iframe {
    pointer-events: all;
}
/* Transparent layer that eats stray clicks; button lives above it. */
.banner-video__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Small, elegant unmute button, bottom-left. */
.video-overlay__control-group {
  bottom: 1rem;
  left: 1rem;
  gap: 20px;
  background: none;
  z-index: 2;
}
.video-overlay__play-pause {
    gap: 10px;
    width: 100%;
    cursor: pointer;
}
.video-overlay__play .control-icon,
.video-overlay__play.paused .control-icon {
    display: flex;
    justify-content: center;
    align-items: center;  
    margin: auto;
}
.video-overlay__play .control-icon {
    width: 8px;
    height: 10px; 
    content: url("../images/control-play.svg");
}
.video-overlay__play.paused .control-icon {
    width: 8px;
    height: 10px; 
    content: url("../images/control-pause.svg");
    position: relative;
    left: 1px;
}
.video-overlay__prev,
.video-overlay__next {
    background: none;
    padding: 0;
    cursor: pointer;
}
.video-overlay__prev .control-icon,
.video-overlay__next .control-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    padding: 6px 5px;
}
.video-overlay__prev .control-icon {
    content: url("../images/control-prev.svg");
}
.video-overlay__next .control-icon {
    content: url("../images/control-next.svg");
}
.video-overlay__play {
    padding: 8px;
    background: rgba(148, 176, 180, 0.3);
    border-radius: 999px;
}
.banner-video__unmute,
.video-overlay__play {
    aspect-ratio: 1/1;
}
.player .banner-video__unmute {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}
.banner-video__unmute {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 8px;
  border: none;
  border-radius: 999px;
  background: rgba(148, 176, 180, 0.3);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, opacity 0.2s ease;
  width: 40px;
}
.banner-video__unmute:hover {
  background: rgba(0, 0, 0, 0.75);
}
.banner-video__unmute-icon {
  width: 0.9rem;
  height: 0.9rem;
  display: inline-block;
  /* swap for an SVG/icon font; placeholder shapes via ::before if you like */
}
.banner-video__unmute.is-muted .banner-video__unmute-icon {
  /* muted-state icon */
  content: url("../images/video-mute.svg");
  opacity: 1;
}
.banner-video__unmute.is-unmuted .banner-video__unmute-icon {
  /* unmuted-state icon */
  content: url("../images/video-mute.svg");
  opacity: 0.2;
}
.banner-video__unmute-label {
  /* hide the text label if you want icon-only:
     position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); */
}




/* ─────────────────────────────────────────
   Video Slider on Program Page
───────────────────────────────────────── */

.banner-videos {

}
/* Stage — the single active player */
.banner-videos__stage {

}
.banner-videos__player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 868 / 488;
  overflow: hidden;
  border-radius: 176px 0 176px 0;
  margin-bottom: 40px;
}
.banner-videos__player,
.banner-videos__player-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.banner-videos__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.banner-videos__unmute {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}
.banner-videos__unmute:hover {
  background: rgba(0, 0, 0, 0.75);
}
.banner-videos__unmute-icon {

}
.banner-videos__unmute.is-muted .banner-videos__unmute-icon {

}
.banner-videos__unmute.is-unmuted .banner-videos__unmute-icon {

}
.banner-videos__unmute-label {

}

/* Thumbnail strip */
.banner-videos__thumbs {

}
.banner-videos__thumbs-wrapper {
    /*17+3*/
    gap: 3px;
}
.banner-videos__thumb
.banner-videos__thumb-button {
    aspect-ratio: 200/112.5;
    width: 200px;
    max-width: 200px;
}
.banner-videos__thumb-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.banner-videos__thumb-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.banner-videos__thumb-button,
.banner-videos__thumb-img {
    border-radius: 12px;
    overflow: clip;
}
.banner-videos__thumb-badge {
  /* the round play button overlay */
}
.banner-videos__thumb-eq {
  /* audio-bars indicator; shown only on the active thumb */
  display: none;
}
.banner-videos__thumb.is-active .banner-videos__thumb-eq {
  display: block;
}
.banner-videos__thumb.is-active .banner-videos__thumb-badge {
  display: none;
}
.banner-videos__thumb-title {
   display: none;
   margin-bottom: 0;
   padding: 8px 0;
}
.banner-videos__thumb.is-active .banner-videos__thumb-title {
    display: block;
}
/* Nav */
.banner-videos__nav {

}
.banner-videos__button-prev,
.banner-videos__button-next {
  cursor: pointer;
}
.banner-videos__thumb-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
}
.banner-videos__thumb.is-active .banner-videos__thumb-overlay-icon {
    width: 33px;
    height: 29px;
    content: url("../images/video-slide-active.svg");
}
.banner-videos__thumb .banner-videos__thumb-overlay-icon {
    width: 32px;
    height: 32px;
    content: url("../images/video-slide-inactive.svg");
    box-shadow: 0px 5.33333px 8px 4px rgba(0, 0, 0, 0.15), 0px 2.66667px 2.66667px rgba(0, 0, 0, 0.3);
}

/**
 * Responsive
 ========================================*/
/* @media screen and (min-width: 900px) {*/

/*  .layout-sidebar {*/
/*    width: 21em;*/
/*    min-width: 21em;*/
/*    opacity: .9;*/
/*    margin-left: 2em;*/
/*  }*/
/*}*/