/* Explore card prompt overlay
   Uses the supplied transparent graphic as a single shared static asset.
   Scope is intentionally limited to the Explore list cards. */

.explore-card > .explore-card-link {
  position: relative;
  display: block;
  min-width: 0;
}

.explore-card > .explore-card-link > figure {
  isolation: isolate;
}

/* Compact lower fade: protects the prompt graphic on bright imagery
   without dimming the whole card. */
.explore-card > .explore-card-link > figure::after {
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 52%,
    rgba(0, 0, 0, .08) 62%,
    rgba(0, 0, 0, .34) 74%,
    rgba(0, 0, 0, .70) 89%,
    rgba(0, 0, 0, .88) 100%
  );
  transition: background .16s ease;
}

/* Decorative graphic: all pointer interaction passes through to the existing
   data-explore-open link, so the existing modal listener remains the only one. */
.explore-card .explore-card-prompt-overlay {
  position: absolute !important;
  z-index: 5 !important;
  left: 50% !important;
  bottom: clamp(.48rem, 4.8%, .86rem) !important;
  width: min(80%, 248px) !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translateX(-50%) !important;
  transition: transform .16s ease, filter .16s ease, opacity .16s ease !important;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-drag: none;
}

/* Existing category/image-count metadata is preserved and moved to the top,
   away from the glass prompt graphic. */
.explore-card figure figcaption {
  z-index: 6;
  inset-block-start: .62rem;
  inset-block-end: auto;
  align-items: flex-start;
}

.explore-card figure figcaption > span,
.explore-card figure figcaption > small {
  max-width: 64%;
  overflow: hidden;
  padding: .18rem .42rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Featured badge stays available without colliding with the preserved metadata. */
.explore-card.is-featured figure::before {
  z-index: 7;
  inset-block-start: 2.55rem;
}

/* The visual card ends at the image: the old below-image title/action is gone. */
.explore-card > .explore-card-link {
  line-height: 0;
}

.explore-card figure figcaption,
.explore-card.is-featured figure::before {
  line-height: 1.4;
}

/* Keep keyboard interaction clearly visible. */
.explore-card > .explore-card-link:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
  border-radius: 1.15rem;
}

/* The graphic remains inside the one existing card link.
   pointer-events:none means clicking the graphic is exactly the same click
   as clicking the card image: one existing modal request, no duplicate event. */
@media (hover: hover) and (pointer: fine) {
  .explore-card > .explore-card-link:hover .explore-card-prompt-overlay,
  .explore-card > .explore-card-link:focus-visible .explore-card-prompt-overlay {
    filter: brightness(1.06) drop-shadow(0 5px 14px rgba(0, 0, 0, .30)) !important;
    transform: translateX(-50%) translateY(-2px) scale(1.035) !important;
  }
}

.explore-card > .explore-card-link:active .explore-card-prompt-overlay {
  filter: brightness(.94) !important;
  transform: translateX(-50%) translateY(1px) scale(.965) !important;
}

.explore-card > .explore-card-link:active > figure::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, .10) 61%,
    rgba(0, 0, 0, .40) 73%,
    rgba(0, 0, 0, .76) 88%,
    rgba(0, 0, 0, .92) 100%
  );
}

@media (max-width: 820px) {
  /* Explicitly preserve the project's dense three-column Explore layout. */
  .explore-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .explore-card .explore-card-prompt-overlay {
    bottom: clamp(.26rem, 3.6%, .48rem) !important;
    width: min(92%, 154px) !important;
  }

  .explore-card figure figcaption {
    inset-inline: .28rem;
    inset-block-start: .3rem;
    inset-block-end: auto;
  }

  /* On dense three-column phone cards, preserve the image-count indicator.
     Category remains available in the link aria-label/title metadata and popup. */
  .explore-card figure figcaption > span {
    display: none;
  }

  .explore-card figure figcaption > small {
    max-width: 100%;
    padding: .12rem .28rem;
  }

  .explore-card.is-featured figure::before {
    inset-block-start: .32rem;
    inset-inline-start: auto;
    inset-inline-end: .32rem;
  }

  .explore-card > .explore-card-link:focus-visible {
    outline-width: 2px;
    outline-offset: 2px;
    border-radius: .62rem;
  }
}

@media (max-width: 430px) {
  .explore-card .explore-card-prompt-overlay {
    width: 94% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .explore-card .explore-card-prompt-overlay,
  .explore-card > .explore-card-link > figure::after {
    transition: none !important;
  }

  .explore-card > .explore-card-link:hover .explore-card-prompt-overlay,
  .explore-card > .explore-card-link:focus-visible .explore-card-prompt-overlay {
    filter: brightness(1.05) !important;
    transform: translateX(-50%) !important;
  }
}