/* ============================================================
   DOWNSTAIRS - insiktssidorna
   ------------------------------------------------------------
   Lag tidigare inline pa insikter.html. Flyttad hit nar
   /en/insights fick samma layout: tva kopior av samma 4 kB
   hade glidit isar vid forsta andringen.
   Laddas av bade /insikter och /en/insights.
   ============================================================ */
.ins-hero { padding-top: 78px; }
  .ins-hero .ih-inner { padding-block: clamp(52px,7vw,100px); max-width: 56ch; }
  .ins-hero .display { margin: 24px 0 24px; }

  /* ---------- toppen: två kort ----------
     Två i stället för tre. Det vänstra är alltid det senaste, det
     högra det mest lästa. Med tre kort blev inget av dem ett val. */
  .top-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,3.5vw,48px); margin-top: clamp(36px,4vw,56px); }
  .top-card { display:flex; flex-direction:column; gap:16px; color:inherit; text-decoration:none; }
  .top-card .tc-media { position:relative; aspect-ratio: 16/10; overflow:hidden; border-radius:3px; background:var(--cream-warm); }
  .top-card .tc-media img { width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease); }
  .top-card:hover .tc-media img { transform: scale(1.04); }
  .tc-badge { position:absolute; top:16px; left:16px; z-index:2; font-size:0.64rem; letter-spacing:0.18em;
              text-transform:uppercase; padding:8px 14px; border-radius:2px;
              background:var(--green); color:var(--on-green); }
  .tc-badge.is-pop { background:var(--paper); color:var(--gold); border:1px solid var(--line-gold); }
  .top-card .tc-cat { font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); }
  .top-card h3 { font-size: clamp(1.45rem,2.2vw,1.9rem); transition: color .4s var(--ease); }
  .top-card:hover h3 { color: var(--gold); }
  .top-card p { color:var(--ink-soft); font-size:0.98rem; max-width:44ch; }
  .top-card .tc-meta { font-size:0.8rem; color:var(--gold); }

  /* ---------- verktygsrad: kategori och sortering ---------- */
  .art-toolbar { display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
                 flex-wrap:wrap; margin-top: clamp(28px,3vw,40px); }
  .filter-row { display:flex; flex-wrap:wrap; gap:10px; }
  .sort-row { display:flex; align-items:baseline; gap:14px; }
  .sort-row .sr-lab { font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
  .sort-row button { background:none; border:0; padding:0; cursor:pointer; font: inherit;
                     font-size:0.9rem; color:var(--ink-faint); border-bottom:1px solid transparent; }
  .sort-row button.on { color:var(--green); border-bottom-color:var(--gold); }

  /* ---------- listan ---------- */
  .art-list { list-style:none; margin: clamp(22px,2.5vw,32px) 0 0; padding:0; border-top:1px solid var(--line); }
  .art-item { border-bottom:1px solid var(--line); }
  .art-row { display:grid; grid-template-columns: 150px 1fr auto; gap: clamp(20px,2.5vw,34px);
             align-items:center; padding: 20px 0; color:inherit; text-decoration:none;
             transition: padding-left .4s var(--ease); }
  .art-row:hover { padding-left:12px; }
  .ar-thumb { display:block; aspect-ratio:4/3; overflow:hidden; border-radius:3px; background:var(--cream-warm); }
  .ar-thumb img { width:100%; height:100%; object-fit:cover; }
  .ar-text { display:block; }
  .ar-cat { display:block; font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:7px; }
  .ar-title { display:block; font-family:'Crimson Pro',serif; font-size:1.22rem; color:var(--green); line-height:1.3; }
  .ar-lede { display:block; margin-top:6px; color:var(--ink-soft); font-size:0.9rem; line-height:1.55; max-width:62ch; }
  .ar-meta { font-size:0.74rem; letter-spacing:0.05em; color:var(--ink-faint); white-space:nowrap; text-align:right; }

  .is-hidden { display:none !important; }
  /* Rubrik som håller ihop dokumentstrukturen utan visuellt brus. */
  .sr-only-head { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

  @media (max-width: 880px) {
    .top-grid { grid-template-columns:1fr; gap:36px; }
    .art-row { grid-template-columns: 104px 1fr; row-gap:10px; }
    .ar-meta { grid-column:2; text-align:left; }
    .ar-lede { display:none; }
  }