/* ==========================================================================
   TARJETA DE PROYECTO
   --------------------------------------------------------------------------
   El HTML de estas tarjetas lo genera js/modules/projects.js a partir de
   js/data/projects.js. Variantes:
   .project-card.is-featured     → ocupa todo el ancho (proyecto destacado)
   .project-card.is-reverse      → destacado con la imagen a la derecha
   .project-card.is-half         → ocupa la mitad del ancho (2 por fila)
   .project-card.is-contain      → la imagen se muestra completa y centrada
   .project-card.is-placeholder  → espacio reservado para un proyecto futuro
   El color de cada tarjeta depende de su categoría (.tone-*, ver
   VX.CATEGORY_TONES en js/data/projects.js).
   ========================================================================== */

.project-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--dur-med) ease,
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) ease;
}

/* Luz que sigue al mouse (posición en --mx/--my, actualizada por JS) */
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(var(--tone-rgb, var(--c-teal-rgb)), 0.16),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--dur-med) ease;
}

.project-card:hover {
  border-color: rgba(var(--tone-rgb, var(--c-teal-rgb)), 0.6);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.project-card:hover::before {
  opacity: 1;
}

/* ---------- Imagen / vista previa ---------- */
.project-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(80% 90% at 50% 100%, rgba(var(--tone-rgb, var(--c-teal-rgb)), 0.28), transparent 70%),
    radial-gradient(60% 60% at 0% 0%, rgba(var(--c-indigo-rgb), 0.12), transparent 70%),
    var(--c-surface-2);
}

/* Barra de color superior de la tarjeta */
.project-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tone, var(--c-accent));
  z-index: 2;
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.project-card:hover .project-card__media img {
  transform: scale(1.04);
}

/* Placeholder: cuadrícula técnica con mira central */
.project-card__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-3);
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  background-color: transparent;
  color: var(--c-text-faint);
  text-align: center;
  padding: var(--sp-4);
}

.project-card__placeholder svg {
  width: 56px;
  height: 56px;
  color: var(--tone, var(--c-accent));
  filter: drop-shadow(0 0 12px rgba(var(--tone-rgb, var(--c-teal-rgb)), 0.6));
  transition: transform var(--dur-slow) var(--ease-out);
}

.project-card:hover .project-card__placeholder svg {
  transform: rotate(90deg);
}

.project-card__placeholder span {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Insignia de estado (ej. "En desarrollo") sobre la imagen */
/* Etiqueta pegada a la esquina superior izquierda, color de la categoría */
.project-card__badge {
  position: absolute;
  top: 3px; /* debajo de la barra de color superior */
  left: 0;
  padding: 0.4rem 0.9rem 0.4rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tone, var(--c-accent));
  color: var(--c-bg);
}

/* ---------- Cuerpo ---------- */
.project-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
  padding: var(--sp-5);
}

.project-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}

.project-card__meta .text-accent {
  color: var(--tone, var(--c-accent));
}

.project-card__title {
  font-size: var(--fs-lg);
}

.project-card__desc {
  color: var(--c-text-muted);
  font-size: var(--fs-base);
}

/* Problema → Solución */
.project-card__case {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.project-card__case > div {
  padding-left: var(--sp-3);
  border-left: 2px solid rgba(var(--tone-rgb, var(--c-teal-rgb)), 0.45);
}

.project-card__case dt {
  margin-bottom: 0.15rem;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tone, var(--c-teal));
}

.project-card__case dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.project-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-sm);
}

.project-card__links svg {
  width: 14px;
  height: 14px;
}

/* fit: "contain" → muestra la captura completa, centrada (para capturas muy anchas) */
.project-card.is-contain .project-card__media img {
  object-fit: contain;
  object-position: center;
}

/* Tarjetas normales: si la fila es más alta, la imagen crece un poco (con tope)
   para que no quede tanto espacio vacío; el resto se reparte en el texto. */
.project-card:not(.is-featured) .project-card__media {
  flex: 1 0 auto;
}

/* ---------- Variante: destacado ---------- */
@media (min-width: 860px) {
  .project-card.is-featured {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .project-card.is-featured .project-card__media {
    flex: 1.3;
    aspect-ratio: auto;
    min-height: 340px;
    border-bottom: none;
    border-right: 1px solid var(--c-line);
  }

  .project-card.is-featured.is-reverse {
    flex-direction: row-reverse;
  }

  .project-card.is-featured.is-reverse .project-card__media {
    border-right: none;
    border-left: 1px solid var(--c-line);
  }

  .project-card.is-featured .project-card__body {
    flex: 1;
    padding: var(--sp-6);
    justify-content: center;
  }

  .project-card.is-featured .project-card__title {
    font-size: var(--fs-xl);
  }
}

/* ---------- Variante: placeholder ---------- */
.project-card.is-placeholder {
  border-style: dashed;
  background: transparent;
}

.project-card.is-placeholder .project-card__title {
  color: var(--c-text-muted);
}

/* Animación al filtrar */
.project-card.is-hidden {
  display: none;
}

/* Selector más específico para ganarle a la animación de [data-reveal] */
.js .project-card.is-entering[data-reveal],
.project-card.is-entering {
  animation: card-in var(--dur-med) var(--ease-out) both;
}

/* ---------- Galería de capturas (miniaturas que abren la imagen completa) ---------- */
.project-card__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.project-card__gallery a {
  width: 56px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
}

.project-card__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform var(--dur-slow) var(--ease-out);
}

.project-card__gallery a:hover img,
.project-card__gallery a:focus-visible img {
  transform: scale(1.08);
}