/* =========================================================
   card.css — .card block
   Painting card: white bg, 40px padding, image + hover overlay.
   Cards are direct children of .layout grid (via display:contents).
   ========================================================= */

/* ---------------------------------------------------------
   .card
   White cell background — the 1px .layout gap shows #dee2e3
   between cards.
   --------------------------------------------------------- */
.card {
  position: relative;
  background-color: var(--color-surface);
  min-width: 0;
  aspect-ratio: 266 / 281;
}

/* ---------------------------------------------------------
   .card__inner
   Full-size clickable area with 40px fluid padding (Figma spec).
   --------------------------------------------------------- */
.card__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: var(--card-padding);
  background-color: var(--color-surface);
  cursor: pointer;
  font-weight: 700;
  transition: box-shadow var(--transition-base);
}

.card__inner:hover,
.card__inner:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------
   .card__image-wrap
   Centres the painting within the padded area.
   --------------------------------------------------------- */
.card__image-wrap {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------
   .card__image
   Natural aspect ratio: width fills container, height auto.
   object-fit: contain ensures proportions are preserved
   (phase 5.3 will add fixed container height).
   --------------------------------------------------------- */
.card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition-slow);
}

.card__inner:hover .card__image,
.card__inner:focus-visible .card__image {
  transform: scale(1.015);
}

/* ---------------------------------------------------------
   .card__overlay
   Caption area below image inside card.
   Hidden by default, appears on hover/focus.
   --------------------------------------------------------- */
.card__overlay {
  position: static;
  margin-top: var(--space-sm);
  min-height: 1.4em;
  padding: 0;
  background: transparent;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.card__inner:hover .card__overlay,
.card__inner:focus-visible .card__overlay {
  opacity: 1;
}

/* ---------------------------------------------------------
   .card__title
   Figma: Roboto 400, 14px, letter-spacing 1%, left-aligned.
   --------------------------------------------------------- */
.card__title {
  display: block;
  font-family: var(--font-family-base);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--color-text-primary);
}

/* ---------------------------------------------------------
   Loading state (phase 6.4): skeleton while fetch is in-flight
   --------------------------------------------------------- */
.card--skeleton .card__inner {
  cursor: default;
}

.card--skeleton .card__image-wrap {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  background-size: 240% 100%;
  animation: card-skeleton-shimmer 1.2s linear infinite;
}

/* ---------------------------------------------------------
   Appearance animation (phase 6.4): fade-in for loaded cards
   --------------------------------------------------------- */
.card--fade-in {
  animation: card-fade-in 280ms ease both;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-skeleton-shimmer {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

/* ---------------------------------------------------------
   Empty state (phase 6.5)
   --------------------------------------------------------- */
.gallery-empty {
  grid-column: 1 / -1;
  background-color: var(--color-surface);
  padding: clamp(20px, 4vw, 48px);
  min-height: clamp(180px, 25vw, 280px);
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--space-sm);
}

.gallery-empty__title {
  font-size: var(--font-size-lg);
  font-weight: 500;
}

.gallery-empty__text {
  color: var(--color-text-muted);
}