/* Layout styling for the two-column layout */
#facet-search-poc {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  /* max-width: 1200px; */
  margin: 0 auto;
}

/* Sidebar with facets - KEEP AS IS */
#facet-container {
  flex: 0 0 280px;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 4px;
  align-self: flex-start;
  position: sticky;
  top: 20px;
}

/* Main content area with results */
#results-container {
  flex: 1;
  min-width: 300px;
  padding: 20px;
}

/* Responsive layout for mobile devices */
@media (max-width: 768px) {
  #facet-search-poc {
    flex-direction: column;
  }

  #facet-container {
    flex: 0 0 100%;
    position: static;
    margin-bottom: 20px;
  }
}

/* Existing facet group styling */
.facet-group {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  list-style: none;
  padding-left: 0;
}

.facet-group h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.facet-item label {
  font-size: 10px;
  font-weight: 400;
  margin: 0;
}

.disabled-facet {
  opacity: 0.2;
}

/* Ensure that active facets are highlighted */
.facet-item input:checked + label {
  font-weight: bold;
  color: #0073aa;
}

/* Improve checkbox styling */
.facet-item input[type="checkbox"] {
  margin-right: 8px;
}

/* ==========================================================================
   Skeleton Loading Cards
   ========================================================================== */

/**
 * Skeleton card that mimics the resource-card structure.
 * Uses CSS animation for a shimmer effect while loading.
 */
.resource-card--skeleton {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
  min-height: 320px;
}

.resource-card--skeleton .resource-card__text {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resource-card--skeleton .resource-card__media {
  height: 148px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 3.5s infinite;
}

/* Skeleton chip placeholder */
.skeleton-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skeleton-chip__icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 3.5s infinite;
}

.skeleton-chip__text {
  width: 80px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 3.5s infinite;
}

/* Skeleton eyebrow placeholder */
.skeleton-eyebrow {
  width: 100px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 3.5s infinite;
}

/* Skeleton title placeholder - two lines */
.skeleton-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-title__line {
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 3.5s infinite;
}

.skeleton-title__line:first-child {
  width: 100%;
}

.skeleton-title__line:last-child {
  width: 70%;
}

/* Shimmer animation */
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Stagger animation for multiple skeleton cards */
.resource-card--skeleton:nth-child(1) .skeleton-chip__icon,
.resource-card--skeleton:nth-child(1) .skeleton-chip__text,
.resource-card--skeleton:nth-child(1) .skeleton-eyebrow,
.resource-card--skeleton:nth-child(1) .skeleton-title__line,
.resource-card--skeleton:nth-child(1) .resource-card__media {
  animation-delay: 0s;
}

.resource-card--skeleton:nth-child(2) .skeleton-chip__icon,
.resource-card--skeleton:nth-child(2) .skeleton-chip__text,
.resource-card--skeleton:nth-child(2) .skeleton-eyebrow,
.resource-card--skeleton:nth-child(2) .skeleton-title__line,
.resource-card--skeleton:nth-child(2) .resource-card__media {
  animation-delay: 0.1s;
}

.resource-card--skeleton:nth-child(3) .skeleton-chip__icon,
.resource-card--skeleton:nth-child(3) .skeleton-chip__text,
.resource-card--skeleton:nth-child(3) .skeleton-eyebrow,
.resource-card--skeleton:nth-child(3) .skeleton-title__line,
.resource-card--skeleton:nth-child(3) .resource-card__media {
  animation-delay: 0.2s;
}

.resource-card--skeleton:nth-child(4) .skeleton-chip__icon,
.resource-card--skeleton:nth-child(4) .skeleton-chip__text,
.resource-card--skeleton:nth-child(4) .skeleton-eyebrow,
.resource-card--skeleton:nth-child(4) .skeleton-title__line,
.resource-card--skeleton:nth-child(4) .resource-card__media {
  animation-delay: 0.3s;
}

/* Fade in animation for real cards when they load */
.resource-card {
  animation: card-fade-in 0.3s ease-out;

  /* Initial state: invisible */
  img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.5s ease-in;
  }

  /* Loaded state: fade in */
  img[loading="lazy"].loaded {
    opacity: 1;
  }
}

@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}