/**
 * no-tecviz-styles.css
 * State-based CSS that replaces TecViz pages="" system
 * States: before, live, ondemand, after
 */

/* ============================================
   BASE STYLES (always applied)
   ============================================ */
.pages-render-wrapper {
  opacity: 1;
}

/* Hide LIVE icon by default (shown only in live state) */
.live-icon {
  display: none;
}

/* ============================================
   STATE: before, after
   ============================================ */
body.state-before main,
body.state-after main {
  padding: 23rem 0;
}

body.state-before .pages-render-wrapper,
body.state-after .pages-render-wrapper {
  width: 100%;
}

body.state-before #before-agenda-wrapper,
body.state-after #before-agenda-wrapper {
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--x-padding-before-state);
}

body.state-before #agenda-wrapper,
body.state-after #agenda-wrapper {
  border-bottom: none;
}

body.state-before #laptop-footer,
body.state-after #laptop-footer {
  max-width: unset !important;
  padding: 0;
}

body.state-before #laptop-footer,
body.state-before #mobile-footer,
body.state-after #laptop-footer,
body.state-after #mobile-footer {
  font-family: 'Volvo Novum Semilight';
}

body.state-before #mobile-footer,
body.state-after #mobile-footer {
  margin-top: 0;
  padding-top: 2rem;
}

body.state-before #video-wrapper,
body.state-after #video-wrapper {
  display: none;
}

body.state-before #before-header,
body.state-after #before-header {
  display: flex;
  align-items: center;
}

body.state-before #before-header img,
body.state-after #before-header img {
  height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
}

@media screen and (max-width:1160px) {
  body.state-before #before-agenda-wrapper,
  body.state-after #before-agenda-wrapper {
    width: 100%;
    padding: 0 var(--x-padding-before-state-device);
  }
}

@media screen and (max-width:650px) {
  body.state-before #main-bottom-text-wrapper,
  body.state-after #main-bottom-text-wrapper {
    flex-direction: column;
  }

  body.state-before #content-wrapper,
  body.state-after #content-wrapper {
    padding: 0rem;
  }
}

/* ============================================
   STATE: live
   ============================================ */
body.state-live .live-icon {
  display: flex;
}

/* ============================================
   STATE: live, ondemand (shared)
   ============================================ */
body.state-live main,
body.state-ondemand main {
  padding: 0 !important;
}

body.state-live .pages-render-wrapper,
body.state-ondemand .pages-render-wrapper {
  max-width: 1700px;
}

body.state-live #content-wrapper,
body.state-ondemand #content-wrapper {
  opacity: 0;
  pointer-events: none;
}

body.state-live .before-state,
body.state-ondemand .before-state {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

body.state-live #before-agenda-wrapper,
body.state-ondemand #before-agenda-wrapper {
  transition: .5s;
  transition-delay: .5s;
  width: 100%;
  margin: 0 auto;
}

body.state-live #before-header,
body.state-ondemand #before-header {
  display: none;
}

body.state-live header,
body.state-ondemand header {
  display: flex;
}

body.state-live .header-content,
body.state-ondemand .header-content {
  padding: 0;
}

body.state-live #video-wrapper,
body.state-ondemand #video-wrapper {
  opacity: 1;
}

body.state-live #player,
body.state-ondemand #player {
  width: 100%;
  transition: .5s;
}

@media screen and (max-width:1160px) {
  body.state-live #btn-wrapper .button,
  body.state-live #btn-wrapper .link,
  body.state-ondemand #btn-wrapper .button,
  body.state-ondemand #btn-wrapper .link {
    padding: .9rem;
  }

  body.state-live #before-agenda-wrapper,
  body.state-ondemand #before-agenda-wrapper {
    width: 100%;
    padding: 0 var(--x-padding-before-state-device);
  }

  body.state-live .header-content,
  body.state-ondemand .header-content {
    padding: 0 var(--x-padding-before-state-device);
  }

  body.state-live #agenda-wrapper,
  body.state-ondemand #agenda-wrapper {
    padding-top: 1rem;
  }

  body.state-live #player-footer,
  body.state-ondemand #player-footer {
    padding-bottom: 1rem;
  }
}

/* ============================================
   STATE: after (additional)
   ============================================ */
body.state-after #countdown {
  display: none;
}

/* ============================================
   STATE: ondemand (additional)
   ============================================ */
body.state-ondemand .agenda-card-wrapper {
  cursor: pointer;
}

body.state-ondemand .agenda-card,
body.state-ondemand .agenda-card-mobile {
  pointer-events: all;
}

/* ============================================
   Placeholder Content Visibility
   ============================================ */
/* Hide ondemand content by default */
.placeholder-ondemand {
  display: none;
}

/* In ondemand state: show ondemand content, hide before content */
body.state-ondemand .placeholder-ondemand {
  display: block;
}

body.state-ondemand .placeholder-before {
  display: none;
}

/* ============================================
   Video Player Styling (live/ondemand only)
   ============================================ */
body.state-live #video-wrapper,
body.state-ondemand #video-wrapper {
  width: 100%;
}

body.state-live #player,
body.state-ondemand #player {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
}

body.state-live #video-player,
body.state-live .video-js,
body.state-ondemand #video-player,
body.state-ondemand .video-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

body.state-live .video-js .vjs-tech,
body.state-ondemand .video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   Placeholder / Bottom Banner
   ============================================ */
.placeholder {
  background: url(assets/Desktop-banner.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 1.8rem !important;
}