/*
-------------------------------------------
wf-tips-rekai.css
-------------------------------------------

  Beskrivning: Stilregler för Tips (RekAi)
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

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


/*
-------------------------------------------
Tips (RekAi)
& Tipslista (Nyhetsmodul)
------------------------------------------- */

.wf-tips-list {
  margin-bottom: var(--wf-spacing-120);
}

/* Rubrik */
.wf-tips-rekai > .sv-text-portlet .env-ui-text-sectionheading,
.wf-tips-list > .sv-text-portlet .env-ui-text-sectionheading {
  margin-bottom: var(--wf-spacing-30) !important;
}


/* Artiklar */
.wf-tips-rekai .rekai-news-wrapper,
.wf-tips-list ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--wf-spacing-40);
  margin-bottom: var(--wf-spacing-30);
}

.wf-tips-rekai .rekai-newsarticle-article-container,
.wf-tips-list li {
  position: relative;
}


/* Bild */
.wf-tips-rekai .rekai-newsarticle-img-wrapper,
.wf-tips-list-img {
  aspect-ratio: 1 / 1;
}

.wf-tips-rekai .rekai-newsarticle-img-wrapper img,
.wf-tips-list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Rubrik på tipset */
.wf-tips-rekai .rekai-newsarticle-article-container .env-ui-text-subheading,
.wf-tips-list li > .env-ui-text-subheading {
  position: absolute;
  top: var(--wf-spacing-40);
  left: var(--wf-spacing-40);
  max-width: calc(100% - calc(var(--wf-spacing-40) * 2));
}

.wf-tips-rekai .rekai-newsarticle-article-container .env-ui-text-subheading a,
.wf-tips-list li > .env-ui-text-subheading a {
  background-color: var(--june-sand-05);
  padding: .25em;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  line-height: 1.45;
}

.wf-tips-rekai .rekai-newsarticle-article-container:hover .env-ui-text-subheading a,
.wf-tips-list li:hover > .env-ui-text-subheading a {
  text-decoration: underline;
}


/*
-------------------------------------------
Specifikt för Tips (RekAi)
------------------------------------------- */

/* Fixar */

.wf-tips-rekai .rekai-news-wrapper {
  margin: 0;
}

.wf-tips-rekai .rekai-newsarticle-img-wrapper {
  margin-bottom: 0 !important;
  padding: 0;
  height: auto;
}

.wf-tips-rekai .rekai-newsarticle-article-container {
  padding-bottom: 0 !important;
}

.wf-tips-rekai .rekai-newsarticle-article-container.rekai-newsarticle-article-container-c2,
.wf-tips-rekai .rekai-newsarticle-article-container.rekai-newsarticle-article-container-c3 {
  width: 100%;
  padding: 0;
}

/* Två kolumner */
.wf-tips-rekai .rek-prediction[data-cols="2"] .rekai-news-wrapper {
  grid-template-columns: 1fr 1fr;
}


/*
-------------------------------------------
Tipslista (Nyhetsmodul)
------------------------------------------- */

.wf-tips-list-img img {
  height:  100% !important;
  max-width: unset !important;
  max-height:  unset !important;
}

.wf-tips-list li > .sv-clear-both {
  display: none;
}


/*
-------------------------------------------
Animeringar
------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  .wf-tips-rekai .rekai-newsarticle-article-container,
  .wf-tips-list li {
    transition: var(--wf-block-transition);
  }

  .wf-tips-rekai .rekai-newsarticle-article-container:hover,
  .wf-tips-list li:hover {
    transform: var(--wf-block-transform);
  }

}


/*
-------------------------------------------
Läsplatta + Mobil
------------------------------------------- */

@media screen and (max-width: 1024px) {
  .wf-tips-rekai .rekai-news-wrapper,
  .wf-tips-list ul {
    grid-template-columns: 1fr 1fr;
  }
}


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

@media screen and (max-width: 767px) {
  .wf-tips-rekai .rekai-news-wrapper,
  .wf-tips-list ul,
  .wf-tips-rekai .rek-prediction[data-cols="2"] .rekai-news-wrapper {
    grid-template-columns: 1fr;
    padding-right:var(--wf-spacing-120);
    width: 75%;
  }
}