/*
-------------------------------------------
wf-sis-hero.css
-------------------------------------------

  Beskrivning: Stilregler för evenemangslistning på Sommar i Skeppsbron
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

------------------------------------------- */


/*
-------------------------------------------
Evenemangslistning - TODO GÅ IGENOM
------------------------------------------- */

.sv-predefinedsearch-portlet:not(:last-of-type):has(+ .sv-predefinedsearch-portlet) {
  margin-bottom: var(--wf-spacing-80);
}

.wf-events-bg {
  background-image: url('/images/18.1aa8a7af1874b64bf8a613fd/1682359744442/event-bg.png');
  background-repeat: repeat-y;
  background-position: top center;
}

.wf-events {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.6rem;
  list-style: none;
  margin: clamp(.5em, 4vw, 2em) 0 0;
  padding: 0;
}

.wf-events li {
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
}

.wf-events-item-wrapper {
  height: 415px;
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column-reverse;
  transition: all .3s cubic-bezier(0.25,0.45,0.45,0.95);
}

.wf-events-item-info-wrapper {
  background: rgba(9,42,53,0.6);
  padding: 0 clamp(2rem,5vw,5rem) clamp(2rem,5vw,5rem);
}

.wf-events-item-info-wrapper:before {
  content:'';
  display:block;
  margin:0 calc(clamp(2rem,5vw,5rem) * -1);
  background: linear-gradient(0deg,rgba(9,42,53,.6) 0, rgba(9,42,53,0) 100%);
  height: clamp(30px, 10vw, 100px);
  width: 100%;
  transform:translateY(-100%);
  position: absolute;
}
     
.wf-events-item-wrapper .eventCancelled {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 0.5em;
  display: inline-block;
  background-color: #fff;
  padding: .15em .5em;
  color: var(--env-border-danger-color);
}

.wf-events-item-heading {
  margin: 0 0 .4em;
}

.wf-events-item-heading a {
  color: #fff;
  font-size: clamp(3rem, 5vw, 5rem);
  text-decoration: none;
  line-height: 1.1;
  display: inline-block;
  font-weight: 900;
}

.wf-events-item-heading h3 a:hover {
  text-decoration: underline;
}

.wf-events-item-meta span {
  color: #fff;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.2;
}


/* Hover */
.wf-events li:hover {
  cursor: pointer;
}

.wf-events li:hover .wf-events-item-wrapper {
  transform: scale(1.03);
}

.wf-events li:hover .wf-events-item-info-wrapper {
  background: linear-gradient(0deg,rgba(9,42,53,.9) 0, rgba(9,42,53,0.7) 100%);
}

.wf-events li:hover .wf-events-item-info-wrapper:before {
  background: linear-gradient(0deg,rgba(9,42,53,.7) 0, rgba(9,42,53,0) 100%);
}


/* Om bild saknas */
.wf-events-item-wrapper.noImg {
  background-color: var(--blue-heaven);
}

.wf-events-item-wrapper.noImg .wf-events-item-info-wrapper,
.wf-events-item-wrapper.noImg .wf-events-item-info-wrapper:before {
  background: transparent;
}

.wf-events li:hover .wf-events-item-wrapper.noImg:before {
  background: linear-gradient(0deg,rgba(9,42,53,.6) 0, rgba(9,42,53,0) 100%);
}



/* Specialare i desktop */
@media (max-width: 1440px) {
  .wf-events-item-heading h3 a {
    font-size: 5rem;
  }
}


/* Mobil & Läsplatta */
@media (max-width: 1024px) {  
  .wf-events-item-wrapper {
    height: 295px;
  }
  .wf-events-item-info-wrapper {
    display: block;
  }
  .wf-events-item-heading,
  .wf-events-item-meta {
    width: 100%;
  }
  .wf-events-item-meta {
    border-left: none;
  }
  .wf-events-item-heading h3 a {
    font-size: 4rem;
  }
}


/* Mobil */
@media (max-width: 800px) {
  .wf-events {
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
  }
  .wf-events-item-wrapper {
    height: 220px;
  }
}



/*
-------------------------------------------
Läsplatta
------------------------------------------- */

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

}



/*
-------------------------------------------
Mobil
------------------------------------------- */

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


}