/* Custom Styles */
/* Card as a hover-expanding tile */
.product {
  position: relative;
  overflow: visible; /* important for the expand */
  transform: translateZ(0);
}

/* Media (thumbnail) area */
.product__media {
  position: relative;
  border-radius: 10px; /* tweak */
  overflow: hidden;
}

/* Ensure image fills nicely */
.product__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Default: no overlay showing */
#section-{{ section.id }} .product__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  /* Netflix bottom bar */
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));

  /* hidden by default */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

/* Show overlay only on hover */
#section-{{ section.id }} .product:hover .product__overlay {
  opacity: 1;
  transform: translateY(0);
}

#section-{{ section.id }} .product__title-overlay {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);

  /* 2-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Progress sits at very bottom */
.product__progress-overlay {
  margin-top: 10px;
}

/* Hide expanded content by default */
.product__expand {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease, transform .25s ease;
}

/* Netflix-ish hover expand */
.product:hover {
  z-index: 30;
}

.product:hover .product__media {
  transform: scale(1.05);
  transition: transform .2s ease;
}

.product:hover .product__expand {
  max-height: 240px; /* adjust for how much you want revealed */
  opacity: 1;
  transform: translateY(0);
}

/* Make the whole card feel clickable */
.product__link {
  display: block;
  text-decoration: none;
}