/* ==========================================================================
   EXPLORE PAGE — DISCOVER GRID
   ========================================================================== */

#discoverArt {
  column-count: 4;
  column-gap: var(--space-md);
  padding-bottom: var(--space-lg);
  margin-top: var(--space-md);
}

@media (max-width: 1200px) {
  #discoverArt { column-count: 3; }
}
@media (max-width: 1000px) {
  #discoverArt { column-count: 2; }
}
@media (max-width: 400px) {
  #discoverArt { column-count: 1; }
}

/* ==========================================================================
   DISCOVER CARD — "gallery wall" pattern.
   Art shows plain by default; the plaque (title/artist/institution)
   slides up on hover/focus, like leaning in to read a museum label.
   ========================================================================== */

.discoverCard {
  display: block;
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--hover-bg);
  text-decoration: none;
  color: inherit;
}

.discoverCard img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.discoverCard:hover img,
.discoverCard:focus-within img {
  transform: scale(1.03);
}

.discoverCard:focus-visible {
  outline: 2px solid var(--accent-color, #ff7f50);
  outline-offset: 2px;
}

.discoverPlaque {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-md);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.55) 65%,
    transparent 100%
  );
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  color: #f4f1ea;
}

.discoverCard:hover .discoverPlaque,
.discoverCard:focus-within .discoverPlaque {
  transform: translateY(0);
}

.plaqueLabel {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 4px;
}

.plaqueTitle {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 2px;
}

.plaqueMeta {
  font-size: 0.8rem;
  opacity: 0.8;
  margin: 0;
}

/* Touch devices don't really have :hover — show a condensed plaque always */
@media (hover: none) {
  .discoverPlaque {
    transform: translateY(0);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    padding: var(--space-sm) var(--space-md);
  }
}

/* ==========================================================================
   SKELETON — matches the image-only card (no text blocks needed,
   since real cards don't show text until hover either)
   ========================================================================== */

.discoverSkeleton {
  break-inside: avoid;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.discoverSkeleton .skeletonImg {
  height: 260px;
  padding: 0;
}

/* Vary heights slightly so the loading state reads as masonry, not a grid */
.discoverSkeleton:nth-child(3n+1) .skeletonImg { height: 220px; }
.discoverSkeleton:nth-child(3n+2) .skeletonImg { height: 320px; }
.discoverSkeleton:nth-child(3n+3) .skeletonImg { height: 260px; }

/* ==========================================================================
   INFINITE SCROLL STATES
   ========================================================================== */

.discoverLoadingMore {
  text-align: center;
  padding: var(--space-lg) 0;
  color: var(--text-secondary, currentColor);
  opacity: 0.65;
  font-size: 0.9rem;
}

.discoverEnd {
  text-align: center;
  padding: var(--space-lg) 0;
  opacity: 0.5;
  font-size: 0.85rem;
}

.discoverRetry {
  display: block;
  margin: var(--space-md) auto;
}

#discoverSentinel {
  width: 100%;
}