/* showcase overrides — on top of style.css (verbatim copy of lcm-demo). Keep minimal. */

/* Eval card: a mini document stands in for lcm-demo's product photo (same 104px box). */
.doc-mini{display:grid;align-content:center;gap:9px;height:104px;padding:0 14px;border-radius:8px;background:var(--paper)}
.doc-mini b{display:block;height:6px;border-radius:99px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.doc-mini b:nth-child(1){width:55%;background:var(--coral)}
.doc-mini b:nth-child(3){width:85%}
.doc-mini b:nth-child(5){width:65%}

/* Judge card: failed verdict in coral instead of blue. */
.mini-table b.is-fail{background:var(--coral);color:var(--ink)}

/* Four cards instead of five: balanced fan on desktop, 2x2 on tablet. */
@media(min-width:1100px){
  .model-grid>.model-card:nth-child(1){transform:translateY(28px) rotate(-4.5deg)}
  .model-grid>.model-card:nth-child(2){transform:translateY(4px) rotate(-1.5deg);z-index:1}
  .model-grid>.model-card:nth-child(3){transform:translateY(6px) rotate(2deg);z-index:2}
  .model-grid>.model-card:nth-child(4){transform:translateY(30px) rotate(5deg);z-index:1}
  .model-grid>.model-card:hover,.model-grid>.model-card:focus-visible{transform:translateY(-14px) rotate(0) scale(1.02);z-index:3}
}
@media(min-width:761px) and (max-width:1099px){
  .model-grid>.model-card{grid-column:span 3}
}