/************************/
/* SECTION - IMPRESSION */
/************************/


@media (width > 55em) {
  #impression {
    display:grid;
    grid-template-columns:auto auto;
    align-items:center;

    h2, h2 + p, > ul, nav {
      grid-column:1/-1;
    }
  }
}


#impression > ul {
  position: relative;
  z-index: 1;

  margin:clamp(.5em, 2.5vw, .75em) 0;
  padding:clamp(.5em, 2.5vw, .75em) 0;
  list-style:none;

  /* horizontal scroll */
  display:flex;
  gap:clamp(1em, 4vw, 2em);

  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width: none;
}

#impression > ul::-webkit-scrollbar {
  display: none;
}

#impression > ul li {
  flex-shrink:0;
  scroll-snap-align:center;
  
  width:min(100%, 16em);
  padding:0;

  line-height:1.3em;
}

/* change up background-gradients */
#impression ul li:nth-of-type(1n)  {--i:1;  --angle:118deg; --pos:right bottom;  --angle-h3:-0.5deg; --angle-p: 1.0deg; }
#impression ul li:nth-of-type(2n)  {--i:2;  --angle:28deg;  --pos:right center;  --angle-h3: 0.4deg; --angle-p:-1.0deg; }
#impression ul li:nth-of-type(3n)  {--i:3;  --angle:138deg; --pos:right top;     --angle-h3:-0.6deg; --angle-p: 0.5deg; }
#impression ul li:nth-of-type(4n)  {--i:4;  --angle:48deg;  --pos:center top;    --angle-h3:-0.3deg; --angle-p: 0.7deg; }
#impression ul li:nth-of-type(5n)  {--i:5;  --angle:158deg; --pos:left top;      --angle-h3:-0.7deg; --angle-p: 1.0deg; }
#impression ul li:nth-of-type(6n)  {--i:6;  --angle:68deg;  --pos:left center;   --angle-h3: 0.3deg; --angle-p:-1.0deg; }
#impression ul li:nth-of-type(7n)  {--i:7;  --angle:178deg; --pos:left bottom;   --angle-h3: 0.6deg; --angle-p:-0.3deg; }
#impression ul li:nth-of-type(8n)  {--i:8;  --angle:88deg;  --pos:center bottom; --angle-h3:-0.7deg; --angle-p: 0.7deg; }
#impression ul li:nth-of-type(9n)  {--i:9;  --angle:198deg; --pos:right bottom;  --angle-h3: 0.3deg; --angle-p:-1.0deg; }
#impression ul li:nth-of-type(10n) {--i:10; --angle:108deg; --pos:right center;  --angle-h3: 0.6deg; --angle-p: 1.0deg; }
#impression ul li:nth-of-type(11n) {--i:11; --angle:218deg; --pos:right top;     --angle-h3: 0.4deg; --angle-p: 0.6deg; }
#impression ul li:nth-of-type(12n) {--i:12; --angle:128deg; --pos:center top;    --angle-h3: 0.5deg; --angle-p:-0.6deg; }
#impression ul li:nth-of-type(13n) {--i:13; --angle:178deg; --pos:left bottom;   --angle-h3: 0.6deg; --angle-p:-0.3deg; }
#impression ul li:nth-of-type(14n) {--i:14; --angle:58deg;  --pos:center bottom; --angle-h3:-0.7deg; --angle-p: 0.7deg; }
#impression ul li:nth-of-type(15n) {--i:15; --angle:298deg; --pos:right bottom;  --angle-h3: 0.3deg; --angle-p:-1.0deg; }
#impression ul li:nth-of-type(16n) {--i:16; --angle:118deg; --pos:right center;  --angle-h3: 0.6deg; --angle-p: 1.0deg; }
#impression ul li:nth-of-type(17n) {--i:17; --angle:178deg; --pos:right top;     --angle-h3: 0.4deg; --angle-p: 0.6deg; }
#impression ul li:nth-of-type(18n) {--i:18; --angle:38deg;  --pos:center top;    --angle-h3: 0.5deg; --angle-p:-0.6deg; }

/* de content wrapper */
#impression > ul li > div {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1em;
  text-align:center;
}

/* de content speech bubble */
#impression > ul li > div div {
  position: relative;
  padding:.375em;
  border:solid 1px currentColor;
  background-color:var(--bg-body);

  background-color: var(--bg-first);
}

#impression > ul li > div div::after {
  content:"";
  position:absolute;
  width:.75em;
  aspect-ratio:1;
  background-color:inherit;
  bottom:calc(100% - .25px - .375em);
  left:calc(50% - .5em);
  border:inherit;
  transform:rotate(45deg) skew(15deg, 15deg) ;
  clip-path:polygon(0 0, 100% 0, 0 100%, 0 0);
}

/* de content */
#impression > ul li h3 {
  margin:0;
  font-size:1em;
}

#impression > ul li p {
  margin:.25em 0;
  line-height:1;
}

#impression > ul li a {
  position:relative;
  padding-left:.9em;
  white-space:nowrap;
}

#impression > ul li a::before {
  content:"⇾";
  position:absolute;
  left:0;
  color:var(--clr-body)
}

#impression > ul li picture {
  order:-100;

  padding:3em;

  border-radius:1.5em;
  background-image:var(--wdd-bg-img);

}

#impression > ul li img {
  display:block;
  width:100%;
  height:auto;
}

@media (width > 55em) {
  #impression > ul {
    /* grid */
    display:grid;
    grid-template-columns: repeat( auto-fit, minmax(15.5em, 1fr) );

    /* no more horizontal scroll */
    overflow-x:unset;
    overscroll-behavior-x:unset;  
    scroll-snap-type:unset;
  }

  #impression > ul li {
    width:100%;
  }
}


@media (width > 55em) and (height > 50em) and (prefers-reduced-motion:no-preference) {
  body:not(.doe-normaal) #impression {
    --n:12;
    --time-solar-system:60s;
    --time-planet:30s;
    --size-solar-system:40vh;

    perspective:calc(var( --size-solar-system) * 3);
  }

  body:not(.doe-normaal) #impression > ul {
    position: relative;
    width:100%;
    height:80vh;

    grid-template-columns:1fr;
    place-items:center;
    place-content:center;

    border:dotted 2px currentColor;
    border-radius:50%;

    transform-style:preserve-3d;
    animation:orbit-solar-system var(--time-solar-system) infinite linear;
    transform: translateZ(calc(var(--size-solar-system) * -1 ));

    pointer-events:none;
  }

  body:not(.doe-normaal) #impression > ul::after {
    --globe-dir:-1; 
    --size-orbit-depth:0;

    content:"";
    position:absolute;
    inset:33%;

    border:solid 1px currentColor;
    border-radius:inherit;
    background:var(--bg-lines);
    
    -webkit-mask:radial-gradient(
      closest-side,
      red calc(100% - .5em),
      transparent 0 calc(100% - 1px),
      red 0
    );
    mask:radial-gradient(
      closest-side,
      red calc(100% - .5em),
      transparent 0 calc(100% - 1px),
      red 0
    );

    animation:orbit-solar-system var(--time-solar-system) infinite linear reverse;
  }

  body:not(.doe-normaal) #impression > ul li {
    width: 16em;
    grid-area:1/1;
    align-items:center;

    animation:orbit-planet var(--time-planet) calc( var(--time-planet) / var(--n) * var(--i) * -1 ) infinite linear;
    transform-style:preserve-3d;
  }

  body:not(.doe-normaal) #impression > ul li > div {
    --globe-dir:-1; 
    --size-orbit-depth:0;
    animation:orbit-solar-system var(--time-solar-system) infinite linear;
    transform-style:preserve-3d;
  }

  body:not(.doe-normaal) #impression > ul li > div div {
    transform-style:preserve-3d;
  }

  body:not(.doe-normaal) #impression > ul li > div div::before {
    content:"";
    position:absolute;
    inset:0;
    z-index: 1;
    background:var(--bg-lines);

    backface-visibility: hidden;
    transform:rotateY(.5turn);
  }

  body:not(.doe-normaal) #impression > ul li h3,
  body:not(.doe-normaal) #impression > ul li p {
    position: relative; 
    backface-visibility: hidden;
  }

  body:not(.doe-normaal) #impression > ul li p a {
    pointer-events:all;
  }

  body:not(.doe-normaal) #impression > ul li picture {
    width:calc(var( --size-solar-system) * 4 / var(--n));
    padding:2em;
    border-radius:1em;

    transform-style:preserve-3d;
  }

  body:not(.doe-normaal) #impression > ul li picture::before {
    content:"";
    position:absolute;
    inset:2em;

    border:1px solid currentColor;
    background:var(--bg-lines);
    
    transform:rotateY(.5turn);
    backface-visibility: hidden;
  }

  body:not(.doe-normaal) #impression > ul li img {
    backface-visibility: hidden;
  }

  @keyframes orbit-solar-system {
      /* in between keyframes are required for safari */
      0%   { transform: translateZ( var(--size-orbit-depth, calc(var(--size-solar-system) * -.5)) ) rotate3d( 1, 1, 1, calc(0deg   * var(--globe-dir, 1)) ); }
      25%  { transform: translateZ( var(--size-orbit-depth, calc(var(--size-solar-system) * -.5)) ) rotate3d( 1, 1, 1, calc(90deg  * var(--globe-dir, 1)) ); }
      50%  { transform: translateZ( var(--size-orbit-depth, calc(var(--size-solar-system) * -.5)) ) rotate3d( 1, 1, 1, calc(180deg * var(--globe-dir, 1)) ); }
      75%  { transform: translateZ( var(--size-orbit-depth, calc(var(--size-solar-system) * -.5)) ) rotate3d( 1, 1, 1, calc(270deg * var(--globe-dir, 1)) ); }
      100% { transform: translateZ( var(--size-orbit-depth, calc(var(--size-solar-system) * -.5)) ) rotate3d( 1, 1, 1, calc(360deg * var(--globe-dir, 1)) ); }
    }

  @keyframes orbit-planet {
    0%   { transform: rotateY(0turn)  translateZ( var(--size-solar-system) ) rotateY(0turn) rotateZ(0turn); }
    100% { transform: rotateY(-1turn) translateZ( var(--size-solar-system) ) rotateY(1turn) rotateZ(-1turn); }
  }

  /* de checkbox*/
  #impression form label {
    display:flex;
  }
}



/* NAV */

#impression nav ul {
  max-width:22em;
  display:flex;
  justify-content:center;
  gap:2%;

  margin:0 auto;
  padding:0;
  list-style:none;
}

#impression nav li {
  display:block;
  padding:0;
  flex-basis:0;
  flex-grow:1;
  aspect-ratio:4/3;
  border-radius:.25em;

  background-image: var(--wdd-bg-img);
}


#impression nav a {
  display:block;
  padding:.4em;

  place-content:center;
  place-items:center;

  outline:solid .15em transparent;
  outline-offset:.15em;
  outline:none;

  border-radius:inherit;
  box-shadow:
    0 0 0 .15em var(--bg-body),
    0 0 0 .3em transparent;

  transition:.1s;
}

#impression nav a.current {
  /* outline-color:var(--wdd-accent); */
  box-shadow:
    0 0 0 .1em var(--bg-body),
    0 0 0 .2em var(--wdd-accent);
}

#impression nav img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* border-radius:calc(.25em - 1px); */
}

#impression nav a:focus-visible img {
  scale:.9;
}

@media (prefers-reduced-motion:no-preference) {
  #impression nav img {
    transition:.2s;
  }

  #impression nav a:focus-visible img {
    scale:.65
  }
}

@media (width > 55em) {
  #impression nav {
    display: none;
  }
}





/* DOE MAAR NORMAAL */

@media (width > 55em) {
  #impression > form {
    margin:0;
  }
}


/* MORE */

#impression .more {
  justify-content:center;
}

@media (width > 55em) {
  #impression .more {
    margin:0;
    justify-self:end;
  }
}




/* PRINT */

@media print {
  #impression > ul {
    /* grid */
    display:grid;
    grid-template-columns:repeat(auto-fit, 12em);

    /* no more horizontal scroll */
    overflow-x:unset;
    overscroll-behavior-x:unset;  
    scroll-snap-type:unset;
  }
  
  #impression > ul li {
    border:none;
  }

  #impression > ul li div {
    padding:.5em 0;
  }

  #impression > ul li a {
    white-space:normal;
    word-break: break-all;
  }

  #impression nav {
    display: none;
  }
}





/*********************/
/* SECTION - COURSES */
/*********************/

#courses {
  border:solid 1px currentColor;
  padding:clamp(1em, 4vw, 2em);

  background-image:var(--wdd-bg-img);
  background-size:100% .25em;
  background-repeat:no-repeat;

  overflow:hidden;
}

#courses div {
  overflow-x: auto;
  overscroll-behavior-x:contain;
  scrollbar-width: none;
  padding-inline:clamp(1em, 4vw, 2em);
  margin-inline:calc(clamp(1em, 4vw, 2em) * -1);
}

#impression ul::-webkit-scrollbar {
  display: none;
}

#courses table {
  min-width:40em;
  border-spacing:.25em;
  
}

th:nth-of-type(1) { 
  width:12%;
  min-width:4em;
}
#courses th:nth-of-type(2) {
  width:24%;
  min-width:7em;
}
#courses th:nth-of-type(3) {
  width:6%;
  min-width:2em;
}
#courses th:nth-of-type(4) {
  width:24%;
  min-width:7em;
}
#courses th:nth-of-type(5) {
  width:34%;
  min-width:10em;
}

#courses td {
  height:min(20vh, 8em);
  padding:1em .5em;

  border:solid 1px currentColor;

  line-height:1.2em;
  text-align:center;
  
  background-color: var(--bg-first);
}

#courses td .vrl {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform:rotate(180deg);
}

#courses td em {
  display:block;
  font-variant: small-caps;
  font-style:normal;
}

#courses td.low {
  height:1em;
}

#courses td i {
  display:inline-block;
  max-width:max(7em, 70%);
}