/* =========================================
   Case — enskilt kundcase

   Följer sajtens designsystem: djup genom 1px-linjer och tonskifte, aldrig
   mjuka skuggor. Den hårda offsetskuggan 6px 6px 0 finns bara vid hover och
   fokus. Radien är koncentrisk mot ytans padding.

   Avsteg från förlagan "Case SSC": den gröna accentfärgen finns inte i CCO:s
   system, där blått är enda mättade färgen och betyder handling. Etiketter är
   därför dämpad blyerts, och blått används bara på länkar och knappar.
   ========================================= */

/* Luften mellan text och det som står bredvid den - bild, siffra, faktalista.
   --grid-gap är dimensionerad för rutnät av likadana kort och ger bara ~29px
   vid 1440, alltså mindre än blockens egen radgap på 43px: luften krympte när
   layouten gick från staplad till tvåspaltig. Ett eget mått i stället, ungefär
   dubbelt så stort. Gäller inte rutnät av bilder, där tätare är rätt. */
.case-fakta,
.case-block,
.case-citat {
  --case-kolumngap: var(--section-space-m);
}

/* --- Etikett (den lilla versala raden ovanför rubriker) --- */

.case-etikett {
  margin: 0;
  color: var(--text-dark-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Sajtens globala länkregel (:is(.brxe-text, …) a) är mer specifik än en enkel
   klass, men den läser --link-color. Att sätta variabeln vinner därför utan
   specificitetskrig och utan !important. */
.case-tillbaka {
  --link-color: var(--text-dark-muted);

  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color 0.2s ease;
}

/* Två klasser (0,2,0) slår den globala regelns (0,1,1) utan !important.
   Elementet bär redan båda. */
.case-tillbaka.case-etikett {
  text-decoration: none;
}

.case-tillbaka:hover,
.case-tillbaka:focus-visible {
  color: var(--secondary);
}

.color-scheme--alt .case-tillbaka:hover,
.color-scheme--alt .case-tillbaka:focus-visible {
  color: var(--secondary-light);
}

/* =========================================
   Fakta + brödtext
   ========================================= */

.case-fakta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-space-s);
  padding-block-start: var(--space-l);
  border-block-start: 1px solid var(--neutral-light);
}

@media (width >= 62em) {
  .case-fakta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--case-kolumngap);
  }
}

.case-fakta__lista {
  margin: 0;
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.case-fakta__rad {
  display: grid;
  gap: 0;
}

.case-fakta__varde {
  margin: 0;
  font-size: var(--text-s);
  line-height: 1.4;
}

.case-fakta__varde a {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.case-fakta__taggar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Etiketterna är information, inte handling — därför gräddyta, inte blå. */
.case-tagg {
  padding: calc(var(--space-xs) / 2) var(--space-xs);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius);
  background-color: var(--primary);
  color: var(--text-dark);
  font-size: var(--text-xs);
  font-weight: 500;
}

.case-fakta__text {
  display: grid;
  gap: 1.25em;
  max-inline-size: 64ch;
  color: var(--text-dark-muted);
  text-wrap: pretty;
}

.case-fakta__text > :first-child { margin-block-start: 0; }
.case-fakta__text > :last-child { margin-block-end: 0; }

.case-fakta__cta {
  margin: 0;
  padding-block-start: var(--space-xs);
}

/* Neutralknappen. Ytan är --neutral-ultra-dark, inte --black: den senare vänder
   till vitt i mörkt läge och gav vit text på vit knapp (kontrast 1).
   --neutral-ultra-dark ligger still i båda schemana, så texten kan vara literal
   #fff. I mörkt läge byter knappen till ljus yta enligt designsystemets regel
   om knappar på mörka sektioner. */
.case-knapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  background-color: var(--neutral-ultra-dark);
  color: #fff;
  font-size: var(--text-s);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-knapp:hover,
.case-knapp:focus-visible {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 rgba(var(--shadow-rgb), 0.2);
}

/* Mot nattarket vänder knappen: ljus yta, mörk text. Literalerna är avsiktliga
   — regeln gäller bara i mörkt läge, så vändande variabler vore fel här. */
.color-scheme--alt .case-knapp,
.color-scheme--alt .case-knapp:hover,
.color-scheme--alt .case-knapp:focus-visible {
  background-color: var(--primary-ultra-light);
  color: #111318;
}

/* =========================================
   Innehållsblock — Case-layoutsystemet
   =========================================

   Nio blocktyper, A–I. J (citatet) är en egen sektion längre ned.
   Tre regler styr helheten:
     1. Scenen — varje mockup ligger på en tonad yta, aldrig löst på vitt.
     2. Fem format — 21:9, 16:9, 3:2, 4:3, 4:5. Inga andra.
     3. Rytm — stort block följs av mindre, aldrig två textblock i rad.
   ========================================= */

.case-block {
  display: grid;
  gap: var(--section-space-s);
}

/* Luften inuti ett block är mindre än avståndet mellan block, så ett block
   läses ihop som en enhet i stället för att falla isär i två. */
.case-block__del {
  display: grid;
  gap: var(--space-l);
}

/* --- Bildytan ------------------------------------------------------------

   Grundläget är ingen scen alls: bilden fyller sin ruta, kant i kant. Av 23
   bilder i de publicerade casen är exakt två urklippta mockuper med
   genomskinlig bakgrund - för de övriga 21 blir en tonad yta med padding en
   färgad ram runt fotot, eller en dubbel ram när bilden redan har egen
   bakgrund. Scenen slås därför på per block, inte av som undantag.

   Proportionen är blockets, inte bildens. Fem format finns i systemet och
   inga andra, så material med vitt skilda former ändå bildar ett rutnät. */

.case-scen {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  border-radius: var(--radius-m);
  overflow: hidden;
}

/* Scenen påslagen: tonad yta med jämn luft runt mockupen. Färgen sätts av
   färgväljaren som --scen på elementet, så vilken färg som helst fungerar. */
.case-scen--pa {
  padding: clamp(1.6rem, 3vw, 4rem);
  background-color: var(--scen);
}

.case-scen--21-9 { aspect-ratio: 21 / 9; }
.case-scen--16-9 { aspect-ratio: 16 / 9; }
.case-scen--3-2  { aspect-ratio: 3 / 2; }
.case-scen--4-3  { aspect-ratio: 4 / 3; }
.case-scen--4-5  { aspect-ratio: 4 / 5; }

/* Bilden fyller rutan. Regel 2 i systemet: bilder beskärs alltid till ett av
   formaten. Utan min-*-nollorna spränger en stor bild grid-cellen och
   aspect-ratio får aldrig bestämma höjden. */
.case-scen img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  object-fit: cover;
}

/* Material som ligger långt utanför alla fem format visas helt i stället för
   att beskäras sönder. PHP avgör; se cco_case_beskar_illa(). */
.case-scen--hel img {
  object-fit: contain;
}

/* På en scen är bilden en urklippt mockup som ska synas hel, inte beskäras. */
.case-scen--pa img {
  object-fit: contain;
  border-radius: var(--radius-s);
}

/* Flera enheter på samma scen, för mobilvyer i par. */
.case-scen--flera {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: clamp(1.2rem, 2.5vw, 3rem);
}

.case-scen--flera img {
  object-fit: contain;
  block-size: 100%;
  inline-size: auto;
  max-inline-size: 100%;
  margin-inline: auto;
}

/* Textfärgen kan inte längre hänga på ett färgnamn, eftersom färgen väljs
   fritt i en väljare. PHP räknar ut ytans ljushet och sätter klassen. */
.case-scen--mork {
  color: var(--primary-ultra-light);
}

/* Etikett och brödtext har egna färger och ärver därför inte den ljusa
   texten - de måste vändas var för sig. */
.case-scen--mork .case-etikett,
.case-scen--mork .case-block__text {
  color: color-mix(in srgb, var(--primary-ultra-light) 80%, transparent);
}

/* --- A · Scen, full bredd --- */

.case-block__del--scen .case-scen {
  inline-size: 100%;
}

/* --- Texten i ett block ---
   Delas av alla blocktyper. Radlängden hålls läsbar även när blocket i övrigt
   går i full bredd. */

.case-block__prosa {
  display: grid;
  gap: var(--space-s);
  align-content: center;
  max-inline-size: 54ch;
}

.case-block__rubrik {
  margin: 0;
  text-wrap: balance;
}

.case-block__text {
  color: var(--text-dark-muted);
  text-wrap: pretty;
}

.case-block__text > :first-child { margin-block-start: 0; }
.case-block__text > :last-child { margin-block-end: 0; }

/* --- B · Kapitel ----------------------------------------------------------
   Bara text, halv bredd, vänster. Inleder en bildgrupp, står aldrig sist. */

/* Halv bredd - men bara på texten. Kapitlet kan bära ett bildpar (v2:s
   "B · Kapitel + scenpar"), och då ska paret ligga i full bredd medan
   rubriken och brödtexten hålls smala. Låg taket på hela blocket blev
   scenerna 413px breda i stället för 640.

   Måttet är i ch och inte rem: ACSS kör 10px root, så 68rem hade blivit
   680px - halva den tänkta bredden. */
.case-block__del--kapitel .case-block__prosa {
  max-inline-size: min(100%, 60ch);
}

/* --- C · Kort -------------------------------------------------------------
   Text 5 kolumner, bild 7, på en tonad platta. En funktion per kort. */

.case-kort-block {
  --padding: var(--section-space-xs);

  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding: var(--padding);
  border-radius: calc(var(--radius) + var(--padding) / 2);
  background-color: var(--primary);
}

/* Kortet tonas ur casets scenfärg, men bara en aning - plattan ska höra till
   färgvärlden utan att konkurrera med bilden den håller. */
.case-kort-block--pa {
  background-color: color-mix(in srgb, var(--scen) 20%, var(--primary));
}

@media (width >= 62em) {
  .case-kort-block {
    grid-template-columns: 5fr 7fr;
    gap: var(--case-kolumngap);
  }

  .case-block__del--vand .case-kort-block {
    grid-template-columns: 7fr 5fr;
  }
}

/* --- D · Delad och F · Stående på scen -------------------------------------
   Som kortet men utan platta. Växlar sida varje gång den används; bilden
   ligger redan först i markupen när blocket är vänt, så läsordningen följer
   skärmen utan visuell omflyttning. */

.case-block__del--delad,
.case-block__del--staende-scen {
  align-items: center;
}

@media (width >= 62em) {
  .case-block__del--delad,
  .case-block__del--staende-scen {
    grid-template-columns: 7fr 5fr;
    gap: var(--case-kolumngap);
  }

  .case-block__del--delad.case-block__del--vand,
  .case-block__del--staende-scen.case-block__del--vand {
    grid-template-columns: 5fr 7fr;
  }

  /* Stående material är smalt; texten får därför den större halvan. */
  .case-block__del--staende-scen {
    grid-template-columns: 5fr 7fr;
  }

  .case-block__del--staende-scen.case-block__del--vand {
    grid-template-columns: 7fr 5fr;
  }
}

/* --- E · Stående par ------------------------------------------------------
   Två riktiga foton i 4:5. Ingen scen: fotografi står för sig självt, men
   aldrig ensamt — därav par. */

.case-foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-m);
}

.case-foto img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.case-foto--4-5 { aspect-ratio: 4 / 5; }

.case-block__media {
  display: grid;
  gap: var(--grid-gap);
}

.case-block__media--par {
  grid-template-columns: minmax(0, 1fr);
}

@media (width >= 48em) {
  .case-block__media--par {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- G · Trio -------------------------------------------------------------
   Tre undersidor på scen i 4:3, efter ett kapitel. Visar bredd utan att varje
   vy behöver egen text. Två i taget på mellanstora skärmar hellre än tre
   hoptryckta. */

.case-block__media--trio {
  grid-template-columns: minmax(0, 1fr);
}

@media (width >= 48em) {
  .case-block__media--trio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 75em) {
  .case-block__media--trio-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- H · Helbild ----------------------------------------------------------
   Riktigt foto kant i kant, 21:9, utanför containern. Högst en per case.

   Bilden bryter ut ur Bricks-containern med negativ marginal till halva
   viewportbredden. 100dvw i stället för 100vw: med synlig rullningslist är
   vw bredare än det synliga området och ger vågrät scroll. */

.case-helbild {
  margin: 0;
  inline-size: auto;
  margin-inline: calc(50% - 50dvw);
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.case-helbild img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* På mobil är 21:9 nästan bara en remsa — där får bilden mer höjd. */
@media (width < 48em) {
  .case-helbild {
    aspect-ratio: 3 / 2;
  }
}

/* --- I · Resultat ---------------------------------------------------------
   En siffra, stor, på scenfärg. Ersätter skärmdumpen av statistikpanelen,
   som ändå aldrig gick att läsa i den här storleken. */

.case-resultat {
  --scen: var(--primary);
  --padding: var(--section-space-xs);

  display: grid;
  gap: var(--space-m);
  align-items: center;
  padding: var(--padding);
  border-radius: calc(var(--radius) + var(--padding) / 2);
  background-color: var(--scen);
}

@media (width >= 62em) {
  .case-resultat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--case-kolumngap);
  }
}

.case-resultat__siffra {
  margin: 0;
  font-size: clamp(4.8rem, 2rem + 6vw, 9rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Grafitscenen är mörk i båda färgschemana, så texten på den måste vändas
   oavsett läge — den kan inte ärva sidans textfärg. */
/* Basklassen måste finnas med. Kortet bär också case-scen--grafit, men bara
   för att ärva --scen till sin tonade platta - utan .case-scen i selektorn
   ärvde kortets rubrik den ljusa texten och hamnade på kontrast 1,55. */
.case-scen.case-scen--grafit,
.case-resultat.case-scen--grafit {
  color: var(--primary-ultra-light);
}

.case-resultat.case-scen--grafit .case-etikett,
.case-resultat.case-scen--grafit .case-block__text {
  color: color-mix(in srgb, var(--primary-ultra-light) 80%, transparent);
}

/* =========================================
   Citat
   ========================================= */

.case-citat {
  --padding: var(--section-space-s);

  margin: 0;
  display: grid;
  gap: var(--space-l);
  padding: var(--padding);
  border-radius: calc(var(--radius) + var(--padding) / 2);
  background-color: var(--primary);
}

.case-citat__topp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  align-items: center;
}

@media (width >= 48em) {
  .case-citat__topp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--case-kolumngap);
  }
}

.case-citat__ord {
  margin: 0;
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.case-citat__ord::before { content: "\201D"; }
.case-citat__ord::after { content: "\201D"; }

.case-citat__mer {
  margin: 0;
  color: var(--text-dark-muted);
  font-style: italic;
  line-height: 1.65;
  text-wrap: pretty;
}

.case-citat__kalla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--neutral-light);
}

.case-citat__person {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.case-citat__foto {
  inline-size: var(--space-l);
  block-size: var(--space-l);
  flex-shrink: 0;
}

.case-citat__foto img {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.case-citat__namn {
  display: grid;
  gap: 2px;
}

.case-citat__namn-rad {
  font-size: var(--text-s);
  font-weight: 700;
}

.case-citat__roll {
  color: var(--text-dark-muted);
  font-size: var(--text-xs);
}

.case-citat__logo {
  display: block;
  inline-size: 140px;
  max-inline-size: 40%;
}

.case-citat__logo img {
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

/* =========================================
   Nästa case
   ========================================= */

.case-nasta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-s);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--text-dark);
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.case-nasta__text {
  display: grid;
  gap: var(--space-xs);
}

.case-nasta__titel {
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.case-nasta__pil {
  font-size: var(--h2);
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-nasta:hover,
.case-nasta:focus-visible {
  color: var(--secondary);
}

.case-nasta:hover .case-nasta__pil,
.case-nasta:focus-visible .case-nasta__pil {
  transform: translateX(8px);
}

/* =========================================
   Arkivlistan
   ========================================= */

.case-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Uttalat antal kolumner i stället för auto-fit. Auto-fit fortsätter lägga
     till kolumner så länge de får plats, vilket på en bred skärm gav fyra
     smala kort där korttexten bröts efter två ord. Tre är taket.
     (--grid-auto-2 duger inte heller: den är dimensionerad för 160rem-breda
     behållare och kollapsar till en kolumn i en vanlig container.) */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

/* ACSS indrar listor i ett textelement via .brxe-text > :is(ul, ol) — 0,0,1,1,
   alltså starkare än en ensam klass. Kortrutnätet är ingen prosalista och ska
   ligga kant i kant. Bara paddingen lyfts hit: tar man med hela regeln blir
   den 0,0,2,0 och slår ut kolumnbrytpunkterna nedanför. */
:is(.brxe-text, .brxe-post-content) > .case-lista {
  padding-inline: 0;
}

@media (width >= 48em) {
  .case-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 75em) {
  .case-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.case-lista__tom {
  margin: 0;
  color: var(--text-dark-muted);
}

.case-kort {
  --padding: var(--space-m);

  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border: 1px solid var(--neutral-light);
  border-radius: calc(var(--radius) + var(--padding) / 2);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(var(--shadow-rgb), 0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s ease;
}

.case-kort:hover,
.case-kort:focus-visible {
  transform: translateY(-4px);
  border-color: var(--secondary);
  box-shadow: 6px 6px 0 rgba(var(--shadow-rgb), 0.2);
}

.case-kort__bild {
  display: block;
  background-color: var(--primary);
}

.case-kort__bild img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.case-kort__kropp {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-grow: 1;
  padding: var(--padding);
}

.case-kort__titel {
  font-size: var(--h4);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.case-kort__text {
  color: var(--text-dark-muted);
  font-size: var(--text-s);
  text-wrap: pretty;
}

.case-kort__cue {
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
  color: var(--secondary);
  font-size: var(--text-s);
  font-weight: 600;
}

.case-kort__cue::after {
  content: " \2192";
}

.color-scheme--alt .case-kort {
  border-color: var(--neutral-light-trans-10);
}

.color-scheme--alt .case-kort__cue {
  color: var(--secondary-light);
}

.color-scheme--alt .case-kort:hover,
.color-scheme--alt .case-kort:focus-visible {
  border-color: var(--secondary-light);
}

/* =========================================
   Mörkt läge
   ========================================= */

/* --secondary vänder inte med schemat och ger bara 2,9:1 mot nattarket. */
.color-scheme--alt .case-fakta__varde a,
.color-scheme--alt .case-nasta:hover,
.color-scheme--alt .case-nasta:focus-visible {
  color: var(--secondary-light);
}

.color-scheme--alt .case-tagg {
  border-color: var(--neutral-light-trans-10);
}

@media (prefers-reduced-motion: reduce) {
  .case-knapp,
  .case-nasta,
  .case-nasta__pil {
    transition: none !important;
  }

  .case-knapp:hover,
  .case-knapp:focus-visible {
    transform: none;
  }

  .case-nasta:hover .case-nasta__pil,
  .case-nasta:focus-visible .case-nasta__pil {
    transform: none;
  }
}