/* top section */
.top-section .stage {
  width: 100%;
  height: 15em;
  position: relative;
  display: flex;
  flex-direction: column;
  background: none;
  color: var(--color-text);
  margin-bottom: var(--margin);
}

.top-section .stage a {
  background: var(--color-text);
  color: var(--color-background);
  border-radius: var(--border-rd);
  position: relative;
  display: block;
  flex: 1;
}

.top-section .stage h2{
  margin-bottom: var(--marginhalf);
}

.top-section .stage .small{
  margin-top: var(--margin);
  display: none;
}

.top-section .cinema-button {
  width: 100%;
}

.top-section span.small{
  display: block;
  text-align: center;
  margin-bottom: var(--margin);
  font-size: var(--type-small);
}

/* #### */

/* tabs logic */
.tab-block {
  margin-bottom: var(--margin);
  position: sticky;
  top: 5em;
  border-top: 1px solid var(--color-text);
  z-index: 4;
}

.tab-button {
  margin: 0;
  padding: var(--margin);
  width: 100%;
  background: var(--color-background);
  border: 0;
  border-bottom: 1px solid var(--color-text);
  font-size: var(--type-big);
}

.tab-button.active {
  font-family: Tonka;
}

.tab-button:not(.active) {
  display: none;
}

.tab-button span::before {
  content: " ▾";
}

.tab-block.open .tab-button.active {
  background: var(--color-text);
  color: var(--color-background);
}

.tab-block.open .tab-button.active span::before {
  content: " ▴";
}

.tab-block.open .tab-button:not(.active) span {
  display: none;
}

.tab-block.open .tab-button:not(.active) {
  display: block;
}

.tab-content-wrapper:not(.active) {
  display: none;
}




/* home page content */
.tab-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--margin);
}

.tab-content-element {
  border-radius: var(--border-rd);
  overflow: hidden;
  background: var(--color-text);
  color: var(--color-background);
}

.tab-content-element .outterwrapper {
  width: 100%;
  margin-bottom: 1em;
  border-radius: var(--border-rd);
  overflow: hidden;
}

.tab-content-element .container {
  position: relative;
  padding-bottom: 56%;
}

.tab-content-element .innerwrapper {
  padding: var(--margin);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.tab-content-element a {
  color: var(--color-background);
  text-decoration: none;
}

.tab-content-element h1, .tab-content-element h2 {
  margin: 0;
  position: relative;
}

.tab-content-element a h1, .tab-content-element a h2 {
  width: calc(100% - 1.5em);
}

.tab-content-element h1 {
  font-size: var(--type-big);
}

.tab-content-element h2 {
  font-size: var(--type-reg);
}

.tab-content-element .arrowup {
  height: 2em;
  width: 2em;
  position: absolute;
  right: var(--margin);
  top: var(--margin);
}

.tab-content-element .cta {
  position: absolute;
  left: var(--margin);
  bottom: var(--margin);
}

.tab-content-element h1, .tab-content-element h2, .tab-content-element .arrowup, .tab-content-element .cta {
  z-index: 2;
}

.tab-content-element img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}




/* Tab content index */
.movie-table{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  margin-bottom: var(--margin);
}
.movie-table>.table-line{
  border: none;
}
/* remove top line for mobile */
.movie-table .table-line.first{
  display: none;
}
.movie-table .table-line{
  position: relative;
  margin-bottom: 1.25em;
}
.movie-table .table-line ul{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
  align-content: center;
  justify-content: space-between;
}
.movie-table a{
  color: var(--color-text);
}
.movie-table .table-line ul .edition,
.movie-table .table-line ul .title,
.movie-table .table-line ul .author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.movie-table .table-line ul .title,
.movie-table .table-line ul .author {
  width: 100%;
}
.movie-table .table-line ul .edition, .movie-table .table-line ul .duration{
  font-size: var(--type-small);
  order: -1;
} 




/* bit bigger */
@media only screen and (min-width: 600px) {

  /* top section */
  .top-section {
    flex-wrap: wrap;
  }

  .top-section .now-playing {
    width: 100%;
  }

  .top-section .intro, .top-section .stage {
    width: calc(50% - var(--marginhalf));
  }

  .top-section .stage{
    height: auto;
  }
  .top-section .stage .small{
    display: block;
  }

  /* tab system */
  .tab-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 0;
    border-bottom: 1px solid var(--color-text);
    position: revert;
    /* margin-left: calc(var(--margin) * -1);
    margin-right: calc(var(--margin) * -1); */
  }

  .tab-button {
    border: 0;
    flex: 1;
    border: 1px solid var(--color-text);
    margin-bottom: -1px;
    margin-left: -1px;
    border-radius: var(--border-rd) var(--border-rd) 0 0;
  }

  .tab-button.active {
    border-bottom: 0;
  }

  .tab-button:first-of-type {
    margin-left: var(--margin);
  }

  .tab-button:last-of-type {
    margin-right: var(--margin);
  }

  .tab-button:not(.active) {
    display: block;
  }

  .tab-button span {
    display: none;
  }

  .tab-content-wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  /* content */
  .tab-content-element {
    width: 100%;
  }

}



/* actual desktop */
@media only screen and (min-width: 900px) {


  /* tabs */
  .tab-button {
    /* font-size: var(--type-reg); */
    padding: var(--marginhalf);
  }

  /* homepage overview */
  .tab-content-wrapper{
    flex-direction: row;
  }
  .tab-content-element {
    width: calc(50% - var(--marginhalf));
  }
  .tab-content-element.edition {
    width: 100%;
  }
  .tab-content-element.edition .container{
    padding-bottom: 28%;
  }
  .tab-content-element .innerwrapper{
    padding: calc(var(--margin) - .2em) var(--margin);
  }
  .tab-content-element .arrowup {
    right: var(--marginhalf);
    top: var(--marginhalf);
  }

  /* INDEX STYLING */
  .movie-table:not(.participants){
    margin-bottom: 0;
    width: 100%;
  }
  .movie-table:not(.participants) *{
    font-size: var(--type-reg)!important;
  }
  .movie-table:not(.participants) .table-line {
    margin-bottom: 0;
  }
  .movie-table:not(.participants) .table-line.first {
    display: block;
    height: auto;
    background: var(--color-text);
    color: var(--color-background);
    border-radius: var(--border-rd);
  }
  .movie-table:not(.participants) .table-line.first *{
    text-decoration: none;
  }
  .movie-table:not(.participants) .table-line.first li{
    cursor: pointer;
  }
  .movie-table:not(.participants) .table-line.first li:hover{
    text-decoration: underline;
  }
  .movie-table:not(.participants) .table-line.first .selected{
    text-decoration: underline;
  }
  .movie-table:not(.participants) .table-line.first .selected.desc::after{
    content: "";
    background: var(--color-background);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
    margin-left: 0.15em;
    width: 1em;
    height: 1em;
  }
  .movie-table:not(.participants) .table-line.first .selected.asc::after{
    content: "";
    background: var(--color-background);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-down'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cpolyline points='19 12 12 19 5 12'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-down'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cpolyline points='19 12 12 19 5 12'%3E%3C/polyline%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
    margin-left: 0.15em;
    width: 1em;
    height: 1em
  }
  .movie-table:not(.participants) .table-line ul li {
    padding: var(--marginhalf) var(--margin);
  }
  .movie-table:not(.participants) .table-line ul .edition,
  .movie-table:not(.participants) .table-line ul .title,
  .movie-table:not(.participants) .table-line ul .author {
    overflow: unset;
    text-overflow: unset;
    white-space: unset;
  }
  .movie-table:not(.participants) .table-line:not(.block) ul li {
    display: flex;
    align-items: center;
  }
  .movie-table:not(.participants) * {
    order: unset!important;
  }
  .movie-table:not(.participants) .table-line ul>*{
    flex: 1;
    height: 100%;
    margin-left: 0!important;
  }
  .movie-table:not(.participants) .table-line ul>.title{
    flex-grow: 3;
  }
  .movie-table:not(.participants) .table-line ul>.author{
    flex-grow: 2;
  }
  .movie-table:not(.participants) .table-line ul>.edition{
    flex-grow: 2;
  }