/*
 * The speaker popup component.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.speaker-popup {
  align-items:center;
  background-color:#18181866;
  display:flex;
  height:calc(var(--mobile-vh)*100);
  justify-content:center;
  left:0;
  opacity:0;
  pointer-events:none;
  position:fixed;
  top:0;
  transition:opacity .4s cubic-bezier(.25,.25,0,1);
  width:100%;
  z-index:-1;
}

.speaker-popup.is-active {
  opacity:1;
  pointer-events:auto;
  z-index:100;
}

.speaker-popup.is-active .speaker-popup--inner {
  opacity:1;
  transform:translateY(0);
}

.speaker-popup.is-closing {
  pointer-events:auto;
  z-index:100;
}

.speaker-popup.is-closing .speaker-popup--inner {
  opacity:0;
  transform:translateY(110%);
}

.speaker-popup .speaker-popup--inner {
  background-color:#f1ede4;
  display:flex;
  flex-direction:column;
  gap:48px;
  margin-inline:auto;
  max-height:calc(var(--mobile-vh)*90);
  opacity:0;
  overflow:auto;
  padding-bottom:48px;
  padding-top:24px;
  transform:translateY(110%);
  transition:opacity .8s cubic-bezier(.25,.25,0,1),transform .8s cubic-bezier(.25,.25,0,1);
  width:calc(var(--grid-column-width)*12 + var(--grid-gap)*11);
}

@media screen and (max-width:1440px) {

  .speaker-popup .speaker-popup--inner {
    gap:32px;
  }
}

@media screen and (max-width:1199px) {

  .speaker-popup .speaker-popup--inner {
    width:100%;
  }
}

.speaker-popup .speaker-popup__close-btn {
  align-items:center;
  align-self:flex-end;
  border:1px solid #ccc;
  color:#181818;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  margin-right:var(--offset-x);
  width:48px;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .speaker-popup .speaker-popup__close-btn:not(:disabled):hover {
    background-color:#181818;
    color:#fff;
  }
}

@media screen and (max-width:1440px) {

  .speaker-popup .speaker-popup__close-btn {
    height:32px;
    width:32px;
  }
}

.speaker-popup .speaker-popup__close-btn svg {
  --size:10px;
  height:var(--size);
  width:var(--size);
}

@media screen and (max-width:1440px) {

  .speaker-popup .speaker-popup__close-btn svg {
    --size:8px;
  }
}

.speaker-popup [class*=js-reveal--] {
  -webkit-clip-path:none;
  clip-path:none;
  opacity:1;
  transform:none;
}

.speaker-popup .speaker-contacts {
  position:static;
}

.speaker-popup .speaker-info {
  gap:40px;
}

@media screen and (max-width:1440px) {

  .speaker-popup .speaker-info {
    gap:32px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-popup .speaker-info {
    gap:40px;
  }
}

.speaker-popup .speaker-events__list {
  grid-template-columns:repeat(2,1fr);
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-popup .speaker-events__list {
    grid-template-columns:1fr;
  }
}

.speaker-popup .speaker-bio__description {
  padding-right:0;
}