/* ==========================================================================
   Media Block component sheet
   Shared grid/table styles live in sheet.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variant card wrapper
   -------------------------------------------------------------------------- */
.media-block-variant-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--background-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   Media block — image + optional caption
   -------------------------------------------------------------------------- */
.media-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: 0;
}

.media-block + .media-block {
  margin-top: var(--spacing-sm);
}

/* --------------------------------------------------------------------------
   Image placeholder
   -------------------------------------------------------------------------- */
.media-block__image {
  width: 100%;
  background-color: var(--background-hover);
  background-image:
    linear-gradient(45deg, var(--border-default) 25%, transparent 25%),
    linear-gradient(-45deg, var(--border-default) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--border-default) 75%),
    linear-gradient(-45deg, transparent 75%, var(--border-default) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.media-block__image--16-9 {
  aspect-ratio: 16 / 9;
}

.media-block__image--4-3 {
  aspect-ratio: 4 / 3;
}

.media-block__image:has(img),
.media-block__image:has(video) {
  background-image: none;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

.media-block__image img,
.media-block__image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.media-block__image--grid,
.media-block__image--grid:has(img),
.media-block__image--grid:has(video) {
  background-color: #0D1520;
  background-image: radial-gradient(circle, #10243A 1px, transparent 1px);
  background-size: 16px 16px;
}

.media-block__image--grid img {
  object-fit: contain;
  padding: 0;
}

.media-block__image--grid-lickd,
.media-block__image--grid-lickd:has(img),
.media-block__image--grid-lickd:has(video) {
  background-color: #262E3F;
  background-image: radial-gradient(circle, #1B212D 1px, transparent 1px);
  background-size: 16px 16px;
}

.media-block__image--grid-lickd img {
  padding: 0;
  object-fit: cover;
  object-position: bottom;
}

.media-block__image--grid-hubblehq,
.media-block__image--grid-hubblehq:has(img),
.media-block__image--grid-hubblehq:has(video) {
  background-color: #00F2C4;
  background-image: radial-gradient(circle, #44C199 1px, transparent 1px);
  background-size: 16px 16px;
}

.media-block__image--grid-hubblehq img {
  padding: 0;
  object-fit: cover;
  object-position: top;
}

.media-block__image--grid-giffgaff,
.media-block__image--grid-giffgaff:has(img),
.media-block__image--grid-giffgaff:has(video) {
  background-color: #FCC31E;
  background-image: radial-gradient(circle, #F1BB1D 1px, transparent 1px);
  background-size: 16px 16px;
}

.media-block__image--grid-giffgaff img {
  object-fit: cover;
  object-position: bottom;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Caption
   -------------------------------------------------------------------------- */
.media-block__caption {
  margin: 0;
  font-family: var(--type-family-primary), system-ui, sans-serif;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  color: var(--text-secondary);
  max-width: var(--layout-reading-column-width);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}