/* ==========================================================================
   Experiments page — masonry-style grid via CSS columns (not real grid),
   since that's what naturally reproduces the reference layout: items flow
   top-to-bottom per column, each keeping its own aspect ratio, and a
   shorter column picks up the next item first (matches "Creating Audio
   Visualiser" landing under "Forced my niece..." on the real site).
   ========================================================================== */

.experiments-grid {
  columns: 3;
  column-gap: 24px;
  padding: 32px 0 100px;
}

@media (max-width: 1023px) {
  .experiments-grid { columns: 2; }
}
@media (max-width: 809px) {
  .experiments-grid { columns: 1; }
}

.experiments-empty {
  columns: initial;
  color: var(--color-text-tertiary);
  padding: 40px 0;
}

.experiment-card {
  display: block;
  break-inside: avoid;
  margin-bottom: 24px;
  position: relative;
}

.experiment-media {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg-alt);
}

@media (max-width: 809px) {
  .experiment-media { border-radius: 8px; }
}

.experiment-media img,
.experiment-media video {
  width: 100%;
  display: block;
}

/* Explicit ratios crop via object-fit; 'fit' (default) just uses natural
   intrinsic size so nothing is cropped. */
.experiment-media[data-ratio="4:3"] { aspect-ratio: 4 / 3; }
.experiment-media[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.experiment-media[data-ratio="9:16"] { aspect-ratio: 9 / 16; }
.experiment-media[data-ratio="4:3"] img, .experiment-media[data-ratio="4:3"] video,
.experiment-media[data-ratio="16:9"] img, .experiment-media[data-ratio="16:9"] video,
.experiment-media[data-ratio="9:16"] img, .experiment-media[data-ratio="9:16"] video {
  height: 100%;
  object-fit: cover;
}

/* Hover overlay — only appears when the row has a `link` set */
.experiment-card.has-link .experiment-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 17, 31, 0.15);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out-soft);
}
.experiment-card.has-link:hover .experiment-media::after { opacity: 1; }
.experiment-card.has-link:hover .experiment-media img,
.experiment-card.has-link:hover .experiment-media video {
  transform: scale(1.02);
}
.experiment-media img, .experiment-media video {
  transition: transform var(--duration-base) var(--ease-out-soft);
}

.experiment-label {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
}