/*
 * The main events 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.
 */

.main-event__wrapper,
.main-events {
  position:relative;
}

.main-events {
  background-image:url(/build/square-bg.svg),linear-gradient(180deg,#181818 90%,#f1ede4 0);
  background-position:0 100%;
  background-repeat:no-repeat;
  display:flex;
  flex-direction:column;
  gap:97px;
  min-height:calc(var(--mobile-vh)*100);
  padding-bottom:279px;
  padding-top:184px;
  width:100%;
}

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

  .main-events {
    background-image:url(/build/square-bg-laptop.svg),linear-gradient(180deg,#181818 90%,#f1ede4 0);
    gap:72px;
    padding-bottom:202px;
    padding-top:123px;
  }
}

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

  .main-events {
    background-image:url(/build/square-bg-tablet.svg),linear-gradient(180deg,#181818 90%,#f1ede4 0);
    gap:58px;
  }
}

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

  .main-events {
    background-image:url(/build/square-bg-mobile.svg),linear-gradient(180deg,#181818 95%,#f1ede4 0);
    gap:34px;
    padding-bottom:46px;
    padding-top:80px;
  }
}

.main-events__heading {
  align-items:flex-start;
  color:#fff;
  display:flex;
  justify-content:space-between;
  padding-left:var(--offset-x);
  padding-right:var(--grid-column-width);
  width:100%;
}

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

  .main-events__heading {
    padding-inline:var(--offset-x);
  }
}

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

  .main-events__heading {
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }
}

.main-events__description {
  padding-right:var(--grid-column-width);
  width:calc(var(--grid-column-width)*7 + var(--grid-gap)*6);
}

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

  .main-events__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) {

  .main-events__description {
    width:100%;
  }
}

.main-events__list-wrapper {
  position:relative;
}

.main-events__list {
  display:grid;
  gap:12px;
  grid-template-columns:repeat(4,1fr);
  padding-inline:var(--offset-x);
  padding-bottom:124px;
  position:relative;
}

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

  .main-events__list {
    gap:8px;
  }
}

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

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

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

  .main-events__list {
    gap:calc(var(--grid-column-width)/4);
    grid-template-columns:repeat(1,1fr);
  }
}

.main-events__list-item {
  display:block;
}

.main-events__card {
  background-color:#181818;
  overflow:hidden;
  position:relative;
}

.main-events__card,
.main-events__card picture {
  display:block;
  width:100%;
}

.main-events__card-image {
  aspect-ratio:5/3;
  display:block;
  height:auto;
  object-fit:cover;
  transition:transform .6s ease;
  width:100%;
}

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

.main-events__card-text {
  border-left:3px solid #e1251b;
  color:#fff;
  margin:16px 16px 20px;
  padding-left:16px;
  position:relative;
}

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

  .main-events__card-text {
    margin:12px 12px 16px;
    padding-left:13px;
  }
}

.main-events__card-edition {
  color:#e1251b;
  font-size:clamp(.72rem,.85vw,.82rem);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.main-events__card-city {
  margin-top:6px;
}

.main-events__card-country {
  font-size:clamp(.72rem,.85vw,.82rem);
  letter-spacing:.06em;
  margin-top:4px;
  opacity:.8;
  text-transform:uppercase;
}

.main-events__card-date {
  font-size:clamp(18px,2px + 1.25vw,26px);
  font-weight:600;
  margin-top:10px;
}

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

  .main-events__card-date {
    font-size:18px;
    margin-top:8px;
  }
}

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

  .main-events__card-date {
    font-size:20px;
  }
}

.main-events__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;
}

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

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

  .main-events__card-arrow-elem svg {
    --size:14px;
    right:12px;
    top:12px;
  }
}

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

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

  .main-events__card:hover .main-events__card-image {
    transform:scale(1.05);
  }
}

.main-events__filter {
  background-color:#181818;
  color:#fff;
  margin-inline:auto;
  position:-webkit-sticky;
  position:sticky;
  top:80%;
  width:calc(var(--grid-column-width)*8 + var(--grid-gap)*7);
  z-index:5;
}

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

  .main-events__filter {
    padding-inline:var(--offset-x);
    width:100%;
  }
}

.main-events__filter-location {
  align-items:center;
  display:flex;
  height:48px;
  justify-content:space-between;
  width:100%;
}

.main-events__filter-location-button,
.main-events__filter-location-button-wrapper {
  height:100%;
  position:relative;
  width:100%;
}

.main-events__filter-location-button {
  align-items:center;
  display:flex;
  justify-content:space-between;
  padding-left:20px;
  padding-right:30px;
  transition:background-color .6s cubic-bezier(.25,.25,0,1),color .6s cubic-bezier(.25,.25,0,1);
}

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

  .main-events__filter-location-button:not(:disabled):hover {
    background-color:#fff;
    color:#181818;
  }
}

.main-events__filter-location-button svg {
  --size:8px;
  height:var(--size);
  width:var(--size);
}

.main-events__filter-location-button:disabled {
  background-color:#ccc;
  pointer-events:none;
}

.main-events__filter-location-button:disabled+.main-events__filter-reset {
  display:none;
}

.main-events__filter-reset {
  align-items:center;
  background:none;
  border:none;
  color:inherit;
  cursor:pointer;
  display:none;
  height:16px;
  justify-content:center;
  padding:0;
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  transition:opacity .6s cubic-bezier(.25,.25,0,1),transform .6s cubic-bezier(.25,.25,0,1);
  width:16px;
  z-index:2;
}

.main-events__filter-reset.is-visible {
  display:flex;
}

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

  .main-events__filter-reset:not(:disabled):hover {
    opacity:.7;
    transform:translateY(-50%) rotate(90deg) scale(1.1);
  }
}

.main-events__filter-reset-btn-el {
  --size:16px;
  align-items:center;
  display:flex;
  height:var(--size);
  justify-content:center;
  position:relative;
  width:var(--size);
}

.main-events__filter-reset-btn-el:after,
.main-events__filter-reset-btn-el:before {
  background-color:#fff;
  content:"";
  height:1px;
  left:50%;
  position:absolute;
  top:50%;
  width:100%;
}

.main-events__filter-reset-btn-el:before {
  transform:translate(-50%,-50%) rotate(45deg);
}

.main-events__filter-reset-btn-el:after {
  transform:translate(-50%,-50%) rotate(-45deg);
}

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

  .main-events__filter-reset-btn-el {
    --size:12px;
  }
}

.main-events__filter-year {
  align-items:center;
  border:1px solid #fff;
  border-top:none;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:space-between;
  min-height:48px;
  padding-left:0;
  padding-inline:20px;
  width:100%;
}

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

  .main-events__filter-year {
    gap:4px;
    padding-inline:8px;
  }
}

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

  .main-events__filter-year {
    border:none;
    padding-inline:0;
  }
}

.main-events__filter-year-list {
  align-items:center;
  column-gap:24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  list-style-type:none;
  min-height:48px;
  padding:10px 20px;
  row-gap:8px;
  width:100%;
}

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

  .main-events__filter-year-list {
    display:none;
  }
}

.main-events__filter-year-button {
  cursor:pointer;
  height:100%;
  opacity:.4;
  transition:opacity .6s cubic-bezier(.25,.25,0,1);
}

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

  .main-events__filter-year-button:not(:disabled):hover {
    opacity:1;
  }
}

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

  .main-events__filter-year-button {
    display:none;
  }
}

.main-events__filter-year-button.is-active {
  opacity:1;
  text-decoration:underline;
}

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

  .main-events__filter-year-button.is-active:not(:disabled):hover {
    opacity:.4;
  }
}

.main-events__filter-year-button.is-disabled {
  cursor:not-allowed;
  opacity:.2;
  pointer-events:none;
}

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

  .main-events__filter-year-button.is-disabled:not(:disabled):hover {
    opacity:.2;
  }
}

.main-events__filter-inner {
  height:100%;
  position:relative;
  width:100%;
}

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

  .main-events__filter-location-menu-left {
    display:none;
  }
}

.main-events__filter-location-menu {
  background-color:#181818;
  border:1px solid #fff;
  border-bottom:none;
  display:flex;
  flex-direction:column;
  height:0;
  left:0;
  max-height:60vh;
  opacity:0;
  overflow:hidden;
  padding-bottom:40px;
  padding-top:20px;
  position:absolute;
  top:0;
  transform:translateY(0);
  transition:transform .6s cubic-bezier(.25,.25,0,1),height .6s cubic-bezier(.25,.25,0,1),opacity .6s cubic-bezier(.25,.25,0,1);
  width:100%;
  z-index:-1;
}

.main-events__filter-location-menu.is-active {
  height:-webkit-max-content;
  height:max-content;
  opacity:1;
  transform:translateY(-100%);
}

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

  .main-events__filter-location-menu-caption {
    display:none;
  }
}

.main-events__filter-location-menu-list {
  align-self:flex-end;
  display:grid;
  gap:6px;
  grid-template-columns:repeat(2,1fr);
  width:calc(var(--grid-column-width)*4.5 + var(--grid-gap)*3.5);
}

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

  .main-events__filter-location-menu-list {
    grid-template-columns:repeat(1,1fr);
    width:100%;
  }
}

.main-events__filter-location-menu-button {
  align-items:center;
  cursor:pointer;
  display:flex;
  height:48px;
  justify-content:flex-start;
  padding-inline:16px;
  position:relative;
  width:100%;
}

.main-events__filter-location-menu-button:after {
  background-color:#fff;
  bottom:0;
  content:"";
  height:1px;
  left:0;
  opacity:.4;
  position:absolute;
  transition:opacity .6s cubic-bezier(.25,.25,0,1),width .6s cubic-bezier(.25,.25,0,1);
  width:100%;
}

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

  .main-events__filter-location-menu-button:not(:disabled):hover:after {
    opacity:1;
    width:0;
  }
}

.main-events__filter-location-menu-button.is-disabled {
  cursor:not-allowed;
  opacity:.3;
  pointer-events:none;
}

.main-events__filter-location-menu-button.is-disabled:after {
  opacity:.2;
}

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

  .main-events__filter-location-menu-button.is-disabled:not(:disabled):hover:after {
    opacity:.2;
    width:100%;
  }
}

.main-events__filter-location-menu--city .main-events__filter-location-menu-list {
  align-self:center;
  display:grid;
  gap:6px;
  grid-template-columns:repeat(3,1fr);
  width:100%;
}

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

  .main-events__filter-location-menu--city .main-events__filter-location-menu-list {
    grid-template-columns:repeat(1,1fr);
  }
}

.main-events__filter-location-button--year {
  display:none;
  flex-basis:100%;
}

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

  .main-events__filter-location-button--year {
    display:flex;
    height:48px;
  }
}

.events-filter__wrapper {
  border:1px solid #fff;
  flex:1 0 50%;
  height:100%;
}

.events-filter__wrapper:last-child {
  border-left:none;
}

.events-filter__wrapper--year {
  display:none;
  flex-basis:100%;
  scrollbar-width:none;
}

.events-filter__wrapper--year::-webkit-scrollbar {
  display:none;
  height:0;
  width:0;
}

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

  .events-filter__wrapper--year {
    display:flex;
  }
}

.main-events__filter-location-menu--year {
  max-height:400px;
  overflow:auto;
}

.event-filter__input-wrapper:has(input:checked) .main-events__filter-year-button {
  opacity:1;
  text-decoration:underline;
}

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

  .event-filter__input-wrapper:has(input:checked) .main-events__filter-year-button:not(:disabled):hover {
    opacity:.4;
  }
}

.main-events__filter-location-menu-row {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  padding-left:20px;
  padding-right:20px;
}

.main-events__filter-location-menu-row:not(:first-child) {
  padding-top:20px;
}

.main-events__filter-location-menu-row:not(:last-child) {
  border-bottom:1px solid #ffffff4d;
  padding-bottom:20px;
}

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

  .main-events__filter-location-menu-row:not(:last-child) {
    border-bottom:none;
    padding-bottom:30px;
  }

  .main-events__filter-location-menu-row {
    grid-template-columns:1fr;
  }
}

.main-events__filter-location-menu-rows {
  max-height:inherit;
  max-height:calc(60vh - 60px);
  overflow-y:auto;
  overscroll-behavior:contain;
}