/* ============================================================
   GLASS CARD — Secondary Content Component
   ============================================================ */

.glass-card {
  width: var(--card-w);
  height: var(--card-h);
  
  /* Glassmorphism */
  backdrop-filter: blur(var(--glass-blur));
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  
  box-shadow: var(--glass-shadow);
  
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  
  cursor: pointer;
  transition: all var(--dur-normal) var(--easing-spring);
}

.glass-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 16px 48px 0 rgba(31, 38, 135, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── CARD IMAGE ────────────────────────────────────────────– */
.glass-card-image {
  width: 100%;
  height: 233px;  /* Fibonacci proportion within card */
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0.9;
  transition: opacity var(--dur-normal) var(--easing-spring);
}

.glass-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glass-card:hover .glass-card-image {
  opacity: 1;
}

/* ── CARD CONTENT ─────────────────────────────────────────– */
.glass-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.glass-card-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  color: var(--color-frost);
}

.glass-card-text {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-whisper);
}

/* ── CARD GRID ─────────────────────────────────────────────– */
.glass-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-w), 1fr));
  gap: var(--sp-4);
  
  padding: var(--sp-5) var(--sp-5);
}

/* ── RESPONSIVE ───────────────────────────────────────────– */
@media (max-width: 890px) {
  .glass-card {
    width: var(--card-w-compact);
    height: var(--card-h-compact);
    padding: var(--sp-3);
    gap: var(--sp-2);
  }
  
  .glass-card-image {
    height: 144px;
  }
  
  .glass-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--card-w-compact), 1fr));
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4);
  }
}

@media (max-width: 610px) {
  .glass-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.618;
    padding: var(--sp-3);
  }
  
  .glass-card-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3);
  }
  
  .glass-card-image {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}