/*
 * The event heading 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-heading {
  align-items:center;
  background-color:#e1251b;
  color:#fff;
  display:flex;
  min-height:calc(var(--mobile-vh)*100);
  overflow:hidden;
  padding-bottom:clamp(48px,6vh,96px);
  padding-top:136px;
  position:relative;
  width:100%;
}

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

  .event-heading {
    padding-top:104px;
  }
}

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

  .event-heading {
    min-height:0;
    padding-bottom:72px;
    padding-top:108px;
  }
}

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

  .event-heading {
    padding-bottom:56px;
    padding-top:74px;
  }
}

.event-heading__media {
  inset:0;
  position:absolute;
  z-index:0;
}

.event-heading__slide {
  inset:0;
  opacity:0;
  position:absolute;
  transition:opacity .9s ease-in-out;
}

.event-heading__slide.is-active {
  opacity:1;
}

.event-heading__media-img,
.event-heading__slide picture {
  display:block;
  height:100%;
  width:100%;
}

.event-heading__media-img {
  object-fit:cover;
}

.event-heading__scrim {
  background:linear-gradient(90deg,#181818d1,#18181880 42%,#1818181a),linear-gradient(0deg,#18181859,#18181800 40%);
  inset:0;
  position:absolute;
  z-index:1;
}

.event-heading__inner {
  display:flex;
  flex-direction:column;
  gap:clamp(28px,4vh,56px);
  justify-content:center;
  padding-inline:var(--offset-x);
  position:relative;
  width:100%;
  z-index:2;
}

.event-heading__content {
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  gap:clamp(24px,3vw,44px);
  max-width:62%;
}

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

  .event-heading__content {
    max-width:100%;
  }
}

.event-heading__breadcrumbs {
  align-items:center;
  display:flex;
  gap:12px;
}

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

  .event-heading__breadcrumbs {
    gap:8px;
  }
}

.event-heading__breadcrumbs-item {
  align-items:center;
  display:flex;
  gap:4px;
  opacity:.7;
  text-transform:uppercase;
  transition:opacity .3s ease-in-out;
}

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

  .event-heading__breadcrumbs-item:not(:disabled):hover {
    opacity:1;
  }
}

.event-heading__title {
  font-size:clamp(44px,-68px + 8.75vw,100px);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1;
  text-transform:none;
}

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

  .event-heading__title {
    font-size:50px;
  }
}

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

  .event-heading__title {
    font-size:36px;
  }
}

.event-heading__info-grid {
  display:flex;
  flex-wrap:wrap;
  gap:20px clamp(28px,3vw,56px);
}

.event-heading__info-item {
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.event-heading__info-item-label {
  letter-spacing:.06em;
  opacity:.7;
  text-transform:uppercase;
}

.event-heading__info-links-container {
  display:flex;
  max-width:520px;
  width:100%;
}

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

  .event-heading__info-links-container {
    max-width:none;
  }
}

.event-heading__info-link {
  align-items:center;
  background-color:#fff;
  color:#181818;
  display:flex;
  flex-grow:1;
  height:48px;
  justify-content:center;
  overflow:hidden;
  position:relative;
}

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

.event-heading__info-link:after {
  background-color:#e1251b;
  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-heading__info-link:not(:disabled):hover {
    color:#fff;
  }

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

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

  .event-heading__info-link {
    height:44px;
  }
}

.event-heading__share-container {
  flex:0 0 auto;
  position:relative;
  width:150px;
}

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

  .event-heading__share-container {
    flex:1 1 auto;
    width:auto;
  }
}

.event-heading__share-links {
  background-color:#181818;
  bottom:100%;
  -webkit-clip-path:inset(100% 0 0 0);
  clip-path:inset(100% 0 0 0);
  display:flex;
  flex-direction:column;
  pointer-events:none;
  position:absolute;
  transition:opacity .3s ease-in-out,-webkit-clip-path .4s ease-in-out;
  transition:clip-path .4s ease-in-out,opacity .3s ease-in-out;
  transition:clip-path .4s ease-in-out,opacity .3s ease-in-out,-webkit-clip-path .4s ease-in-out;
  width:100%;
}

.event-heading__share-links.is-active {
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
  pointer-events:auto;
}

.event-heading__share-link {
  align-items:center;
  color:#fff;
  display:flex;
  height:48px;
  justify-content:center;
  transition:opacity .3s ease-in-out;
}

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

  .event-heading__share-link:not(:disabled):hover {
    opacity:.4;
  }
}

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

  .event-heading__share-link {
    height:44px;
  }
}

.event-heading__share-btn {
  align-items:center;
  background-color:#181818;
  display:flex;
  gap:6px;
  height:48px;
  justify-content:center;
  overflow:hidden;
  position:relative;
  width:100%;
}

.event-heading__share-btn span,
.event-heading__share-btn svg {
  position:relative;
  z-index:2;
}

.event-heading__share-btn svg {
  --size:16px;
  height:var(--size);
  width:var(--size);
}

.event-heading__share-btn:after {
  background-color:#e1251b;
  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-heading__share-btn:not(:disabled):hover {
    color:#fff;
  }

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

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

  .event-heading__share-btn {
    height:44px;
  }
}

.event-heading__share-btn.is-active {
  color:#fff;
}

.event-heading__share-btn.is-active:after {
  transform:translateY(0);
}

.event-heading__dots {
  display:flex;
  gap:8px;
}

.event-heading__dot {
  background-color:#ffffff73;
  border:0;
  cursor:pointer;
  height:4px;
  padding:0;
  transition:background-color .3s ease;
  width:30px;
}

.event-heading__dot.is-active {
  background-color:#fff;
}

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

  .event-heading__dot:not(:disabled):hover:hover {
    background-color:#ffffffbf;
  }
}