:root {
  --video-transparent: #ffffffcc;
  --video-btn-bg: #333333c7;
  --video-btn-bg-hover: #222323;
  --video-svg-fill: #F3F3F9;
  --video-main-color: #1560BD;
}

* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

html {
  overflow-x: hidden; }

.version {
  position: fixed;
  top: 60px;
  left: 20px;
  z-index: 100;
  color: #fff; }

.blur-wrapper {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0; }
.blur-img {
 /* transition: opacity 0.5s;*/
  opacity: 0;
  position: absolute;
  left: -5%;
  top: -5%;
  width: 114%;
  height: 114%;
  filter: brightness(0.4) blur(20px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  max-height: 114%;
  /* 110% + neg offset = sama vaikutus kuin scale(1.1), toimii iPhonella transform-scale-ongelman sijaan */
  }

.blur-img.visible {
  opacity: 1; }

html, body {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
}

body * {
    max-height: 100vh;
}

html {
  overflow-y: hidden !important; }

.swiper-container {
  position: relative; }

  div.ag-video-text-wrap {
    width: 100%;
    max-width: 700px;
    height: 100%;
    justify-content: center;
    margin-right: 50px;
    max-height: 80%;
    align-self: center;
    overflow: hidden;
    border-radius: 20px;
}

div.ag-video-text-wrap .ag-video-text-wrap-content {
    background: #222323;
    padding: 20px;
    border-radius: 20px;
    overflow-y: auto;
    touch-action: pan-y;
    height: 100%;
    max-height: max-content;
    position: relative;
}

.ag-video-article-text > :last-child {
 padding-bottom: 20px;
}

div.ag-video-article-text {
    max-height: max-content;
}

.ag-article-close-wrap {
    position: absolute;
    right: 10px;
    top: 10px;
}

div.ag-video-text-wrap .ag-video-text-wrap-content * {
    color: #fff;
}


div.controls-wrapper:has(.ag-article-btn) {
    width: 100%;
}

div.navigation-btn-wrap {
    position: absolute;
    height: 100%;
    right: 15px;
    width: max-content;
    justify-content: center;
    gap: 30px;
}

.ag-video-gallery-nav-btn {
  background: var(--video-btn-bg);
  border-radius: 25px;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 42px;
  font-size: 30px;
  font-weight: bold;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  left: calc(50% + ((((100vh*0.8)/16)*9)/2) + 30px);
  }

.ag-video-gallery-nav-btn svg {
  fill: var(--video-svg-fill);
  width: 16px;
  height: 16px;
  display: flex; }

.ag-video-gallery-nav-btn.swiper-btn-prev {
  transform: rotate(90deg);
  top: calc(50% - 70px); }

.ag-video-gallery-nav-btn.swiper-btn-next {
  transform: rotate(90deg);
  top: calc(50% + 10px); }

.ag_spa_button {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }

.video-wrapper {
  position: relative; }

.ag-video-gallery-nav-btn.prev {
  top: calc(50% + 5px); }

.ag-video-gallery-nav-btn.next {
  top: calc(50% - 45px); }

.ag-video-gallery-nav-btn svg, .ag-video-gallery-nav-btn svg path {
  pointer-events: none; }

.custom-progress.seek .timebar {
  transition: none; }

  .ag-video-text-wrap:not(:has(.ag-video-article-text)) {
    display: none;
  }

/* Article styles */

.video-embargo-logo img {
    width: 100%;
    max-width: 40px !important;
}

.video-embargo-logo {
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.ag-video-text-wrap h1 {
    font-size: 30px;
    margin-bottom: 16px;
    padding-right: 20px;
}

.ag-video-text-wrap p {
    margin-bottom: 16px;
    line-height: 1.4;
}

.ag-video-text-wrap h2 {
    margin: 10px 0 10px;
    font-size: 20px;
}

.ag-video-article-text a {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: var(--video-main-color);
}

/* Article styles END */

.ag-video-text-wrap-content::-webkit-scrollbar {
  width: 6px;
}

.ag-video-text-wrap-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.ag-video-text-wrap-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  cursor: pointer;
}

.text-wrapper-content {
  position: relative; }

.text-wrapper-expand-btn {
  position: absolute;
  right: 0;
  width: fit-content !important;
  top: 7px;
  opacity: 1;
  transition: opacity 0.4s; }

.text-wrapper-expand-btn svg {
  height: 20px;
  fill: var(--color-b); }

.text-wrapper.open .text-wrapper-expand-btn {
  opacity: 0; }

.video-wrapper {
  position: relative; }

.video-wrapper .Video {
  position: relative;
  justify-content: center; }

/* Napit videon päällä oikeassa alakulmassa (jokaisella slidella omat) */
.ag-video-corner-buttons {
  position: absolute;
  right: 15px;
  bottom: 15px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none; }

.ag-video-corner-buttons > * {
  pointer-events: auto; }

.ag-video-corner-buttons .ag-article-btn-wrap,
.ag-video-corner-buttons .ag-share-btn-wrap {
  position: static;
  left: auto;
  bottom: auto; }

.ag-video-corner-buttons .ag-mute-btn-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--video-btn-bg);
  border-radius: 25px;
  cursor: pointer; }

.ag-video-corner-buttons .ag-mute-btn-wrap:hover {
  background: var(--video-btn-bg-hover); }

.ag-mute-btn-wrap .mute.hide,
.ag-mute-btn-wrap .unmute.hide {
  display: none; }

.ag-mute-btn-wrap svg {
  height: 20px;
  width: 20px;
  fill: var(--video-svg-fill); }

.controls-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer; }

.controls-wrapper .ag-video-corner-buttons {
  margin-top: auto;
  align-self: flex-end; 
}

.controls-wrapper svg {
  height: 40px; }

/* Home: sivun vasen yläkulma (poistuu galleriasta) */
a.ag-home-link {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 30;
  text-decoration: none; }

div.home-wrapper {
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--video-btn-bg);
  border-radius: 25px;
  display: flex;
  position: relative; }

a.ag-home-link:hover .home-wrapper {
  background: var(--video-btn-bg-hover); }

.home-wrapper a {
  display: flex; }

.home-wrapper svg.home {
  width: 15px;
  height: 15px;
  fill: var(--video-svg-fill); }

.Video .hide {
  display: none; }

.timebar-container {
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  bottom: 0;
  cursor: pointer;
  z-index: 100;
  width: 100%;
  height: 5px; }

.timebar {
  height: 5px;
  background: var(--video-main-color);
  border-radius: 2px; }

div.mute-wrapper {
  position: fixed;
  right: 15px;
  bottom: 15px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--video-btn-bg);
  border-radius: 25px;
  display: flex;
  z-index: 20; }

div.custom-mute {
  left: calc(50% + ((((100vh*0.8)/16)*9)/2) + 30px);
  bottom: 140px; }

.custom-mute .mute.hide, .custom-mute .unmute.hide {
  display: none; }

.custom-mute svg {
  fill: var(--video-svg-fill); }

.mute-wrapper svg {
  height: 30px;
  width: 20px; }

.Video svg path {
  fill: var(--video-svg-fill); }

.Video svg {
  width: 20px; }

/* Fix fox different widhts on mute and unmute */
.mute {
  margin-right: 2px; }

.share-wrapper span {
  background: var(--color-b) !important; }

.share-wrapper {
  margin-bottom: var(--small); }

.share-wrapper svg path {
  fill: var(--color3); }

.auto-next-bar {
  width: 0px;
  height: 3px;
  background: white;
  /*transition: width 500ms linear;*/
  border-radius: 2px; }

.auto-next-bar-wrapper {
  position: absolute;
  top: 55%;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px; }

.ag-video-end-overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  border-radius: 10px;
  padding: 10px;
  gap: 10px;
  width: 70px;
}
.ag-video-end-overlay.hide {
  display: none; }
.ag-video-end-overlay .ag-video-end-replay-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--video-btn-bg, rgba(0,0,0,0.5));
  color: var(--video-svg-fill, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; }
.ag-video-end-overlay .ag-video-end-replay-btn:hover {
  background: var(--video-btn-bg-hover, rgba(0,0,0,0.7)); }
.ag-video-end-overlay .ag-video-end-replay-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor; }
.ag-video-end-overlay .ag-video-end-replay-btn.hide {
  display: none; }

.ag-video-end-timer-bar-wrapper {
  width: 100%;
  max-width: 120px;
  height: 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  overflow: hidden; }
.ag-video-end-timer-bar {
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  transition: width 50ms linear; }

.ag-video-gallery-nav-btn:hover, .home-wrapper:hover, .mute-wrapper:hover {
  background: var(--video-btn-bg-hover);
  transition: all 0.3s; }

.swiper-btn-wrap.none {
  display: flex !important;
  opacity: 0;
  }

div.mute-wrapper:not(.custom-mute) {
  display: none; }

/* Article / Share / Mute - oletuksena videon cornerissa; vanhat fixed-säännöt ei enää käytössä */
.ag-article-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center; }

.ag-article-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 25px;
  background: var(--video-btn-bg);
  color: var(--video-svg-fill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; }

.ag-article-btn:hover {
  background: var(--video-btn-bg-hover); }

.ag-article-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor; }

.ag-share-btn-wrap {
  display: inline-flex; }

.ag-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0 12px;
  min-width: 40px;
  height: 40px;
  border: none;
  border-radius: 25px;
  background: var(--video-btn-bg);
  color: var(--video-svg-fill);
  cursor: pointer;
  font-size: 0.9rem;
  justify-content: center;
  width: 40px;
}

.ag-share-btn:hover {
  background: var(--video-btn-bg-hover); }

.ag-share-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor; }

/* Artikkelitekstilohko: header + sulku-X */
/* Artikkelipaneeli: sileä sulkeutumisanimaatio max-width + max-height (flex width ei animoidu) */
.ag-video-text-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 1;
  padding: 0;
  margin: 0;
  border: none;
  transition: max-width 0.15s ease-out, max-height 0.15s ease-out, opacity 0.35s ease-out, min-width 0.15s ease-out; }

.ag-video-text-wrap.ag-article-text-hidden {
  max-width: 0;
  max-height: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
  pointer-events: none;
  transition: max-width 0.4s ease-out, max-height 0.4s ease-out, opacity 0.35s ease-out, min-width 0.4s ease-out; }


.ag-video-text-wrap:not(.ag-article-text-hidden) .ag-article-text-body {
  opacity: 1; }

.ag-article-text-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 12px;
  min-height: 40px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.04); }

.ag-article-close-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-b, #333);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; }

.ag-article-close-btn:hover {
  background: rgba(0, 0, 0, 0.08); }

.ag-article-close-btn svg,
.ag-article-close-icon {
  width: 1em;
  height: 1em;
  fill: currentColor; }

.ag-article-text-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px; }

.ag-article-text-body::-webkit-scrollbar {
  width: 6px; }

.ag-article-text-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px; }

svg.pause {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--video-btn-bg);
  border-radius: 25px;
  display: flex;
  z-index: 20;
  padding: 10px; }

.ag_spa_datawrapper:has(.extra-page) {
  height: 100%;
  display: flex; }

.extra-page > div {
  height: 100%;
  align-items: center;
  justify-content: center; }

.extra-page a {
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  text-decoration: underline; }

/* Mobile view: breakpoint conffista (mobileBreakpoint), luokka .ag-mobile asetetaan JS:llä */
.ag-mobile {
  overflow-y: hidden; }
.ag-mobile .ag-video-corner-buttons {
  right: 12px;
  bottom: 12px;
  gap: 6px; }
.ag-mobile .content-wrapper {
  flex-direction: column;
  padding: 0;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 0; }
/* Mobiilissa artikkeli kiinni oletuksena; auki vain kun .ag-article-text-open */
.ag-mobile .video-wrapper {
  width: 100% !important;
  margin: 0;
  flex: 0 0 auto;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.35s ease-out; }
.ag-mobile .content-wrapper:has(.ag-video-text-wrap.ag-article-text-open) .video-wrapper {
  height: calc(var(--vh, 1vh) * 50); }
.ag-mobile .video-wrapper .Video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
.ag-mobile .video-wrapper .Video video {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: calc(var(--vh, 1vh) * 100);
  object-fit: contain;
  transition: height 0.35s ease-out, max-height 0.35s ease-out, max-width 0.35s ease-out; }
.ag-mobile .content-wrapper:has(.ag-video-text-wrap.ag-article-text-open) .video-wrapper .Video video {
  height: calc(var(--vh, 1vh) * 50); }
.ag-mobile .text-wrapper {
  position: relative;
  top: auto;
  width: 100% !important;
  margin: 0;
  flex: 0 0 auto;
  height: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color3);
  padding-bottom: 0;
  transition: height 0.35s ease-out; }
.ag-mobile .content-wrapper:has(.ag-video-text-wrap.ag-article-text-open) .text-wrapper {
  height: calc(var(--vh, 1vh) * 50);
  padding-bottom: 8px; }
.ag-mobile .text-wrapper .ag-video-text-wrap {
  flex: 1;
  min-height: 0;
  max-width: none;
  max-height: 0;
  overflow: hidden; }
.ag-mobile .text-wrapper .ag-video-text-wrap.ag-article-text-open {
  max-height: none; }
.ag-mobile .text-wrapper .ag-article-text-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0; }
.ag-mobile .mute-wrapper {
  bottom: 65px;
  right: 15px; }
.ag-mobile .desktop-controls-wrapper {
  display: none; }
.ag-mobile div.mute-wrapper,
.ag-mobile div.home-wrapper {
  width: 40px;
  height: 40px; }
.ag-mobile .swiper-btn-prev,
.ag-mobile .swiper-btn-next {
  display: none !important; }
.ag-mobile .swiper {
  width: 100% !important;
 }
.ag-mobile .navigation-btn-wrap {
  display: none; }
.ag-mobile .ag-video-mob-share {
  position: absolute;
  right: 15px;
  bottom: 110px;
  width: 30px;
  height: 30px; }
.ag-mobile .ag-video-mob-share span {
  border-radius: 25px !important;
  background-color: var(--video-btn-bg) !important;
  width: 30px;
  height: 30px; }
.ag-mobile .ag-video-mob-share a {
  display: block;
  padding: 0 !important; }
.ag-mobile .ag-video-gallery-wrapper .swiper-slide {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden; }

/* Fallback: ennen JS:ää mobiilissa artikkeli kiinni (ei välähdystä) */
@media only screen and (max-width: 800px) {
  html:not(.ag-mobile) .content-wrapper {
    flex-direction: column;
    height: 100vh; }
  html:not(.ag-mobile) .video-wrapper {
    width: 100% !important;
    height: 100vh; }
  html:not(.ag-mobile) .text-wrapper {
    height: 0;
    overflow: hidden; }
  html:not(.ag-mobile) .text-wrapper .ag-video-text-wrap {
    max-height: 0;
    overflow: hidden; }
  .content-wrapper:has(.ag-article-btn-wrap) .ag-video-text-wrap:not(.ag-article-text-hidden) {
    margin: 0;
    border-radius: 0; }
  .content-wrapper:has(.ag-article-btn-wrap) .ag-video-text-wrap:not(.ag-article-text-hidden) .ag-video-text-wrap-content {
    border-radius: 0; }
}

@media only screen and (min-width: 801px) {
  .blur-img{
    transform: scale(1.15);
  }
  div.content-wrapper {
    gap: 80px;
    justify-content: center;
    padding: 0 20px;
    transition: gap 0.15s;
  }

  .content-wrapper:has(.ag-video-article-text) .video-wrapper {
    max-width: max-content;
  }

  .content-wrapper:has(.ag-article-text-hidden) {
    padding: 0;
    gap: 0;
}

  .controls-wrapper .ag-video-corner-buttons {
    right: -60px;
  }

  .controls-wrapper {
    height: 80%;
    aspect-ratio: 9/16;
    left: unset;
    top: unset;
    right: unset;
    bottom: unset; }



  /* Kun artikkeli näkyvissä: video vasemmalle, teksti animoiden oikealle */



  .content-wrapper {
    height: calc(var(--vh, 1vh) * 100); }

  div.text-wrapper {
    background: var(--color3); }

  div.Video {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; }

  .text-wrapper {
    overflow-y: scroll;
    height: 100%; }

  .video-wrapper video {
    position: relative; }

  .video-wrapper .Video video {
    display: flex;
    max-width: max-content;
    max-height: 80%;
    border-radius: 20px; }

  .text-wrapper .home-wrapper, .text-wrapper .mute-wrapper {
    position: initial; }

  .text-wrapper .desktop-controls-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-flow: row-reverse;
    align-items: center;
    background: var(--color1);
    border-radius: 4px;
    padding: 5px 10px;
    margin-bottom: 10px; }
  .mute-wrapper {
    display: flex; }

  .desktop-controls-wrapper svg {
    fill: #ffffffcc; }

  .mute-wrapper:not(.custom-mute) {
    display: none;
    /*display: none;*/ } 
  
  }