/*
 * The search list 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.
 */

.search-list {
  align-items:flex-start;
  display:flex;
  justify-content:space-between;
  margin-top:128px;
  margin-inline:var(--offset-x);
  min-height:calc(var(--mobile-vh)*100);
}

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

  .search-list {
    margin-top:84px;
  }
}

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

  .search-list {
    margin-top:88px;
  }
}

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

  .search-list {
    flex-direction:column;
    gap:40px;
    margin-top:52px;
  }
}

.search-list .speakers__card-text .speakers__card-hover-elem {
  height:32px;
  width:60%;
}

.search-list__filter {
  display:flex;
  flex-direction:column;
  gap:16px;
  width:calc(var(--grid-column-width)*1.75 + var(--grid-gap)*.75);
}

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

  .search-list__filter {
    gap:12px;
  }
}

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

  .search-list__filter {
    align-items:center;
    flex-direction:row;
    flex-wrap:wrap;
    gap:24px;
    width:100%;
  }
}

.search-list__filter-item {
  align-items:center;
  cursor:pointer;
  display:flex;
  gap:2px;
  opacity:.4;
  transition:opacity .6s cubic-bezier(.25,.25,0,1);
}

.search-list__filter-input-wrapper:has(input:checked) .search-list__filter-item {
  opacity:1;
}

.search-list__container {
  display:grid;
  gap:12px;
  grid-template-columns:repeat(5,1fr);
  position:relative;
  width:calc(var(--grid-column-width)*14.75 + var(--grid-gap)*13.75);
}

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

  .search-list__container {
    gap:8px;
  }
}

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

  .search-list__container {
    grid-template-columns:repeat(3,1fr);
    width:calc(var(--grid-column-width)*9.75 + var(--grid-gap)*8.75);
  }
}

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

  .search-list__container {
    gap:6px;
    grid-template-columns:repeat(2,1fr);
    width:100%;
  }
}

.search-list__card {
  position:relative;
}

.search-list__card:nth-of-type(2n) .search-list__card-arrow-elem,
.search-list__card:nth-of-type(2n) .search-list__card-hover-elem,
.search-list__card:nth-of-type(2n) .search-list__card-info,
.search-list__card:nth-of-type(odd) .search-list__card-arrow-elem,
.search-list__card:nth-of-type(odd) .search-list__card-hover-elem,
.search-list__card:nth-of-type(odd) .search-list__card-info {
  background-color:#181818;
  color:#fff;
}

.search-list__card:nth-child(3n+1) .search-list__card-hover-elem {
  transform:translateY(110%);
}

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

  .search-list__card:nth-child(3n+1):not(:disabled):hover .search-list__card-hover-elem {
    transform:translateY(0);
  }
}

.search-list__card:nth-child(3n+2) .search-list__card-hover-elem {
  -webkit-clip-path:polygon(100% 0,0 100%,100% 100%);
  clip-path:polygon(100% 0,0 100%,100% 100%);
  transform-origin:bottom left;
}

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

  .search-list__card:nth-child(3n+2):not(:disabled):hover .search-list__card-hover-elem {
    transform:rotate(20deg);
  }
}

.search-list__card:nth-child(3n) .search-list__card-hover-elem {
  transform:translateY(0);
}

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

  .search-list__card:nth-child(3n):not(:disabled):hover .search-list__card-hover-elem {
    transform:translateY(110%);
  }
}

.search-list__card-text {
  bottom:0;
  left:0;
  overflow:hidden;
  position:absolute;
  width:100%;
}

.search-list__card-hover-elem {
  height:32px;
  margin-bottom:-2px;
  transition:transform .6s cubic-bezier(.25,.25,0,1);
  width:60%;
}

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

  .search-list__card-hover-elem {
    height:24px;
    width:calc(var(--grid-column-width)*2 + var(--grid-gap)*1);
  }
}

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

  .search-list__card-hover-elem {
    height:32px;
    width:calc(var(--grid-column-width)*7 + var(--grid-gap)*6);
  }
}

.search-list__card-arrow-elem {
  height:32px;
  margin-bottom:-1px;
  position:relative;
}

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

  .search-list__card-arrow-elem {
    height:24px;
  }
}

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

  .search-list__card-arrow-elem {
    height:22px;
  }
}

.search-list__card-arrow-elem svg {
  --size:18px;
  height:var(--size);
  position:absolute;
  right:12px;
  top:12px;
  width:var(--size);
}

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

  .search-list__card-arrow-elem svg {
    --size:14px;
    right:10px;
    top:10px;
  }
}

.search-list__card-info {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:20px 24px 17px;
  position:relative;
}

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

  .search-list__card-info {
    padding:9px 14px 14px;
  }
}

.search-list__card-info-text {
  align-items:center;
  display:flex;
  gap:4px;
}

.search-list__card-image {
  aspect-ratio:.7379421222;
  height:auto;
  object-fit:cover;
  width:100%;
}

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

  .search-list__card-image {
    aspect-ratio:.7536945813;
  }
}

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

  .search-list__card-image {
    aspect-ratio:.75;
  }
}

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

  .search-list__card-image {
    aspect-ratio:.7081545064;
  }
}

.search-empty-message {
  color:#181818;
  opacity:.4;
}