/* ============================================================
   NEXTRUM — sidan /nyheter (2026-10-30, omgjord 2026-11-03)
   Bara cinemas tokens, inga egna färger: sidan följer ljust och mörkt
   läge av sig själv. Laddas efter cinema.

   Den senaste nyheten står först och stort med bilden som omslag, de
   andra som kort med bilden liten bredvid. Varje kort har ordningens färg
   (--f, blå, lila, grön, lera, rosa som på menysidorna), i pricken vid
   dagen och i kanten när det är utfällt. Den fullständiga nyheten fälls
   ut på plats (Leo 2026-11-03: "korta urklipp ... tryck för att läsa, då
   förlängs sidan"): grid-raden går från 0fr till 1fr, och skriptet sätter
   bara .oppen och inert.
   ============================================================ */
.nyh-lista{max-width:820px}
.nyh-tom{color:var(--bl-2);font-size:1.05rem;line-height:1.6}
.nyh-tom a{color:var(--acc-text);text-decoration:underline}
.nyh-kort{list-style:none;margin:0;padding:0;display:grid;gap:18px}

.nyh-kort > li:nth-child(5n+1){--f:var(--amne-ma)}
.nyh-kort > li:nth-child(5n+2){--f:var(--amne-en)}
.nyh-kort > li:nth-child(5n+3){--f:var(--amne-no)}
.nyh-kort > li:nth-child(5n+4){--f:var(--acc)}
.nyh-kort > li:nth-child(5n+5){--f:var(--amne-ms)}

.nyh-a{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;align-items:start;
  padding:clamp(20px,3vw,30px);border:1px solid var(--ln);border-radius:22px;background:var(--yta);
  color:inherit;scroll-margin-top:96px;transition:border-color .25s ease,box-shadow .25s ease}
.nyh-a:hover{border-color:color-mix(in srgb,var(--f,var(--acc)) 35%,var(--ln))}
.nyh-a.oppen{border-color:color-mix(in srgb,var(--f,var(--acc)) 55%,var(--ln));
  box-shadow:0 18px 50px -30px color-mix(in srgb,var(--f,var(--acc)) 60%,transparent)}
.nyh-a.har-bild:not(.forst){grid-template-columns:minmax(0,1fr) minmax(0,190px)}
.nyh-a.har-bild.oppen:not(.forst){grid-template-columns:minmax(0,1fr)}

/* Dagen med ordningens prick, och Senaste på den första. */
.nyh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-size:.85rem;font-weight:600;
  color:var(--bl-3);letter-spacing:.01em}
.nyh-meta time{display:inline-flex;align-items:center;gap:8px}
.nyh-meta time::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--f,var(--acc))}
.nyh-senast{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;
  background:color-mix(in srgb,var(--f,var(--acc)) 14%,transparent);color:var(--f,var(--acc-text));
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.nyh-a h2{margin:10px 0 0;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.nyh-a.forst h2{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.12;letter-spacing:-.025em}
.nyh-urklipp{margin:10px 0 0;max-width:62ch;color:var(--bl-2);font-size:1.02rem;line-height:1.6}
.nyh-a.forst .nyh-urklipp{font-size:1.12rem}
.nyh-a.oppen .nyh-urklipp{font-weight:600;color:var(--bl)}
.nyh-a.oppen .nyh-urklipp.ur-texten{display:none}

/* Bilderna: omslaget över den första, tummen bredvid de andra (den går
   när kortet fälls ut, för då står bilden stor i texten). */
.nyh-omslag{display:block;width:calc(100% + 2*clamp(20px,3vw,30px));max-width:none;
  margin:calc(-1*clamp(20px,3vw,30px)) calc(-1*clamp(20px,3vw,30px)) clamp(20px,3vw,28px);
  aspect-ratio:16/8;object-fit:cover;border-radius:21px 21px 0 0}
.nyh-tumme{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px}
.nyh-a.oppen .nyh-tumme{display:none}

/* Utfällningen. Det inre har overflow:hidden, så att raden kan vara 0. */
.nyh-hela{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.nyh-hela-inne{min-height:0;overflow:hidden}
.nyh-a.oppen .nyh-hela{grid-template-rows:1fr}
.nyh-hela-inne > :first-child{margin-top:22px}
.nyh-bild{display:block;width:100%;height:auto;border-radius:18px}
.nyh-text{max-width:66ch}
.nyh-text > :first-child{margin-top:22px}
.nyh-text p{margin:0 0 16px;font-size:1.06rem;line-height:1.75;color:var(--bl-2);overflow-wrap:anywhere}
.nyh-text a{color:var(--acc-text);text-decoration:underline}
.nyh-text h3{margin:30px 0 10px;font-size:1.3rem;line-height:1.3;letter-spacing:-.015em}
.nyh-text ul{margin:0 0 16px;padding:0;list-style:none;color:var(--bl-2);font-size:1.06rem;line-height:1.7}
.nyh-text li{position:relative;margin:0 0 8px;padding-left:22px}
.nyh-text li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--f,var(--acc))}
.nyh-text strong{color:var(--bl)}
.nyh-knapp{margin:8px 0 6px}

/* Knappen: 44 px att trycka på, och den rör sig med scale, aldrig transform. */
.nyh-las{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:16px;padding:0 18px;
  border:1px solid var(--ln);border-radius:999px;background:transparent;color:var(--bl);
  font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:scale .15s ease,background .2s ease,border-color .2s ease}
.nyh-las:hover{border-color:var(--f,var(--acc));background:color-mix(in srgb,var(--f,var(--acc)) 8%,transparent)}
.nyh-las:active{scale:.97}
.nyh-las::after{content:"";width:7px;height:7px;border-right:2px solid var(--f,var(--acc));
  border-bottom:2px solid var(--f,var(--acc));rotate:45deg;margin-top:-4px;transition:rotate .3s ease,margin .3s ease}
.nyh-las[aria-expanded="true"]::after{rotate:-135deg;margin-top:3px}

@media (max-width:620px){
  .nyh-a.har-bild:not(.forst){grid-template-columns:minmax(0,1fr) 92px;gap:0 14px}
  .nyh-a:not(.forst) .nyh-tumme{border-radius:12px}
  .nyh-omslag{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .nyh-a,.nyh-hela,.nyh-las,.nyh-las::after{transition:none}
}