/* ============================================================
   Download Center — Page-specific styles only.
   Shared tokens & components live in style.css.
   ============================================================ */

/* ── Preview base ── */
.dc-preview {
  width: 100%;
  aspect-ratio: 3 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  box-sizing: border-box;
}

.dc-preview img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── Preview variants ── */
.dc-preview--white {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.dc-preview--dark {
  background: var(--color-text);
}

.dc-preview--black {
  background: var(--color-black);
}

.dc-preview--checker {
  background-image:
    linear-gradient(45deg, var(--color-border-strong) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-border-strong) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-border-strong) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-border-strong) 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-color: var(--color-bg-alt);
}

.dc-preview--checker-dark {
  background-image:
    linear-gradient(45deg, var(--color-text) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-text) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-text) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-text) 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-color: var(--color-black);
}

/* ── Square: image fills card from the top ── */
.dc-preview--square {
  aspect-ratio: 1 / 1;
  padding: 0;
  align-items: stretch;
}

.dc-preview--square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  box-sizing: border-box;
}