/* ==========================================================
   TCM Masonry – Text-Overlay
   Ergänzung zur bestehenden tcm-masonry.css
   ========================================================== */

.grid-item__inner {
  position: relative;
  overflow: hidden;
}

.grid-item__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  align-items: flex-end;

  padding: 1.25rem;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0.30) 45%,
      rgba(0, 0, 0, 0.82) 100%
    );

  color: #fff;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);

  transition:
    opacity 280ms ease,
    visibility 280ms ease,
    transform 280ms ease;

  pointer-events: none;
}

.grid-item__overlay-content {
  width: 100%;
  color: #fff;
}

.grid-item__overlay-content h2,
.grid-item__overlay-content h3,
.grid-item__overlay-content h4,
.grid-item__overlay-content h5,
.grid-item__overlay-content h6 {
  margin-top: 0;
  color: #fff;
}

.grid-item__overlay-content p:last-child,
.grid-item__overlay-content ul:last-child,
.grid-item__overlay-content ol:last-child {
  margin-bottom: 0;
}

.grid-item__inner:hover .grid-item__overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Auf Geräten ohne echten Hover den Text sichtbar lassen */
@media (hover: none) {
  .grid-item__overlay {
    opacity: 1;
    visibility: visible;
    transform: none;
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.00) 20%,
        rgba(0, 0, 0, 0.75) 100%
      );
  }
}