/* ===== Clickable Card ===== */
.resume-card {
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  height: 100%;
  text-decoration: none; /* no underline */
}

/* ===== Background Image with Gradient Fade ===== */
.resume-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    var(--bg-img);
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.3s ease;
}

.resume-card:hover::before {
  transform: scale(1.05);
  filter: blur(5px) brightness(0.85);
}

/* ===== Content Overlay ===== */
.resume-content {
  position: relative;
  z-index: 1;
  padding: 50px;
  width: 100%;
  pointer-events: none; /* Prevents nested link behavior bleed */
  background: linear-gradient(
      to bottom,
      rgba(15, 15, 15, 0),  /* transparent */
      rgba(31, 31, 31, 0.5) 25%,  /* transparent */
      rgba(31, 31, 31, 1) /* solid until 85% */
  );
}

.resume-content * {
  pointer-events: auto; /* Allows text interaction again */
  text-shadow:
    -2px -2px 0 black,  /* Top-left */
    2px -2px 0 black,   /* Top-right */
    -2px 2px 0 black,   /* Bottom-left */
    2px 2px 0 black;    /* Bottom-right */
}

.resume-content h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
}

.resume-content p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
  color: white;
}