/**
 * @file
 * Skeleton loading placeholders for the AJAX-loaded showcase block.
 *
 * Matches the dimensions of .views-showcase-block-row cards so the layout
 * doesn't shift when real content replaces the skeletons.
 */

.showcase-skeleton {
  width: 300px;
  min-height: 400px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  flex-shrink: 0;
}

@media (width > 480px) {
  .showcase-skeleton {
    width: 350px;
    min-height: 500px;
  }
}

@media (width > 768px) {
  .showcase-skeleton {
    width: 400px;
    min-height: 550px;
  }
}

.showcase-skeleton__image {
  width: 100%;
  background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite ease-in-out;
}

.showcase-skeleton__text {
  padding: var(--sp3);
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}

.showcase-skeleton__line {
  height: 1.35rem;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite ease-in-out;
  width: 100%;
}

.showcase-skeleton__line--title {
  height: 1.7rem;
  width: 60%;
}

.showcase-skeleton__line--short {
  width: 40%;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}