/* ================================================================
   Color marks pattern — visualiserar former, lager och varianter
   ================================================================
   Förutsätter att tokens-filen, fonts/pattern.css och
   typography-scale/pattern.css är laddade.
================================================================ */

/* ============================================================
   Section 1: De tre formerna — 3-col grid med video-stack per mark
============================================================ */
.cm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spc-05);
}

@media (max-width: 900px) {
  .cm-grid { grid-template-columns: 1fr; }
}

.cm-mark {
  display: flex;
  flex-direction: column;
  gap: var(--spc-04);
}

.cm-mark__stack {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  background: var(--clr-key-offwhite, #f0efee);
  border-radius: var(--shp-lg);
  overflow: hidden;
}

.cm-mark__video,
.cm-mark__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Noise-overlay — tiled i native pixel-skala (PNG är 360×360 native).
   background-image + repeat ger äkta grain-textur som inte skalas; varje
   pixel av PNG:n motsvarar en pixel på skärmen oavsett card-storlek. */
.cm-mark__noise {
  position: absolute;
  inset: 0;
  background-image: var(--cm-noise-url);
  background-repeat: repeat;
  background-size: auto;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cm-mark__meta {
  display: flex;
  flex-direction: column;
  gap: var(--spc-02);
}

.cm-mark__head {
  display: flex;
  align-items: center;
  gap: var(--spc-03);
}

.cm-mark__name {
  margin: 0;
  font-family: var(--type-family-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--content-primary);
}

.cm-mark__swatch {
  width: 16px;
  height: 16px;
  border-radius: var(--shp-full);
  flex-shrink: 0;
  border: 1px solid var(--border-tertiary);
}

.cm-mark__hex {
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  padding: var(--spc-02) var(--spc-03);
  background: var(--background-tertiary);
  border-radius: var(--shp-sm);
  color: var(--content-primary);
  letter-spacing: 0.04em;
}

.cm-mark__description {
  margin: 0;
  font-family: var(--type-family-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--content-tertiary);
}

/* ============================================================
   Section 2: Konstruktion — 3 paneler (video, noise, combined)
============================================================ */
.cm-construction {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spc-05);
}

@media (max-width: 900px) {
  .cm-construction { grid-template-columns: 1fr; }
}

.cm-layer {
  display: flex;
  flex-direction: column;
  gap: var(--spc-04);
}

.cm-layer__visual {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  background: var(--clr-key-offwhite, #f0efee);
  border-radius: var(--shp-lg);
  overflow: hidden;
}

.cm-layer__visual--noise-only {
  /* Noise-PNG har transparens; visa mot grå för synlighet */
  background: #888;
}

.cm-layer__video,
.cm-layer__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Noise-PNG visas tiled i native skala — inte scalad till container.
   Det är vad specen säger: native-pixel grain, inget upskaleras. */
.cm-layer__noise-bare {
  position: absolute;
  inset: 0;
  background-image: var(--cm-noise-url);
  background-repeat: repeat;
  background-size: auto;
}

.cm-layer__noise-applied {
  position: absolute;
  inset: 0;
  background-image: var(--cm-noise-url);
  background-repeat: repeat;
  background-size: auto;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cm-layer__step {
  display: inline-flex;
  align-items: center;
  gap: var(--spc-02);
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--content-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cm-layer__step::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--border-tertiary);
}

.cm-layer__name {
  margin: 0;
  font-family: var(--type-family-body);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--content-primary);
}

.cm-layer__description {
  margin: 0;
  font-family: var(--type-family-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--content-tertiary);
}

.cm-layer__path {
  margin: 0;
  font-family: var(--type-family-code);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--content-tertiary);
  word-break: break-all;
}

/* ============================================================
   Section 3: Asset-typer — list per mark med format-grupper
============================================================ */
.cm-variants {
  display: flex;
  flex-direction: column;
  gap: var(--spc-07);
}

/* Head ovanför, formats nedanför så hela bredden kan användas av kortgriden. */
.cm-variant {
  display: flex;
  flex-direction: column;
  gap: var(--spc-05);
}

.cm-variant__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spc-04);
}

.cm-variant__title {
  margin: 0;
  font-family: var(--type-family-disp);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--content-primary);
}

.cm-variant__head .cm-mark__description {
  flex: 1;
  min-width: 200px;
}

/* 5 format per mark (JPG×3, PNG×1, WEB×1) → 5 lika breda kolumner som
   tar full container-width. Faller till 3 på tablet, 2 på mobil. */
.cm-variant__formats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spc-04);
}

@media (max-width: 1100px) {
  .cm-variant__formats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .cm-variant__formats { grid-template-columns: repeat(2, 1fr); }
}

.cm-format {
  display: flex;
  flex-direction: column;
  gap: var(--spc-03);
}

.cm-format__sample {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--shp-md);
  background: var(--background-secondary) center/cover no-repeat;
}

.cm-format__sample img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--shp-md);
}

.cm-format__label {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cm-format__type {
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--content-primary);
}

.cm-format__variant {
  font-family: var(--type-family-body);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--content-tertiary);
}

/* ============================================================
   Section 4: Pre-croppade 16:9-bakgrunder — thumbnail grid
============================================================ */
.cm-backgrounds {
  display: flex;
  flex-direction: column;
  gap: var(--spc-06);
}

.cm-bg-group {
  display: flex;
  flex-direction: column;
  gap: var(--spc-04);
}

.cm-bg-group__title {
  margin: 0;
  font-family: var(--type-family-body);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--content-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Pre-croppade bakgrunder — alltid 4 per rad oavsett viewport-bredd
   (faller till 2 på tablet och 1 på mobil). */
.cm-bg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spc-04);
}

@media (max-width: 900px) {
  .cm-bg-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .cm-bg-grid { grid-template-columns: 1fr; }
}

.cm-bg-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--shp-md);
  overflow: hidden;
  background: var(--background-secondary);
}

.cm-bg-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}