/* ==========================================================================
   Ridgeback · Tankar & insikter (lista och artikel)
   ========================================================================== */

/* --- Lista ------------------------------------------------------------- */
.ins-hero h1 { margin-top: 0; }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 16px; }
.js .filter[hidden] { display: flex; }
.filter__etikett { font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: var(--rbd-ls-kicker); text-transform: uppercase; color: var(--rbd-gra); }
.filter__knappar { display: flex; flex-wrap: wrap; gap: 8px; }
.filter__knapp { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font: var(--rbd-medium) 14px/1 var(--rbd-font);
                 color: var(--rbd-skiffer); background: var(--rbd-vit); border: 1px solid var(--rbd-steg-4); border-radius: var(--rbd-radie);
                 cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.filter__knapp span { font-weight: var(--rbd-roman); font-size: 12px; color: var(--rbd-gra); }
.filter__knapp:hover { border-color: var(--rbd-djupbla); }
.filter__knapp[aria-pressed="true"] { background: var(--rbd-djupbla); border-color: var(--rbd-djupbla); color: var(--rbd-vit); }
.filter__knapp[aria-pressed="true"] span { color: var(--rbd-steg-4); }
.filter__status { font-size: 14px; color: var(--rbd-gra); margin: 0 0 28px; min-height: 1.4em; }
.ins { padding-top: 56px; }
/* Första kortet är större, tar två kolumner */
.ik--stor { grid-column: span 2; }
.ik--stor .ik__lank { padding: 40px; background: var(--rbd-djupbla); color: var(--rbd-vit); }
.ik--stor h3 { font-size: clamp(28px, 3vw, 40px); color: var(--rbd-vit); max-width: 16em; }
.ik--stor p { font-size: 17px; color: var(--rbd-steg-4); max-width: 34em; }
.ik--stor .ik__ikon { background: rgb(255 255 255 / .12); color: var(--rbd-massing); }
.ik--stor .tagg { background: rgb(255 255 255 / .14); color: var(--rbd-vit); }
.ik--stor .ik__fot .rbd-textlank { color: var(--rbd-vit); }
.ik--stor .ik__las { color: var(--rbd-steg-4); }
.ins__grid.is-filtrerad .ik--stor { grid-column: auto; }
.ins__grid.is-filtrerad .ik--stor .ik__lank { padding: 28px; }
.ins__grid.is-filtrerad .ik--stor h3 { font-size: 22px; }
.ins__grid.is-filtrerad .ik--stor p { font-size: 15px; }
.ins__tom { padding: 40px 0; color: var(--rbd-gra); }
.ins__fot { margin-top: 40px; }
@media (max-width: 600px) { .ik--stor { grid-column: auto; } .ik--stor .ik__lank { padding: 28px; } }

/* --- Artikel ---------------------------------------------------------- */
.art__huvud { background: var(--rbd-hero-ljus); padding-block: 40px clamp(48px, 6vw, 80px); }
.art__huvud-inner { max-width: calc(760px + 2 * var(--rbd-gutter)); margin-left: max(0px, calc((100vw - var(--rbd-max)) / 2)); }
.art__taggar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.art__huvud h1 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 20px; }
.art__huvud .rbd-ingress { font-size: clamp(19px, 1.8vw, 24px); margin-bottom: 24px; }
.art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--rbd-gra); }
.art__meta .rbd-ikon { width: 20px; height: 20px; color: var(--rbd-djupbla); }

.art__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 80px; padding-block: clamp(48px, 6vw, 88px); align-items: start; }
.art__kropp { max-width: 68ch; }
.art__kropp > p { font-size: 18px; line-height: 1.7; color: var(--rbd-skiffer); margin: 0 0 1.2em; }
.art__kropp > p:first-child { font-size: 20px; }
.art__kropp h2 { font-size: 28px; margin: 1.6em 0 .6em; }
.art__kropp ul { margin: 0 0 1.4em; padding: 0; list-style: none; display: grid; gap: 12px; }
.art__kropp li { position: relative; padding-left: 28px; font-size: 18px; line-height: 1.55; margin: 0; }
.art__kropp li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 2px; background: var(--rbd-massing); }
.art__citat { margin: 2em 0; padding: 0; }
.art__citat::before { content: "\201D"; display: block; font-size: 64px; line-height: .7; font-weight: var(--rbd-bold); font-style: italic; color: var(--rbd-massing); }
.art__citat blockquote { margin: 12px 0 0; padding: 0; border: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; font-weight: var(--rbd-light); color: var(--rbd-skiffer); max-width: 24em; }

.art__sido { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 20px; }
.art__sido-ruta { padding: 24px; background: var(--rbd-dimma); display: grid; gap: 12px; }
.art__sido-ruta .rbd-kicker { margin: 0; }
.art__tjanst { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--rbd-linje);
               color: var(--rbd-skiffer); text-decoration: none; }
.art__tjanst .rbd-ikon { color: var(--rbd-djupbla); }
.art__tjanst strong { display: block; font-size: 16px; }
.art__tjanst span span, .art__tjanst span { font-size: 14px; color: var(--rbd-gra); }
.art__tjanst strong { color: var(--rbd-skiffer); }
.art__tjanst:hover strong { color: var(--rbd-djupbla); text-decoration: underline; }
.art__sido-cta { background: var(--rbd-vit); box-shadow: var(--rbd-niva-b); }
.art__sido-cta strong { font-size: 18px; }
.art__sido-cta p { margin: 0; font-size: 15px; color: var(--rbd-gra); }
.art__sido-cta .rbd-knapp { justify-self: start; }

.ins-rel__topp { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 32px; }
.ins-rel__topp h2 { margin: 0; }

@media (max-width: 960px) {
  .art__grid { grid-template-columns: 1fr; gap: 48px; }
  .art__sido { position: static; }
}