/* Square cover tile: the homepage decade grid, the album editions/singles strips, and
   the song page's "Also appears on" row. Image-forward; tour or release "material" by type. */

.cover-tile {
  display: flex;
  flex-direction: column;
  background-color: #e1e5ea;
  color: #18151f;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  border-top: 3px solid #424242;
  box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cover-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6);
  color: #18151f;
  text-decoration: none;
}

.cover-tile__img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #d0d4da;
}

.cover-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.cover-tile:hover .cover-tile__img {
  transform: scale(1.08);
}

.cover-tile__year {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 4px;
  color: #fff;
  background: rgba(24, 21, 31, 0.78);
}

.cover-tile__body {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.7rem 0.7rem;
  flex: 1 1 auto;
}

.cover-tile__title {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  /* clamp long titles to two lines so tiles stay aligned */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cover-tile__subtitle {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

.cover-tile__subtitle i { font-size: 0.85em; margin-right: 0.15rem; }

/* Tours vs releases told apart by material, not hue (red stays the site's only accent).
   Tours = "stage": near-black caption band + red keyline, like the heroes (homepage only).
   Albums = "sleeve": white caption band with a hairline border, for every release tile
   (homepage albums, album editions/singles strips, the song page's "Also appears on").
   Each carries a matching type icon. */
.cover-tile.tour { background-color: #1f1c24; border-top-color: #c8102e; }
.cover-tile.tour .cover-tile__title { color: #fff; }
.cover-tile.tour .cover-tile__subtitle { color: #b9b3c2; opacity: 1; }
.cover-tile.tour .cover-tile__subtitle i { color: #e8475f; }
.cover-tile.tour:hover .cover-tile__title { color: #ff8a9a; }

.cover-tile.album { background-color: #fff; border: 1px solid #e3e0e6; }
.cover-tile.album .cover-tile__title { color: #18151f; }
.cover-tile.album .cover-tile__subtitle { color: #6c757d; opacity: 1; }
.cover-tile.album .cover-tile__subtitle i { color: #c8102e; }
.cover-tile.album:hover .cover-tile__title { color: #c8102e; }