/* ===== Media gallery (centered 1–4 col grid, bottom-aligned content) ===== */

/* Grid */
#media-list{
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Force 4 columns on wide viewports (fits inside --maxw ≈ 1100px) */
@media (min-width: 1100px){
  #media-list{
    grid-template-columns: repeat(4, minmax(250px, 1fr));
  }
}

/* Card sizing */
#media-list .card,
#media-list .media-card{
  width: 100%;
  max-width: 560px;  /* site-wide card max */
}

/* Equal-height feel + bottom-aligned content */
#media-list > .card,
#media-list > .media-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Normalize media area so image height doesn't change card flow */
#media-list > .card > img:first-child,
#media-list > .media-card > img:first-child{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: var(--space-3);
}

/* Push the text + buttons block to the bottom */
#media-list .btn-row{
  margin-top: auto;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* If a card has no .btn-row, still anchor last element bottom */
#media-list > .card > :last-child,
#media-list > .media-card > :last-child{
  margin-top: auto;
}

/* ===== Legacy thumb wrapper (kept for safety; no conflicts) ===== */
.media__thumb{
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.media__thumb img,
.media__thumb iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional generic usage of .media-card outside the grid */
.media-card{
  max-width: 560px;
  margin: auto;
}