/* additions to the frozen copy (scripts/cleanup.py) */

/* YouTube "click to play" (assets/js/youtube.js): the preview image until a click, at most the
   old 870x520 video size and never wider than the screen */
.yt {
  position: relative;
  width: 100%;
  max-width: 870px;
  aspect-ratio: 870 / 520;
  margin: auto;
  background: #000 center / cover no-repeat;
  cursor: pointer;
}
.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  border: 0;
  border-radius: 12px;
  background: #e1251b;
  cursor: pointer;
}
.yt-play::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 27px;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
}

/* phones: the partner logos stacked ran out of their 240px grey band and 15px past the screen */
@media (max-width: 767px) {
  #partners { height: auto; padding-bottom: 24px; }
  #partners .row { margin-left: 0; margin-right: 0; }
  #partners img { max-width: 100%; height: auto; }
}

/* the banner (bjqs slider, #quotes): the photos are 1245x281, the slider forced them into 7:3 and
   stretched them; now about their own shape (cropped a little when wider, never stretched) */
#quotes,
#quotes .bjqs-wrapper,
#quotes ul.bjqs,
#quotes .bjqs-slide {
  height: clamp(260px, 23vw, 420px) !important;
}
#quotes .bjqs-slide img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}
/* the quote on top: no wider than the screen */
#quotes .bjqs-caption {
  width: auto;
  max-width: 900px;
  left: 15px;
  right: 15px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  #quotes .bjqs-caption {
    bottom: 12px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 20px;
  }
}

/* the partner logos: bigger on wide screens (less side padding), apart and not too big on phones */
#partners .partner { padding: 0 10px; }
@media (max-width: 767px) {
  #partners img { max-width: 260px; }
  #partners .partner { margin-bottom: 12px; }
}

/* phones: a menu button (the menu was hidden with no way to open it); the menu opens under the
   logo as a list in the site's colours */
@media (max-width: 767px) {
  .navbar { height: auto; min-height: 120px; }
  .navbar .navbar-header { height: 120px; }
  .navbar .navbar-toggle { margin: 40px 15px 0 0; padding: 12px 10px; border: 1px solid #ddd; border-radius: 5px; background: #fff; }
  .navbar .navbar-toggle .icon-bar { width: 24px; height: 3px; background: #888; }
  .navbar .navbar-collapse { border: 0; box-shadow: none; padding-bottom: 12px; }
  .navbar .navbar-collapse.in { overflow: visible; }
  .navbar .navbar-nav { margin: 0; }
  .navbar .navbar-nav li { height: auto; margin: 4px 0; }
  .navbar .navbar-nav li a { margin-top: 0; padding: 12px 15px; border-radius: 5px; }
  .navbar-nav .klas a { color: #6bbb80 !important; }
  .navbar-nav .school a { color: #d9a20f !important; }
  .navbar-nav .lerarenopleiding a { color: #17a5a6 !important; }
  .navbar .navbar-nav li a.active, .navbar .navbar-nav li a:hover { color: #fff !important; }
}

/* "Mijn praktijkvoorbeeld": the two columns (40% / 55%, set in the page) one under the other on phones */
.testimonial .btn[disabled] { opacity: .6; }
@media (max-width: 767px) {
  /* one column, the send button last (it sat between the fields and the text box) */
  .testimonial { display: flex; flex-direction: column; }
  .testimonial .pull-left,
  .testimonial .pull-right { display: contents; }
  .testimonial br { display: none; }
  .testimonial .btn { order: 2; align-self: flex-start; margin-top: 15px; }
  .testimonial textarea { height: 200px !important; }
}

/* Klas: items can be tapped (assets/js/scripts.js); on phones the empty middle box is lower */
#main .sortable .list-group .list-group-item { cursor: pointer; }
@media (max-width: 767px) {
  #main .sortable .list-group .list-group-item { height: auto !important; min-height: 90px; }
  #main .sortable .middle { height: auto !important; min-height: 120px; }
  #main .sortable .middle.is-empty::before {
    content: "Tik op een domein en een element";
    display: block; padding: 46px 10px; text-align: center; color: #999;
  }
}

/* phones: a wide table scrolls by itself instead of the whole page */
@media (max-width: 767px) {
  #main table { display: block; max-width: 100%; overflow-x: auto; }
}