/*
-------------------------------------------
wf-news-box.css
-------------------------------------------

  Beskrivning: Stilregler för Nyhetslistning med foton
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

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


/*
-------------------------------------------
Nyhetslistning med foton
------------------------------------------- */

.wf-news-box {
  margin-bottom: var(--wf-spacing-40);
}

.wf-news-box > ul {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;

  gap: var(--wf-spacing-80) var(--wf-spacing-40);
  grid-template-columns: 1fr 1fr 1fr;
}

.wf-news-box > ul > li {
  background-color: var(--color-block);
  padding: var(--wf-spacing-40);
}

.wf-news-box > ul > li > img {
  display: block;
  margin: calc(var(--wf-spacing-40) * -1) calc(var(--wf-spacing-40) * -1) var(--wf-spacing-20);
  max-width: unset !important;
  width: calc(100% + var(--wf-spacing-40) * 2) !important;
}

.wf-news-box > ul > li > .env-text-heading-02,
.wf-news-box > ul > li > .env-text-heading-03 {
  font-size: var(--wf-font-size-h3);
  margin: 0.25em 0 0.5em;
}

.wf-news-box > ul > li > .env-text-heading-02 > a:not([class^=env-]):not([class*=' env-']),
.wf-news-box > ul > li > .env-text-heading-03 > a:not([class^=env-]):not([class*=' env-']) {
  text-decoration: none;
}

/* Hover */
.wf-news-box > ul > li:hover > .env-text-heading-02,
.wf-news-box > ul > li:hover > .env-text-heading-03 {
  text-decoration: underline;
}

/* Hover - Reset */
.wf-news-box > ul > li:hover > .env-text-heading-02,
.wf-news-box > ul > li > .env-text-heading-02 > a:not([class^=env-]):not([class*=' env-']):hover,
.wf-news-box > ul > li:hover > .env-text-heading-03,
.wf-news-box > ul > li > .env-text-heading-03 > a:not([class^=env-]):not([class*=' env-']):hover {
  color: var(--env-text-heading-03-link-font-color);
}


/*
-------------------------------------------
Specifikt för Södra Munksjöns webbplats som visar alla nyheter
------------------------------------------- */

/* Tagg för delområde */
.sv-theme-smuab .wf-news-box > ul > li {
  position: relative;
}

.sv-theme-smuab .wf-news-box > ul > li [class*='wf-subarea-tag-'] {
  font-size: var(--wf-font-size-normal);
  position: absolute;
  right: 0.5em;
  top: 0.5em;
}


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

@media (prefers-reduced-motion: no-preference) {
  .wf-news-box > ul > li {
    transition: var(--wf-block-transition);
  }

  .wf-news-box > ul > li:hover {
    transform: var(--wf-block-transform);
  }
}




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

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .wf-news-box > ul {
    grid-template-columns: 1fr 1fr;
  }
}


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

@media screen and (max-width: 767px) {
  .wf-news-box > ul {
    gap: var(--wf-spacing-40);
    grid-template-columns: 1fr;
  }
}