/* cases.css — see docs/PLAN.md for the owner. Tokens only: var(--…) from styles.css, no new colours or fonts.
   Only what the design export lacks: real images in case cards, the no-image card panel, the case media frame
   and a quote row inside .casebody. Everything else comes from site.css (.cbox*, .cgrid, .caseblock*, .sollist…). */

/* ---------- /kundcase/ overview: three weights, chosen by the content, kept compact ---------- */

/* Customer cases: two side by side. Media 2:1 on top, the result sentence as the headline. */
.cfeats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cfeat{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden;color:var(--pine);text-decoration:none;transition:transform var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard)}
.cfeat:hover{transform:translateY(-4px);border-color:var(--border-strong);color:var(--pine);text-decoration:none}
.cfeat__media{position:relative;aspect-ratio:2/1;background:var(--pine);border-bottom:1px solid var(--border-subtle)}
.cfeat__media img,.cprod__media img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top left}
.cfeat__body{display:flex;flex-direction:column;flex:1;padding:26px 30px 26px}
.cfeat__h{margin:12px 0 0;font-size:clamp(22px,1.9vw,27px);letter-spacing:var(--tracking-heading);line-height:1.15;text-wrap:balance}
.cfeat__p{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--text-muted);text-wrap:pretty}
.cfeat .ccard__go,.cprod .ccard__go{padding-top:20px}
.cfeat:hover .ccard__go b{transform:translateX(5px)}
/* A customer case without demo media: text only, no empty image box. A lone last case spans the row. */
.cfeat--text .cfeat__body{padding:32px 34px 30px}
.cfeats>.cfeat:last-child:nth-child(odd){grid-column:1/-1}

/* "Med demovideo": tells the visitor the case page has a video. Same pill as the design's service pill. */
.cmedia__tag{position:absolute;left:14px;bottom:14px;z-index:2;font:500 12px/1.2 var(--font-body);padding:6px 11px;border-radius:var(--radius-pill);background:var(--pine);color:var(--chalk)}

/* Own products with media: the design system's .ccard, three per row on a six-column grid.
   A last row of two splits the width; a lone last card spans the row. */
.cprods{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.cprod{grid-column:span 2}
.cprods>.cprod:nth-last-child(2):nth-child(3n+1),.cprods>.cprod:last-child:nth-child(3n+2){grid-column:span 3}
.cprods>.cprod:last-child:nth-child(3n+1){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.cprods>.cprod:last-child:nth-child(3n+1) .cprod__media{border-right:1px solid var(--border-subtle)}
.cprods>.cprod:last-child:nth-child(3n+1) .ccard__body{justify-content:center;padding:26px 32px}
.cprod__media{aspect-ratio:16/10}
.cprod .ccard__body{padding:22px 24px 22px}
.cprod .ccard__meta{font-size:11px}
.cprod .ccard__h{margin-top:10px;font-size:clamp(19px,1.5vw,21px);letter-spacing:var(--tracking-heading)}
.cprod .ccard__res{margin-top:8px;font-size:15px}

/* Own services and tools without media: hairline rows (.clist/.crow) instead of empty image panels. */
.cases__sub{margin:64px 0 4px;font-size:clamp(20px,1.8vw,24px)}
.crow--own{grid-template-columns:minmax(0,3fr) minmax(0,6fr) auto;gap:28px;padding:24px 0}
.crow--own .crow__who b{font-size:16px}
.crow--own .crow__who span{font-size:14px}
.crow__main h3{margin:0;font-size:clamp(19px,1.6vw,22px);letter-spacing:var(--tracking-heading);line-height:1.2;text-wrap:balance;transition:color .25s}
.crow--own .crow__main p{margin-top:6px;font-size:15.5px}
a.crow:hover .crow__main h3{color:var(--forest)}

@media (max-width:1100px){
  .cprods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cprod,.cprods>.cprod:nth-last-child(2):nth-child(3n+1),.cprods>.cprod:last-child:nth-child(3n+2){grid-column:auto}
  .cprods>.cprod:last-child:nth-child(3n+1){grid-column:auto;display:flex;grid-template-columns:none}
  .cprods>.cprod:last-child:nth-child(3n+1) .cprod__media{border-right:0}
  .cprods>.cprod:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:900px){
  .cfeats,.cprods{grid-template-columns:minmax(0,1fr)}
  .cfeats>.cfeat:last-child:nth-child(odd){grid-column:auto}
  .cprods>.cprod:last-child:nth-child(odd){grid-column:auto}
  .crow--own{grid-template-columns:minmax(0,1fr);gap:6px;padding:22px 0}
  .crow--own .crow__who,.crow--own .crow__main,.crow--own .crow__go{grid-column:1}
}

/* Case page media: video or featured image in a rounded frame, caption in mono below. */
.casemedia{margin:40px 0 0}
.casemedia video,.casemedia img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-card);border:1px solid var(--border-subtle);background:var(--surface-dark)}
.casemedia figcaption{margin-top:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}

/* Paragraphs that follow the solution list (the design has none). */
.sollist+p{margin-top:24px}
.caseblock h3{max-width:30ch;text-wrap:balance}

/* Quote row inside the case body, reusing the design's .qlist__q blockquote. */
.caseblock--quote .qlist__q{max-width:70ch}

/* "Demo · fiktiv data" on every case screenshot (cards, Start, case pages). Top right, above the image. */
.demotag{position:absolute;top:12px;right:12px;z-index:3;font:600 11px/1 var(--font-body);letter-spacing:.02em;padding:6px 10px;border-radius:var(--radius-pill);background:var(--pine);color:var(--chalk);pointer-events:none}
.casemedia--img{position:relative}
.casemedia--img .demotag{top:16px;right:16px;font-size:12px;padding:7px 12px}