/*
 * The event speakers section.
 *
 * 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.
 */

.event-speakers {
  display:flex;
  flex-direction:column;
  gap:96px;
  padding-top:160px;
  width:100%;
}

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

  .event-speakers {
    gap:56px;
    padding-top:128px;
  }
}

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

  .event-speakers {
    gap:32px;
    padding-top:0;
  }
}

.event-speakers__heading {
  align-items:flex-start;
  display:flex;
  justify-content:space-between;
  padding-inline:var(--offset-x);
  width:100%;
}

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

  .event-speakers__heading {
    padding-left:var(--offset-x);
    padding-right:0;
  }
}

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

  .event-speakers__heading {
    align-items:flex-start;
    flex-direction:column;
    gap:24px;
    padding-inline:var(--offset-x);
  }
}

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

  .event-speakers__heading-title {
    width:calc(var(--grid-column-width)*2.25 + var(--grid-gap)*1.25);
  }
}

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

  .event-speakers__heading-title {
    width:100%;
  }
}

.event-speakers__heading-description {
  padding-right:calc(var(--grid-column-width)*.5);
  width:calc(var(--grid-column-width)*5.5 + var(--grid-gap)*4.5);
}

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

  .event-speakers__heading-description {
    padding-right:0;
    width:calc(var(--grid-column-width)*6.5 + var(--grid-gap)*5.5);
  }
}

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

  .event-speakers__heading-description {
    padding-right:calc(var(--grid-column-width)*1.5);
    width:100%;
  }
}

.event-speakers__list {
  display:grid;
  gap:8px;
  grid-template-columns:repeat(6,1fr);
  padding-inline:var(--offset-x);
  width:100%;
}

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

  .event-speakers__list {
    gap:6px;
  }
}

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

  .event-speakers__list {
    grid-template-columns:repeat(3,1fr);
  }
}

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

  .event-speakers__list {
    grid-template-columns:repeat(2,1fr);
  }
}

.event-speakers__card {
  background-color:#181818;
  cursor:pointer;
  overflow:hidden;
  position:relative;
}

.event-speakers__card.event-speakers__card--variant-1 .event-speakers__card-hover-elem {
  height:40px;
  width:calc(var(--grid-column-width)*3 + var(--grid-gap)*2);
}

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

  .event-speakers__card.event-speakers__card--variant-1 .event-speakers__card-hover-elem {
    height:24px;
  }
}

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

  .event-speakers__card.event-speakers__card--variant-1 .event-speakers__card-hover-elem {
    height:16px;
    width:calc(var(--grid-column-width)*10 + var(--grid-gap)*9);
  }
}

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

  .event-speakers__card.event-speakers__card--variant-1:not(:disabled):hover .event-speakers__card-hover-elem {
    transform:translateY(110%);
  }
}

.event-speakers__card.event-speakers__card--variant-2 .event-speakers__card-hover-elem {
  height:40px;
  width:calc(var(--grid-column-width)*1.5 + var(--grid-gap)*.5);
}

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

  .event-speakers__card.event-speakers__card--variant-2 .event-speakers__card-hover-elem {
    height:24px;
  }
}

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

  .event-speakers__card.event-speakers__card--variant-2 .event-speakers__card-hover-elem {
    height:16px;
    width:calc(var(--grid-column-width)*5 + var(--grid-gap)*4);
  }
}

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

  .event-speakers__card.event-speakers__card--variant-2:not(:disabled):hover .event-speakers__card-hover-elem {
    transform:translateY(110%);
  }
}

.event-speakers__card.event-speakers__card--variant-3 .event-speakers__card-hover-elem {
  -webkit-clip-path:polygon(100% 0,0 100%,100% 100%);
  clip-path:polygon(100% 0,0 100%,100% 100%);
  height:55px;
  width:calc(var(--grid-column-width)*2 + var(--grid-gap)*1);
}

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

  .event-speakers__card.event-speakers__card--variant-3 .event-speakers__card-hover-elem {
    height:38px;
  }
}

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

  .event-speakers__card.event-speakers__card--variant-3 .event-speakers__card-hover-elem {
    height:26px;
    width:calc(var(--grid-column-width)*6 + var(--grid-gap)*5);
  }
}

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

  .event-speakers__card.event-speakers__card--variant-3:not(:disabled):hover .event-speakers__card-hover-elem {
    transform:rotate(20deg) translateY(110%);
  }
}

.event-speakers__card picture {
  display:block;
  width:100%;
}

.event-speakers__card-image {
  aspect-ratio:3/4;
  display:block;
  filter:grayscale(1);
  height:auto;
  object-fit:cover;
  transition:transform .6s ease;
  width:100%;
}

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

  .event-speakers__card-image:not(:disabled):hover {
    transform:scale(1.04);
  }
}

.event-speakers__card-scrim {
  aspect-ratio:3/4;
  background:linear-gradient(0deg,#181818,#18181800 24%);
  left:0;
  pointer-events:none;
  position:absolute;
  top:0;
  width:100%;
}

.event-speakers__card-text {
  border-left:3px solid #e1251b;
  color:#fff;
  margin:18px 16px 20px;
  padding-left:17px;
  position:relative;
}

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

  .event-speakers__card-text {
    margin:14px 14px 18px;
    padding-left:14px;
  }
}

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

  .event-speakers__card-text {
    margin:12px 12px 16px;
    padding-left:12px;
  }
}

.event-speakers__card-arrow-elem {
  color:#fff;
  opacity:0;
  position:absolute;
  right:0;
  top:0;
  transform:translate(-6px,6px);
  transition:opacity .3s ease,transform .3s ease;
  z-index:2;
}

.event-speakers__card-arrow-elem svg {
  --size:18px;
  height:var(--size);
  position:absolute;
  right:14px;
  top:14px;
  width:var(--size);
}

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

  .event-speakers__card-arrow-elem svg {
    --size:14px;
    right:12px;
    top:12px;
  }
}

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

  .event-speakers__card:hover .event-speakers__card-arrow-elem {
    opacity:1;
    transform:translate(0);
  }
}

.event-speakers__card-position {
  margin-top:6px;
}

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

  .event-speakers__card-position {
    margin-top:4px;
  }
}

.event-speakers__card-company,
.event-speakers__card-position {
  opacity:.85;
}

.event-speakers__btn {
  align-items:center;
  align-self:center;
  border:1px solid #181818;
  display:flex;
  height:48px;
  justify-content:center;
  overflow:hidden;
  position:relative;
  width:calc(var(--grid-column-width)*1.75 + var(--grid-gap)*.75);
}

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

  .event-speakers__btn {
    height:32px;
    width:calc(var(--grid-column-width)*2 + var(--grid-gap)*1);
  }
}

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

  .event-speakers__btn {
    height:40px;
  }
}

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

  .event-speakers__btn {
    width:calc(var(--grid-column-width)*10 + var(--grid-gap)*9);
  }
}

.event-speakers__btn span {
  position:relative;
  z-index:2;
}

.event-speakers__btn:after {
  background-color:#181818;
  content:"";
  inset:0;
  position:absolute;
  transform:translateY(100%);
  transition:transform .3s ease-in-out;
  z-index:1;
}

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

  .event-speakers__btn:not(:disabled):hover {
    color:#fff;
  }

  .event-speakers__btn:not(:disabled):hover:after {
    transform:translateY(0);
  }
}