/******/
/* H1 */
/******/

main header .h1--video {
  grid-column:inset/medium;

  display:grid;
  align-items:end;
  align-content:end;

  min-height:6em;
  margin:
    var(--gap)
    0
    calc(var(--gap) - 1rem);
  padding:var(--gap);

  font-size:1.25em;
  font-size:clamp(1.25em, 5.5vw, 1.5em);
  font-weight:400;
  line-height:calc(1.3 * (1 + var(--setting--whitespace) * .05 ));
  color:var(--clr-root);

  background-image:
  repeating-linear-gradient(
    45deg,
    transparent 0 1.2em, 
    var(--bg-root) 0 1.3em
  ), 
  repeating-linear-gradient(
    135deg,
    transparent 0 .3em, 
    var(--bg-root) 0 .4em
  ), 
  linear-gradient(
    155deg,
    var(--bg-p--header),
    transparent
  );
}


main header .h1--video strong {
  z-index:0;
  display:inline-block;
  font-weight:700;
  background:none;
  padding:0;
  color:var(--clr-root);
}

main header .h1--video strong::after {
  content:initial;
}





/*********/
/* VIDEO */
/*********/

/* video */
.section--content__video {
  padding:56.25% 0 0 0;
}

/* print */
@media only print {
  .section--content__video {
    display:none;
  }
}





/****************/
/* TRANSCRIPTIE */
/****************/

.section--content__transcriptie {
  display:grid;
}

.section--content__transcriptie p {
  margin-left:calc( var(--gap) * 1 );
}

.section--content__transcriptie p strong {
  display:inline-block;
  margin-left:calc( var(--gap) * -1 );
  margin-right:.25em;
  padding:0 1em;
}

/* transcriptie - names */
.strong--nr {
  background-color: var(--blue);
}
.strong--tv {
  background-color: var(--purple);
}
.strong--jao {
  background-color: var(--pink);
}
.strong--ph {
  background-color: var(--orange);
}
.strong--th {
  background-color: var(--yellow);
}
.strong--kz {
  background-color: var(--green);
}
.strong--am {
  background-color: var(--turquoise);
}
.strong--knb {
  background-color: var(--blue);
}
.strong--rp {
  background-color: var(--purple);
}
.strong--aw {
  background-color: var(--pink);
}
.strong--sp {
  background-color: var(--orange);
}

/* transcriptie - names - dark */
@media only screen {
  :root[data-color-scheme="dark"] .strong--nr {
    background-color: var(--blue--d);
  }
  :root[data-color-scheme="dark"] .strong--tv {
    background-color: var(--purple--d);
  }
  :root[data-color-scheme="dark"] .strong--jao {
    background-color: var(--pink--d);
  }
  :root[data-color-scheme="dark"] .strong--ph {
    background-color: var(--orange--d);
  }
  :root[data-color-scheme="dark"] .strong--th {
    background-color: var(--yellow--d);
  }
  :root[data-color-scheme="dark"] .strong--kz {
    background-color: var(--green--d);
  }
  :root[data-color-scheme="dark"] .strong--am {
    background-color: var(--turquoise--d);
  }
  :root[data-color-scheme="dark"] .strong--knb {
    background-color: var(--blue--d);
  }
  :root[data-color-scheme="dark"] .strong--rp {
    background-color: var(--purple--d);
  }
  :root[data-color-scheme="dark"] .strong--aw {
    background-color: var(--pink--d);
  }
  :root[data-color-scheme="dark"] .strong--sp {
    background-color: var(--orange--d);
  }
}





/****************/
/* OTHER VIDEOS */
/****************/

ul.ul--videos {
  margin:0;
  padding:calc(1em * var(--line-height-factor)) 0 0;
  list-style:none;

  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,16em), 1fr));
  gap:var(--gap);
}

@supports (list-style-type:"") {
  ul.ul--videos {
    list-style:initial;
    list-style-type:"";
  }
} 

/* a video */
ul.ul--videos a {
  display:flex;
  gap:.5em;
  align-items:start;

  color:var(--clr-root);
  text-decoration-line:none;
}

ul.ul--videos a[href]:hover {
  text-decoration-line:underline;
}

ul.ul--videos a[aria-current] {
  font-weight:700;
}

ul.ul--videos a[aria-current]:hover {
  text-decoration-line:none;
  cursor:default;
}

/* a video - icon */
ul.ul--videos svg {
  display:block;
  width:2.25em;
  height:2.25em;
  flex-shrink:0;

  margin-top:calc( (1lh - 2.25em) * .5 );
}

/* print */
@media only print {
  #videos {
    display:none;
  }
}