/* CS Auto – Komponentstilar (artikel+bild, rubrik, logoslinga, bildspel, inbäddning). Bygger på tokens i site.css.

   Komponenterna bär sina egna färger från databasen (bakgrund/textfärg), så
   sektionen får dem inline och allt inuti följer --cs-comp-text. Brödtext
   ritas med 82 % av textfärgen (color-mix) så att hierarkin rubrik/brödtext
   håller på vilken fond som helst. När textfärgen är ljus lägger mallen även
   på .cs-section--navy, som ger grön kicker och ljusa länkar. */

/* ── Gemensamt för komponentsektionerna ─────────────────────────────── */
/* Den gamla fontawesome.css sätter .fa-solid till 2.5rem och en egen färg.
   I knappar och pennor ska ikonen följa textens storlek och färg. */
.cs-comp .cs-btn .fa-solid,.cs-comp .cs-edit .fa-solid,.cs-slideshow .cs-btn .fa-solid,.cs-slideshow .cs-edit .fa-solid{font-size:1em;color:inherit}
.cs-comp .cs-prose{max-width:62ch;font-size:var(--cs-fs-2);color:var(--cs-comp-text,var(--cs-ink-2));color:color-mix(in srgb,var(--cs-comp-text,var(--cs-ink-2)) 82%,transparent)}
.cs-comp .cs-prose p,.cs-comp .cs-prose li{font-size:inherit;color:inherit}
.cs-comp .cs-prose strong,.cs-comp .cs-prose h2,.cs-comp .cs-prose h3,.cs-comp .cs-prose h4{color:var(--cs-comp-text,var(--cs-ink))}
.cs-comp .cs-prose a{color:var(--cs-link)}
.cs-comp .cs-prose--light a{color:var(--cs-green)}
.cs-comp__lede{font-size:var(--cs-fs-3);line-height:1.4;margin:0 0 22px;max-width:58ch;
  color:var(--cs-comp-text,var(--cs-ink-2));color:color-mix(in srgb,var(--cs-comp-text,var(--cs-ink-2)) 82%,transparent)}
.cs-comp .cs-card__ic{margin-bottom:22px}
.cs-comp.cs-section--navy .cs-card__ic{background:rgba(255,255,255,.1);color:var(--cs-green)}
.cs-comp__edit{text-align:center;margin-top:24px}
.cs-comp__edit .cs-edit,.cs-comp .cs-actions .cs-edit{margin-left:0}

/* ── Artikel + bild ─────────────────────────────────────────────────── */
.cs-comp--article .cs-split h2{margin-bottom:18px}

/* ── Rubrik ─────────────────────────────────────────────────────────── */
.cs-comp--headline{padding-bottom:clamp(32px,4vw,56px)}
.cs-comp--headline .cs-sec-head{margin-bottom:0}
.cs-comp--headline .cs-kicker{font-size:var(--cs-fs-3);margin-bottom:10px}
.cs-comp--headline .cs-sec-head p{color:var(--cs-comp-text,var(--cs-ink-2));color:color-mix(in srgb,var(--cs-comp-text,var(--cs-ink-2)) 82%,transparent)}
.cs-comp--headline .cs-edit{margin:16px 0 0}

/* ── Logoslinga ─────────────────────────────────────────────────────── */
.cs-comp--slider{padding:clamp(48px,6vw,84px) 0}
.cs-comp--slider .cs-sec-head{margin-bottom:30px}
/* Två identiska uppsättningar och translateX(-50%) ger sömlös loop; avståndet
   läggs som padding på varje logotyp (inte gap) så att halvorna blir exakt lika. */
.cs-comp--slider .cs-marquee__track{gap:0;animation-duration:max(18s,calc(var(--cs-mq-n,10) * 4s))}
.cs-comp--slider .cs-marquee__logo{flex:none;padding-right:clamp(44px,5vw,88px)}
.cs-comp--slider .cs-marquee__logo a{display:block}
.cs-comp--slider .cs-marquee__logo img{max-width:220px;object-fit:contain}
/* Mörk fond: logotyperna blir vita siluetter (mörka logotyper syns annars inte), färg vid hover */
.cs-comp--slider.cs-section--navy .cs-marquee__logo img{filter:grayscale(100%) brightness(0) invert(1);opacity:.85}
.cs-comp--slider.cs-section--navy .cs-marquee__logo:hover img{filter:none;opacity:1}

/* ── Bildspel: en hero i taget, den aktiva tonas in ─────────────────
   Dolda bilder är display:none (inte bara osynliga) så att deras filmer
   pausas av site.js och inget i dem går att tabba till. */
.cs-slideshow{position:relative;isolation:isolate;background:var(--cs-navy-deep)}
.cs-slideshow__slides{display:grid}
.cs-slideshow .cs-slideshow__slide{display:none;grid-area:1/1}
.cs-slideshow .cs-slideshow__slide.is-active{display:flex;animation:cs-comp-fade .6s ease}
@keyframes cs-comp-fade{from{opacity:0}to{opacity:1}}
.cs-slideshow .cs-hero__inner{padding-bottom:150px}
.cs-slideshow__ctl{position:absolute;left:0;right:0;bottom:26px;z-index:5;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 20px}
.cs-slideshow__btn{width:56px;height:56px;padding:0;border-radius:50%;font-size:var(--cs-fs-2);flex:none}
.cs-slideshow__btn:disabled{opacity:.35;cursor:default;transform:none}
.cs-slideshow__dots{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.cs-slideshow__dot{width:40px;height:40px;padding:0;border:0;background:transparent;display:grid;place-items:center;border-radius:50%;color:#fff}
.cs-slideshow__dot::before{content:"";width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.45);transition:transform .2s,background .2s}
.cs-slideshow__dot:hover::before{background:rgba(255,255,255,.8)}
.cs-slideshow__dot[aria-current="true"]::before{background:var(--cs-green);transform:scale(1.4)}
.cs-slideshow__ctl .cs-edit{margin-left:14px}

/* ── Inbäddning (iframe) ────────────────────────────────────────────── */
.cs-embed{max-width:900px;margin-inline:auto;background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-r);padding:14px;box-shadow:var(--cs-shadow)}
.cs-embed iframe{width:100%;height:620px;border:0;display:block;border-radius:var(--cs-r-sm);background:#fff}

/* ── Mobil ──────────────────────────────────────────────────────────── */
@media (max-width:700px){
  .cs-comp--slider{padding:44px 0}
  .cs-comp--slider .cs-marquee__logo img{height:52px;max-width:170px}
  .cs-slideshow .cs-hero__inner{padding-bottom:130px}
  .cs-slideshow__btn{width:50px;height:50px}
  .cs-slideshow__ctl{bottom:18px}
  .cs-embed{padding:10px}
  .cs-embed iframe{height:560px}
}