/* 
Skapar klasserna "ek-newslist" och "ek-newslist-list" som läggs till som 
CSS-regel under Webbplatsinställningar / Dekorationer och som appliceras 
på modulen Nyhetslista, den ena vid Galleri och den andra vid Lista.
*/

/* Justerar marginalen mellan sista kortet och knappen nedanför när artiklar är staplade */
@media (max-width: 800px) {
  .ek-newslist li.sv-newslist__gallery-item:last-of-type {
    margin-bottom: 0 !important;
  }
}

/* Gör varje artikel till ett "kort" */
.ek-newslist .sv-newslist__gallery-article,
.ek-newslist-list article {
  background-color: #fff !important;
}

/* Padding på innehållet */
.ek-newslist .env-p-around--xx-small,
.ek-newslist-list .env-p-around--x-small {
  padding: 1em !important;
}

/* Textfärg */
.ek-newslist .env-text-body-02,
.ek-newslist .env-text-heading-03 a,
.ek-newslist-list .env-text-body-02,
.ek-newslist-list .env-text-heading-02 a,
.ek-newslist-list .env-text-heading-03 a {
  color: #22252b !important;
}

/* Datum */
.ek-newslist-list .env-ui-text-overline {
  margin-bottom: 0.5em !important;
  color: #22252b !important;
}

/* Rubrik */
.ek-newslist h2,
.ek-newslist h3,
.ek-newslist-list h2,
.ek-newslist-list h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--env-text-body-01-font-size);
}
.ek-newslist h2 a,
.ek-newslist h3 a,
.ek-newslist-list h2 a,
.ek-newslist-list h3 a {
  text-decoration: none !important;
}
.ek-newslist h2 a:hover,
.ek-newslist h3 a:hover,
.ek-newslist-list h2 a:hover,
.ek-newslist-list h3 a:hover {
  text-decoration: underline !important;
}

/* Desktop */
@media only screen and (min-width: 1024px) {

  /* Padding på innehållet */
  .ek-newslist .env-p-around--xx-small,
  .ek-newslist-list .env-p-around--x-small {
    padding: 1.25em !important;
  }
  /* Justerar textstorlekar */
  .ek-newslist h2,
  .ek-newslist h3,
  .ek-newslist-list h2,
  .ek-newslist-list h3 {
    font-size: 1.125em;
  }
  /* Sätter max-bredd på knappen under nyhetslistan */
  .ek-newslist .env-button {
    max-width: 1128px;
  }
}

/* 
Skapar egen klass "ek-artikel" som läggs till som CSS-regel under 
Webbplatsinställningar / Dekorationer och som appliceras på layouten 
"Mittenspalt" i mallarna "Artiklar och press" och "Fråga juristen".
Skapar även "ek-p-som-h1" för att justera texten ovanpå bilden.
*/

/* Får h1 att se ut som h2 och tar bort marginal nedtill */
.ek-artikel h1 {
  font-size: var(--env-text-heading-02-font-size);
  margin-block-end: 0;
  margin-block-start: var(--env-text-summary-01-margin-block-start);
}

/* Får h2 att se ut som h3 */
.ek-artikel h2 {
  font-size: var(--env-text-heading-03-font-size);
}

/* Får h3 att se mindre ut */
.ek-artikel h3 {
  font-size: var(--env-text-body-01-font-size);
}

/* Får p-tagg att se ut som h1 */
.ek-p-som-h1 .env-text-body-01 {
  font-size: var(--env-text-heading-01-font-size);
  font-weight: var(--env-text-heading-01-font-weight);
  line-height: var(--env-text-heading-01-line-height);
  margin-block-end: var(--env-text-heading-01-margin-block-end);
  margin-block-start: var(--env-text-heading-01-margin-block-start);
}

/* Tar bort mellanrum mellan h1 och publicerad */
.ek-artikel .pagecontent > div:nth-child(3) {
  margin-top: 0;
}

/* Desktop */
@media only screen and (min-width: 1024px) {
  /* Får h1 att se ut som h2 */
  .ek-artikel h1 {
    font-size: 1.5em;;
  }
  /* Får h2 att se ut som h3 */
  .ek-artikel h2 {
    font-size: 1.125em;
  }
  /* Får h3 att se mindre ut */
  .ek-artikel h3 {
    font-size: 1em;
  }
  /* Får p-tagg att se ut som h1 */
  .ek-p-som-h1 .env-text-body-01 {
    font-size: 3em;
  }
}