:root {
  --header-height: 74px;
  --top-message-height: 48px;
  /* Height of the mobile nav strip that hangs under the header bar (<= 680px). */
  --mobile-nav-height: 34px;
  --menu-top-offset: var(--header-height);

  /* Editorial palette — reuses the site's own tokens where possible. */
  --menu-bg: #ffffff;
  --menu-ink: #111111;
  --menu-muted: #8a8a8a;
  --menu-line: rgba(17, 17, 17, 0.1);
  --menu-backdrop-tint: rgba(17, 17, 17, 0.35);
  --menu-accent: var(--color-text-accent, #b9cdcc);
  --menu-font-display: var(--font-header, "IBM Plex Sans"), sans-serif;
  --menu-font-label: var(--font-menu, "IBM Plex Sans"), sans-serif;

  --border-radius-lg: 0px;
  --border-radius-md: 0px;
  --border-radius-sm: 0px;

  --content-standard: 1400px;

  --section-large: 80px;
  --section-large-tablet: 60px;
  --section-large-phone: 24px;
  --section-standard: 40px;
  --section-standard-tablet: 40px;
  --section-standard-phone: 24px;

  --color-byggprojekt: #1a8edb;
  --color-byggprojekt-dark: #0475c1;
  --color-fastighet: #a070e9;
  --color-fastighet-dark: #8858d1;
  --color-arkitektur: #c2b090;
  --color-arkitektur-dark: #816f50;
  --color-byggmaterial: #74d9a7;
  --color-byggmaterial-dark: #4b9082;
}

body {
  background-color: #ffffff !important;
}

@property --menu-top-offset {
  syntax: "<length>";
  inherits: true;
  initial-value: 74px;
}

:root:has(header.cm-header > user-container .top-message) {
  --menu-top-offset: calc(var(--header-height) + var(--top-message-height));
}

@supports (animation-timeline: scroll()) {
  :root:has(header.cm-header > user-container .top-message) {
    animation: cm-menu-offset linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 var(--top-message-height);
  }
}

@keyframes cm-menu-offset {
  from {
    --menu-top-offset: calc(var(--header-height) + var(--top-message-height));
  }
  to {
    --menu-top-offset: var(--header-height);
  }
}

header.cm-header {
  border-bottom: 1px solid var(--color-text-surface-secondary) !important;

  & > .content-standard {
    position: relative;
  }

  & .m-r-4 {
    margin-right: var(--spacing-2);
  }

  & .btn {
    box-shadow: unset !important;
  }

  & .btn-secondary {
    background-color: var(--header-bg) !important;
    border: unset;
    color: unset !important;
  }

  & user-container > button {
    border: 1px solid var(--btn-outline-border) !important;
  }

  /* Mobile: logo + buttons stay on one row. The main nav is lifted out of the
     flow and hung as a full-width strip under the header bar, so it does not
     push the logo/buttons around. The hamburger menu reads --menu-top-offset,
     which is derived from --header-height, so the strip height is added there
     (see the :root rule below) and the menu panel still opens under it. */
  @media (max-width: 680px) {
    /* Fixed bar height so --header-height is exact and the hamburger panel
       opens flush under the nav strip. Content centres inside the bar. */

    & header > div.content-standard {
      padding-bottom: 0 !important;
    }

    & > .content-standard {
      box-sizing: border-box;
      height: var(--header-bar-height);
      align-items: center;
    }

    /* Bigger logo. The SVG is only 77x46 intrinsically, so max-* cannot
       enlarge it; set an explicit height and let the width follow. The bar
       height is derived from this (see --header-bar-height below). */
    & > .content-standard .logo img {
      height: var(--mobile-logo-height);
      width: auto;
      max-height: none;
      max-width: none;
    }

    /* Show the Prenumerera button in the bar on phones. The platform hides it
       with .hide-lgphone and only offers it inside the hamburger menu. "Logga
       in" stays hidden so logo + search + Prenumerera + hamburger fit on one
       row even on narrow phones. */
    & user-container[unauthenticated-show] > a.btn-primary.hide-lgphone {
      display: inline-flex !important;
      align-items: center;
      white-space: nowrap;
      font-size: 14px;
      padding-left: 12px;
      padding-right: 12px;
    }

    & nav.main.cm-header-menu {
      display: block !important;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      width: 100%;
      height: var(--mobile-nav-height);
      box-sizing: border-box;
      padding: 0 var(--content-padding-phone);
      background: var(--header-bg, #ffffff);
      border-bottom: 1px solid var(--color-text-surface-secondary);

      & ul.mainmenu {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: space-between;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        &::-webkit-scrollbar {
          display: none;
        }

        & li:first-child,
        & li:nth-child(6),
        & li:nth-child(7) {
          display: none;
        }

        & li {
          margin-right: 0 !important;
          font-size: 14px;
          white-space: nowrap;
        }
      }
    }
  }
}

@media (max-width: 680px) {
  :root {
    /* Logo height on phones (the SVG renders 46px tall on desktop). */
    --mobile-logo-height: 44px;
    /* Logo/buttons row: tallest item (logo) + 15px bar padding top and bottom. */
    --header-bar-height: calc(var(--mobile-logo-height) + 30px);
    /* Bar + nav strip, so the sticky offset and hamburger menu line up. */
    --header-height: calc(var(--header-bar-height) + var(--mobile-nav-height));
  }

  /* The strip is out of flow; reserve its height so it does not cover the page. */
  main#page {
    padding-top: var(--mobile-nav-height);
  }
}

/* ---------------------------------------------------------------------------
   Ads styling
--------------------------------------------------------------------------- */
section.cm-ad.m-standard {
  margin: 24px 0;
}

section.m-standard {
  margin: 40px 0;

  @media (max-width: 680px) {
    margin: 24px 0;
  }
}

.panorama::before,
.mobile::before {
  content: "annons";
}

.bgcolor-ad {
  background: unset !important;
  background-color: unset !important;
}

.cm-ad.p-standard {
  margin: 24px 0;
  padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   General styling
--------------------------------------------------------------------------- */

.btn {
  border-radius: 4px;
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Footer Styles
--------------------------------------------------------------------------- */

footer.cm-footer {
  @media (max-width: 680px) {
    & > div {
      gap: 20px;

      & .text-block {
        text-align: start !important;
      }
    }
  }

  &::after {
    content: "Hållbart Byggande © 2026";
    display: block;
    width: 100%;
    text-align: center;
    color: var(--color-neutral-200);
    font-size: 11px;
    padding: 8px;
  }

  & div.content-standard {
    border-top: 1px solid var(--color-neutral-300);
    border-bottom: 1px solid var(--color-neutral-300);
    padding: 24px var(--content-padding);

    @media (max-width: 680px) {
      padding: 24px var(--content-padding-phone);
    }
  }

  & div.content-standard > div:first-child {
    border-right: 1px solid var(--color-neutral-300);

    @media (max-width: 680px) {
      border: none;

      & .footer-logo-m {
        display: none;
      }
    }
  }

  & ul.link-list {
    text-align: start;
    font-size: 18px;
  }
}

/* MENY CSS - Behavior changes */

.hamburger-menu-wrapper.ews-modal-wrapper[ews-modal-type="slidein"] {
  overflow: visible;
}
.hamburger-menu-wrapper .ews-modal-backdrop {
  top: var(--menu-top-offset);
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.4s ease;
}
.hamburger-menu-wrapper.ews-modal-wrapper[ews-modal-type="slidein"].active
  .ews-modal-backdrop {
  background-color: var(--menu-backdrop-tint);
}

.hamburger-menu-wrapper.ews-modal-wrapper[ews-modal-type="slidein"]
  .ews-modal-el {
  top: var(--menu-top-offset);
  right: 0;
  left: 0;
  bottom: auto;

  width: 100%;
  max-width: none;
  height: auto;
  max-height: calc(100vh - var(--menu-top-offset));
  max-height: calc(100dvh - var(--menu-top-offset));

  padding: clamp(28px, 5vw, 64px) clamp(20px, 6vw, 80px) clamp(36px, 5vw, 56px);
  background: var(--menu-bg);
  color: var(--menu-ink);

  /* Subtle drop shadow. It rides on the panel's opacity, which is 0 when the
     menu is closed, so the shadow is only visible while the menu is open. */
  box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.25);

  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.4s;

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Open state */
.hamburger-menu-wrapper.ews-modal-wrapper[ews-modal-type="slidein"].active
  .ews-modal-el {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

/* Flush-left content (Atlantic-style), using the full width of the sheet.
   No auto-centering — everything hangs off the left edge. */
.hamburger-menu-wrapper #hamburger-menu-content {
  max-width: calc(var(--content-standard) + var(--content-padding) * 2);
  width: 100%;
  height: auto;
  margin: 0 auto;

  flex-direction: row;
  align-items: start;

  & nav {
    order: 2;
  }
}

/* ---------------------------------------------------------------------------
   3. TOP BAR (profile shortcut + close button)
--------------------------------------------------------------------------- */
.hamburger-menu-wrapper .top {
  justify-content: flex-end;
  gap: var(--spacing-3, 12px);
  margin-bottom: clamp(20px, 3vw, 36px);
}

.hamburger-menu-wrapper #hamburger-menu-close {
  transition: color 0.2s ease;
}
.hamburger-menu-wrapper #hamburger-menu-close:hover {
  color: var(--menu-accent);
}

/* ---------------------------------------------------------------------------
   4. "Meny" heading -> editorial eyebrow label
--------------------------------------------------------------------------- */
.hamburger-menu-wrapper .inner-content h3 {
  display: none;
}

/* ---------------------------------------------------------------------------
   5. NAV COLUMNS  ->  each top-level item is a COLUMN, ruled at the top.
   The parent link is the column header; its dropdown children stack as ROWS
   beneath it (Atlantic-style). No numbers.
--------------------------------------------------------------------------- */
.hamburger-menu-wrapper .cm-header-hamburger-menu > ul.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  row-gap: clamp(28px, 3vw, 44px);
  align-items: start;
  padding: 0 var(--content-padding);

  @media (max-width: 680px) {
    padding: 0;
  }
}

/* Kill the theme's pill / card / active fills. */
.hamburger-menu-wrapper .inner-content .menu > li,
.hamburger-menu-wrapper .inner-content .menu > li.active,
.hamburger-menu-wrapper .inner-content .menu > li:has(.submenu > li.active) {
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0;
}

/* Each top-level item = a column, ruled at the top. */
.hamburger-menu-wrapper .cm-header-hamburger-menu > ul.menu > li {
  display: block;
}

/* Column header = the parent link. */
.hamburger-menu-wrapper .cm-header-hamburger-menu > ul.menu > li > a {
  display: block;
  padding: 0 !important;
  font-family: var(--font-menu);
  color: var(--color-text-surface-primary);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.15;
  text-decoration: none;
}

.hamburger-menu-wrapper .inner-content button.dropdown-toggle,
.hamburger-menu-wrapper .cm-header-hamburger-menu .dropdown-toggle,
.hamburger-menu-wrapper .dropdown-toggle {
  display: none !important;
}

.hamburger-menu-wrapper .cm-header-hamburger-menu .submenu,
.hamburger-menu-wrapper .cm-header-hamburger-menu .submenu.open {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: clamp(10px, 1.2vw, 10px) 0 0;
  padding: 0;
  width: 100%;
}
.hamburger-menu-wrapper .cm-header-hamburger-menu .submenu > li > a {
  display: block;
  padding: 0 !important;
  font-size: 14px;
  color: var(--color-text-surface-primary);
  text-decoration: none;
}

.hamburger-menu-wrapper nav.m-t-auto {
  margin-top: clamp(28px, 4vw, 48px);
}
.hamburger-menu-wrapper nav.m-t-auto > ul.menu {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-3, 12px);
}
.hamburger-menu-wrapper nav.m-t-auto > ul.menu > li {
  flex: 1 1 200px;
  border: 0;
}
.hamburger-menu-wrapper nav.m-t-auto .btn {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hamburger-menu-wrapper .ews-modal-el {
    transition-duration: 0.001s !important;
    transform: none !important;
  }
}

header.cm-header {
  position: sticky;
  top: 0;
  z-index: 101;
}

:root:has(header.cm-header > user-container .top-message) header.cm-header {
  top: calc(-1 * var(--top-message-height));
}

/* 
_____________________________________________________________________
    Artikelpage - styles related to articles
_____________________________________________________________________
*/

body.type-articles {
  & .article-layout {
    & > * {
      min-width: 0;
    }

    & aside.article-navigation {
      & nav {
        position: unset;
      }
    }

    & article.article-content {
      overflow-wrap: anywhere;

      & .text-block {
        margin: 0 auto;
        max-width: 665px;
      }
      & div {
        &
          span.size-sm.color-accent.font-header.text-uppercase.display-block.m-b-4.m-tablet-b-3.m-lgphone-b-2 {
          font-family: var(--font-main);
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 120%;
          text-transform: uppercase;

          & a[href$="kategori/byggmaterial"] {
            color: var(--color-byggmaterial-dark) !important;
          }

          & a[href$="kategori/fastighet"] {
            color: var(--color-fastighet-dark) !important;
          }

          & a[href$="kategori/arkitektur"] {
            color: var(--color-arkitektur-dark) !important;
          }
          & a[href$="kategori/byggprojekt"] {
            color: var(--color-byggprojekt-dark) !important;
          }
        }

        & .color-accent {
          color: inherit;
        }

        & .avatar {
          /* margin-right: 12px; */
        }

        & h1 {
          font-size: 40px;
          font-style: normal;
          font-weight: 600;
          line-height: 110%;
          letter-spacing: -2px;
        }

        & p.font-ingress {
          font-size: 22px;
          font-style: normal;
          font-weight: 400;
          line-height: 130%;
          letter-spacing: -0.5px;

          @media (max-width: 680px) {
            font-size: 18px;
          }
        }

        & div.cm-article-content {
          margin: 0 auto;
          max-width: 665px;

          & h2,
          h3,
          h4,
          h5,
          h6 {
            font-family: "Utopia Std";
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            letter-spacing: -1.1px;
          }

          & h3,
          h4 {
            font-family: var(--font-main);
            font-size: 20px;
            font-weight: 500;
          }

          & p,
          li {
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 180%;
            letter-spacing: -0.26px;

            @media (max-width: 680px) {
              font-size: 1rem;
              line-height: 1.5;
            }
          }
        }
      }

      & ul {
        & li {
        }
      }

      & p.card {
      }

      & blockquote {
        & p {
          /* font-weight: 500 !important;
          font-size: 34px !important;
          line-height: 1.12 !important;
          letter-spacing: -0.03em !important;
          text-wrap: pretty;

          @media (max-width: 680px) {
            font-size: 24px !important;
          } */
        }

        & cite {
          /* position: relative;
          padding-left: 18px;
          font-weight: 500 !important;
          font-size: 17px !important;

          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.5em;
            width: 10px;
            height: 10px;
            background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H8.99996C14.1702 0 17.9999 2.29786 17.9999 8.99996V17.9999H7.7872C3.44679 17.9999 0 15.0638 0 9.57443V0Z" fill="%230D3047"/></svg>');
            background-repeat: no-repeat;
            background-size: contain; */
        }
      }

      &::before {
        /* content: unset; */
      }
    }

    & aside.article-aside {
      & async-fetch-template {
        & user-container > section {
          & h2.size-md.m-v-z {
            padding: 5px 8px;
            background: var(--color-text-surface-secondary);
            font-family: var(--font-main);
            font-weight: 600;
            font-size: 12px;
            letter-spacing: -0.3px;
            text-transform: uppercase;
          }

          & h3.size-xs.font-text.weight-normal.m-v-z {
            font-family: var(--font-main);
            font-style: normal;
            font-weight: 500;
            line-height: 120%;
            letter-spacing: -0.4px;
          }

          & .articles-aside-list {
            padding: 0 var(--spacing-3);
          }

          & .articles-aside-item {
            align-items: start;
          }
        }

        /* TOP 5 */
        & user-container:first-child > section {
          background: var(--color-black);
          color: var(--color-surface-primary);
          padding: var(--spacing-5) var(--spacing-4);

          & h2.size-md.m-v-z {
            padding: 0;
            background: unset;
          }

          & .articles-aside-list {
            counter-reset: top-list;
            gap: 0;
          }

          & .articles-aside-item {
            margin-bottom: var(--spacing-2);
            counter-increment: top-list;

            /* Visa max 5 artiklar */
            &:nth-child(n + 6) {
              display: none;
            }

            /* Nummer istället för bild */
            & .media-block {
              background: transparent;
              aspect-ratio: auto;
              flex: 0 0 auto;
              width: auto;
              min-width: 2ch;

              & img {
                display: none;
              }

              &::before {
                content: counter(top-list);
                display: block;
                color: var(--color-neutral-200);
                font-family: var(--font-header);
                font-size: 30px;
                font-style: normal;
                font-weight: 600;
                line-height: 33px;
                letter-spacing: -1px;
              }
            }
          }
        }
      }
    }

    & .tag-list .tag {
      background: #000000;
      color: #ffffff;
      border-radius: 4px;
      padding: inherit 8px;
    }

    & div[role="region"] {
      & .text-block {
        display: none;
      }

      & .btn-secondary {
        border: none;
        background-color: transparent;
        color: #000000;
      }

      & .box-shadow-primary {
        box-shadow: none;
      }
    }
  }

  a.btn-icon {
    /* background: #ffffff !important;
      border: unset !important;

      &:first-child {
        display: none;
      } */
  }
}

/* Native-specifika styles för artikelinnehållet läggs här */
body.type-articles
  .article-layout
  article.article-content:has(.bgcolor-ad-card) {
  /* Annonsmarkeringen */
  background: #f7f7fc;
  padding-bottom: 24px;

  & .bgcolor-ad-card {
    background: #f7f7fc;
    color: var(--color-text-surface-primary) !important;
    margin-bottom: 24px;
    justify-content: center;

    & .label {
      display: none;
    }

    & p {
      font-weight: 500;

      &::before {
        content: "Sponsrat ";
      }
    }
  }
}

.bgcolor-ad-card {
  background: #f7f7fc;
}
/* 
_____________________________________________________________________
    Loginpage - styles related to login and register pages
_____________________________________________________________________
*/

body.view-signin {
  & .cm-sign-in {
    display: flex;
  }

  & .cm-signin-form {
    border-radius: 12px;
  }
}

/* 
_____________________________________________________________________
    Mina sifor - Styles related to my-pages
_____________________________________________________________________
*/

body.view-tags {
  & .filter-tag label {
    background: var(--color-black);
    font-family: var(--font-main);
    font-weight: 400;
  }

  & .filter-tag input:checked + label {
    border-color: var(--focus-ring-color);
    color: var(--focus-ring-color);
  }
}

/*
_____________________________________________________________________
    Kalenderpage
_____________________________________________________________________
*/
body.type-calendar {
  & div.hero-archive {
    background: var(--color-surface-primary);

    & h1 {
      font-family: var(--font-main);
    }

    & .hero-archive__illustration {
      display: none;
    }

    & custom-select button {
      border-radius: 8px;
      background: var(--btn-primary-text);
      color: var(--color-white);
    }
  }

  & .events-list-item {
    background: var(--color-surface-primary);
  }
}
/* 
_____________________________________________________________________
    Branschregister
_____________________________________________________________________
*/
body.type-businessdirectory {
  & div.businesses-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));

    @media (max-width: 870px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    & .color-white {
      color: var(--color-black) !important;
    }

    & .businesses-list-item {
      background: var(--color-surface-primary);

      & div.bg-media {
        display: none;
      }

      & .businesses-list-item__content {
        text-align: start;
        justify-content: start;
        align-items: start;
        width: 100%;

        & div {
          /* width: unset !important; */
          border-radius: 0 !important;
          max-width: unset !important;
        }

        & div.overflow-hidden.display-flex.m-b-2 {
          width: 120px;
        }

        & img {
          width: 100%;
          object-fit: contain;
        }

        & h3 {
          margin-bottom: var(--spacing-2);
          font-family: var(--font-main);
        }
      }
    }
  }

  & div.content-standard > div.card {
    background: var(--color-surface-primary);

    & > div {
      & div {
        width: unset !important;
        border-radius: 0 !important;
      }

      & h3 {
        margin-bottom: var(--spacing-2);
        font-family: var(--font-main);
      }
    }
  }

  & div.text-block {
    & .card {
      background: var(--color-black);
      color: var(--color-white);

      /* Kontaktuppgifter: texter i full bredd, alla länkar som knappar sida vid sida */
      & > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-2);

        & > span {
          flex: 0 0 100%;
        }

        & > span.weight-bold:first-child {
          display: none;
        }
      }

      & a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-top: var(--spacing-2);
        padding: 10px 18px;
        border: 1px solid var(--color-white);
        border-radius: 4px;
        background: transparent;
        color: var(--color-white) !important;
        font-weight: 500;
        line-height: 1;
        text-decoration: none !important;
        opacity: 1 !important;
        transition:
          background-color 0.15s ease,
          color 0.15s ease;

        /* Hover/fokus: invertera färgerna. !important så temats länkfärger inte slår igenom */
        &:hover,
        &:focus-visible {
          background: var(--color-white) !important;
          color: var(--color-black) !important;
          text-decoration: none !important;
        }

        &:focus-visible {
          outline: 2px solid var(--color-white);
          outline-offset: 2px;
        }

        /* Mobil: knapparna delar raden */
        @media (max-width: 680px) {
          flex: 1 1 auto;
        }
      }
    }
  }
}

/* 
_____________________________________________________________________
  
  BLOCKS - Styles related to Co-member site blocks
_____________________________________________________________________
*/

/* ETTAN Styles */

/* Main articles */
div.news-hero.cm-news-hero {
  & .article-list-large.cm-newslist-large {
    /* Länkfärger */

    a[title="Byggmaterial"] {
      color: var(--color-byggmaterial-dark) !important;
    }

    a[title="Fastighet"] {
      color: var(--color-fastighet-dark) !important;
    }

    a[title="Arkitektur"] {
      color: var(--color-arkitektur-dark) !important;
    }
    a[title="Byggprojekt"] {
      color: var(--color-byggprojekt-dark) !important;
    }

    & .card {
      padding: 0;

      & h2.size-lg {
        margin-top: 4px;
        margin-bottom: 12px;
      }

      & p.m-t-z.m-b-6.size-sm {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      & p.m-z {
        color: #4e4e4e;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
        text-transform: uppercase;

        & .weight-bold {
          font-weight: 500 !important;
        }

        & .color-accent {
          color: inherit !important;
        }
      }

      & span.size-xs {
        color: var(--color-neutral-200) !important;
        text-transform: capitalize !important;
      }
    }

    & .cm-native-card {
      background: #f7f7fc;
      & p,
      h2 {
        padding: 0 var(--spacing-4);
      }
    }
  }

  & h2.size-lg {
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -0.7px;

    @media (max-width: 870px) {
      font-size: 30px;
    }
  }

  h2.size-md {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.9px;
    width: 80%;

    @media (max-width: 870px) {
      font-family: var(--font-main);
      font-weight: 500;
    }
  }

  /* Columns — Newsletter signup (1st col): softer bottom-weighted scrim */
  & .grid-layout {
    & > .col:first-child {
      & .newsletter-blurb::after {
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 21.86%,
          rgba(0, 0, 0, 0.3) 99.95%
        ) !important;
      }
    }

    & .col {
      /* TOP 5 */
      .cm-news-toplist {
        background: var(--color-black);
        color: var(--color-surface-primary);

        @media (max-width: 870px) {
          padding: var(--spacing-4);
        }

        a[title="Byggmaterial"] {
          color: var(--color-byggmaterial) !important;
        }

        a[title="Fastighet"] {
          color: var(--color-fastighet) !important;
        }

        a[title="Arkitektur"] {
          color: var(--color-arkitektur) !important;
        }
        a[title="Byggprojekt"] {
          color: var(--color-byggprojekt) !important;
        }

        & .toggles {
          & button {
            border: unset;
            border-right: 1px solid var(--color-neutral-200);
          }

          & button:nth-child(1) {
            border-radius: 8px 0 0 8px;
          }

          & button:nth-child(3) {
            border-radius: 0 8px 8px 0;
            border: unset;
          }

          & button.active {
            color: #f2f2f2;
            background: var(--color-neutral-300);
          }
        }

        & h2.size-sm.m-z {
          font-family: var(--font-main);
          font-weight: 600;
          font-size: 12px;
          letter-spacing: -0.3px;
          text-transform: uppercase;
        }

        & .article-list {
          & .article {
            border: none;
            padding-bottom: 0;
            margin-bottom: var(--spacing-3);

            & .number > span {
              color: var(--color-neutral-200);
              font-family: var(--font-header);
              font-size: 30px;
              font-style: normal;
              font-weight: 600;
              line-height: 33px;
              letter-spacing: -1px;
            }

            & .text {
              display: flex;
              flex-direction: column;
              gap: 2px;
              padding-top: 2px;
              padding-bottom: 4px;

              & p {
                order: 2;
                color: var(--color-neutral-200);
                text-transform: uppercase;

                & .weight-bold {
                  font-weight: 500 !important;
                }

                & .color-accent {
                  color: inherit !important;
                }
              }

              & h3 {
                order: 1;
              }
            }
          }
        }
      }

      /* CM-newslist mini */
      .cm-newslist-mini {
        padding: 0;
        & ul {
          padding: 0 var(--spacing-4);

          & .article {
            margin-bottom: var(--spacing-4);

            & .text {
              & p {
                order: 2;
                color: #4e4e4e !important;
                text-transform: uppercase;

                & .weight-bold {
                  font-weight: 500 !important;
                }

                & .color-accent {
                  color: #4e4e4e !important;
                }
              }
            }
          }
        }
      }

      /* article headings */
      & h3.size-xs.m-z {
        font-family: var(--font-main);
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: -0.4px;
      }

      /* Blockheadings */
      h2.size-sm.m-t-z {
        padding: 5px 8px;
        background: var(--color-text-surface-secondary);
        font-family: var(--font-main);
        font-weight: 600;
        font-size: 12px;
        letter-spacing: -0.3px;
        text-transform: uppercase;
      }
    }
  }
}

/* kategorifärger i del 2 ettan */
body.type-startpage main > section:nth-child(1 of :has(.cm-news-hero)) {
  & .cm-news-hero .grid-layout {
    & > .col:first-child {
      & > div:last-child > .cm-newslist-mini > h2.size-sm.m-t-z {
        color: var(--color-byggprojekt);
      }
    }
    & > .col:last-child {
      & > div:last-child > .cm-newslist-mini > h2.size-sm.m-t-z {
        color: var(--color-fastighet);
      }
    }
  }
}
body.type-startpage main > section:nth-child(2 of :has(.cm-news-hero)) {
  & .cm-news-hero .grid-layout {
    & > .col:first-child {
      & > div:first-child > .cm-newslist-mini > h2.size-sm.m-t-z {
        color: var(--color-arkitektur-dark);
      }
    }
    & > .col:last-child {
      & > div:first-child > .cm-newslist-mini > h2.size-sm.m-t-z {
        color: var(--color-byggmaterial-dark);
      }
    }
  }
}

/* Kategorisidan ettan modifierad till 2 kolumner */

body.type-categories {
  & .cm-news-hero .grid-layout {
    grid-template-columns: 1fr 0.45fr;

    @media (max-width: 870px) {
      grid-template-columns: 1fr;
    }

    & > .col:first-child {
      grid-area: 1 / span 2;

      @media (max-width: 870px) {
        grid-area: 1;
      }

      & h2 {
        margin: 0 !important;
      }
    }

    & .cm-newslist-mini {
      a[title="Byggmaterial"] {
        color: var(--color-byggmaterial-dark) !important;
      }

      a[title="Fastighet"] {
        color: var(--color-fastighet-dark) !important;
      }

      a[title="Arkitektur"] {
        color: var(--color-arkitektur-dark) !important;
      }
      a[title="Byggprojekt"] {
        color: var(--color-byggprojekt-dark) !important;
      }

      & .article-list {
        padding: 0 !important;
        margin: 0 !important;
      }

      & .article {
        padding: var(--spacing-3);
        background-color: #f8f8f8;
        & .img {
          width: 45%;

          @media (max-width: 980px) {
            width: 35%;
          }
        }
      }
    }
  }
}

/* Article Grid styles */

section.bgcolor-surface-secondary {
  & articles-masonry.cm-article-list-masonry,
  div.cm-article-list-masonry {
    & .articles-masonry-item {
      border-color: color-mix(
        in srgb,
        var(--color-text-surface-secondary) 40%,
        transparent
      );
      .card {
        background: none;
        color: var(--color-text-surface-secondary) !important;

        a[title="Byggmaterial"] {
          color: var(--color-byggmaterial) !important;
        }

        a[title="Fastighet"] {
          color: var(--color-fastighet) !important;
        }

        a[title="Arkitektur"] {
          color: var(--color-arkitektur) !important;
        }
        a[title="Byggprojekt"] {
          color: var(--color-byggprojekt) !important;
        }
      }
    }
  }
}

articles-masonry.cm-article-list-masonry,
div.cm-article-list-masonry {
  gap: var(--spacing-4) 0 !important;

  & .articles-masonry-item {
    border-right: 1px solid var(--color-text-surface-secondary);
  }

  /* No border on the last column of each row: 4 cols desktop, 3 cols 871-1200px, 2 cols 681-870px, 1 col mobile */
  @media (min-width: 1201px) {
    & > div:nth-child(4n) .articles-masonry-item,
    & > .articles-masonry-item:nth-child(4n) {
      border-right: 0;
    }
  }

  @media (min-width: 871px) and (max-width: 1200px) {
    & > div:nth-child(3n) .articles-masonry-item,
    & > .articles-masonry-item:nth-child(3n) {
      border-right: 0;
    }
  }

  @media (min-width: 681px) and (max-width: 870px) {
    & > div:nth-child(2n) .articles-masonry-item,
    & > .articles-masonry-item:nth-child(2n) {
      border-right: 0;
    }
  }

  @media (max-width: 680px) {
    & .articles-masonry-item {
      border-right: 0;
    }
  }

  &
    > div:has(.articles-masonry-item):not(:has(~ div .articles-masonry-item))
    .articles-masonry-item:last-child {
    border-right: 0;
  }
}

articles-swiper.cm-article-list-swiper {
  & .articles-swiper-item {
    border-right: 1px solid var(--color-text-surface-secondary);
  }

  & .swiper-wrapper > .articles-swiper-item:last-child {
    border-right: 0;
  }
}

div.cm-article-card {
  & .text-block {
    a[title="Byggmaterial"] {
      color: var(--color-byggmaterial-dark) !important;
    }

    a[title="Fastighet"] {
      color: var(--color-fastighet-dark) !important;
    }

    a[title="Arkitektur"] {
      color: var(--color-arkitektur-dark) !important;
    }
    a[title="Byggprojekt"] {
      color: var(--color-byggprojekt-dark) !important;
    }

    & > a {
      font-weight: 500;
      font-family: var(--font-main);
      text-transform: uppercase;
      font-size: 14px;
    }

    & .color-accent {
      color: var(--color-neutral-300) !important;
    }

    & h3 {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.4px;
      line-height: 1.2;

      @media (max-width: 680px) {
        font-size: 18px;
      }
    }
  }
}

/* Section Heading styles */
div.content-standard
  > div.text-block.display-flex.justify-between.align-items-end.direction-tablet-column.align-tablet-items-start.m-b-7.m-xlphone-b-5 {
  border-bottom: 1px solid;
  border-color: color-mix(
    in srgb,
    var(--color-text-surface-secondary) 80%,
    transparent
  );

  & h2.size-lg.m-z {
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 400;
  }
}

/* TEXT & Media Styles */

section.cm-text-media {
  & .card {
    background: var(--color-black);
    color: var(--color-white);

    & .btn {
      background: var(--btn-primary-bg);
      color: var(--btn-primary-text);
      border-color: var(--btn-primary-bg);
    }

    & h2 {
      font-family: var(--font-main);
      font-size: 70px;
      font-style: normal;
      font-weight: 600;
      line-height: 100%;
      letter-spacing: -2px;
    }

    @media (max-width: 680px) {
      & h2 {
        font-size: 40px;
      }
    }
  }
}

/* CM-paywall */
copay-paywall {
  & .cm-paywall__head {
    & h2 {
      color: var(--color-black);
      font-size: 32px;
      font-style: normal;
      font-weight: 600;
      line-height: 110%;
      letter-spacing: -2px;

      @media (max-width: 680px) {
        font-size: 24px;
        letter-spacing: -0.4px;
      }
    }
  }
}