/*
 * Portfolio Section — Puzzle Solutions
 * Card grid, hover overlay, coming-soon card styles.
 * Uses CSS logical properties and token references only.
 */

/* === Portfolio Card === */
.portfolio-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  display: block;
  transform: translateZ(0);
  text-decoration: none;
  color: inherit;
}

.portfolio-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* === Image Wrapper === */
.portfolio-card__image-wrapper {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
}

/* === Gradient Placeholder (replaces screenshot until images are available) === */
.portfolio-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
}

.portfolio-card__placeholder--soon {
  background: linear-gradient(135deg, var(--color-neutral-300), var(--color-neutral-500));
  color: var(--color-text-inverse);
  font-size: var(--font-size-lg);
}

/* === Hover Overlay === */
.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(34, 154, 200, 0.85);
  opacity: 0;
  transition: opacity var(--transition-base);
}

/* Reveal overlay on hover AND keyboard focus (accessibility) */
.portfolio-card:hover .portfolio-card__overlay,
.portfolio-card:focus-within .portfolio-card__overlay {
  opacity: 1;
}

.portfolio-card__overlay-text {
  color: var(--color-text-inverse);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

/* === Coming Soon Cards === */
.portfolio-card--coming-soon {
  cursor: default;
  opacity: 0.7;
}

.portfolio-card--coming-soon:hover {
  box-shadow: var(--shadow-sm);
  transform: none;
}

/* === Card Info Footer === */
.portfolio-card__info {
  padding: var(--space-6);
}

.portfolio-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-block-end: var(--space-2);
  color: var(--color-text-primary);
}

.portfolio-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}