/* ===== Album grid ===== */
.album-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ALWAYS 4 per row */
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 1200px){
  .album-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

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

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

/* ===== Card ===== */
.album-card{
  background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(15,23,42,.88));
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 12px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  min-height: 300px; /* gives you that consistent “panel” height */
  display: flex;
  flex-direction: column;
}

/* Image area */
.album-card__media{
  padding: 16px 16px 0 16px;
}
.album-card__media img{
  width: 100%;
  height: 180px;              /* consistent image height */
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* If an image is missing, keep spacing looking intentional */
.album-card__media.is-missing{
  padding: 16px;
}
.album-card__media.is-missing::before{
  content:"";
  display:block;
  height: 200px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(148,163,184,.08));
  border: 1px solid rgba(148,163,184,.12);
}

/* Body */
.album-card__body{
  padding: 14px 16px 16px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.album-card__title{
  margin: 0;
  font-size: 20px;     /* was ~28px */
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.95);
}

.album-card__desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(226,232,240,.86);
  max-width: none;
}

/* Button (pill) */
.album-card__btn{
  margin-top: auto;           /* pushes button to the bottom like your first screencap */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.25);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  width: fit-content;
}

.album-card__btn:hover{
  transform: translateY(-1px);
  background: rgba(2,6,23,.42);
  border-color: rgba(148,163,184,.28);
}

/* Optional: subtle hover lift on whole card */
.album-card:hover{
  border-color: rgba(148,163,184,.22);
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
}