/* ═══════════════════════════════════════════════════════════
   PAGE: COURSES — Stacking Card Interaction
   ═══════════════════════════════════════════════════════════ */

/* ─── STACKING SECTION ───────────────── */
.stacking-section {
  overflow: visible !important;
  padding-top: 80px !important;
  transition: padding-top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.stacking-section:has(.card-stack-container:hover) { padding-top: 200px !important; }
.stacking-section .grid-2 { align-items: start; }

/* ─── Container ──────────────────────── */
.card-stack-container { position: relative; cursor: pointer; }
.card-stack-container::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.card-stack-container:hover::after { top: -180px; left: -20px; right: -20px; pointer-events: auto; }

/* ─── Subject cards ──────────────────── */
.subject-card {
  position: absolute; top: 0; left: 0; right: 0;
  border: 2.5px solid var(--black); padding: 18px 22px; border-radius: 4px;
  box-shadow: 4px 4px 0px var(--black); z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              opacity 0.3s ease;
  opacity: 0;
}
.card-stack-container:hover .subject-card { pointer-events: auto; }
.card-stack-container:hover .subject-card:nth-child(1) { opacity: 1; transition-delay: 0s; }
.card-stack-container:hover .subject-card:nth-child(2) { opacity: 1; transition-delay: 0.05s; }
.card-stack-container:hover .subject-card:nth-child(3) { opacity: 1; transition-delay: 0.1s; }

.subject-card:nth-child(1) { background: var(--white); }
.subject-card:nth-child(2) { background: var(--yellow); }
.subject-card:nth-child(3) { background: var(--blue-light); }

/* ─── Subject card inner layout ──────── */
.sc-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding-right: 12px; }
.sc-icon {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--black);
  background: var(--white); display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0; box-shadow: 2px 2px 0 var(--black);
}
.sc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-name { font-weight: 700; font-size: 14px; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-stat { font-family: 'Caveat', cursive; font-size: 13px; color: #555; white-space: nowrap; }
.sc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

.subject-card-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
  padding: 3px 9px; border: 2px solid var(--black); border-radius: 100px;
  background: var(--white); box-shadow: 2px 2px 0 var(--black); white-space: nowrap;
}
.sc-students { font-size: 10px; font-weight: 600; color: #777; }

/* ─── Main card ──────────────────────── */
.main-course-card {
  position: relative; z-index: 10;
  transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-stack-container:hover .main-course-card { transform: translateY(-6px); box-shadow: 8px 8px 0px var(--black); }

/* ─── FAN-OUT positions ──────────────── */
.card-stack-container:hover .subject-card:nth-child(1) { transform: translateY(-60px) translateX(-15px) rotate(-3deg); box-shadow: 6px 6px 0px var(--black); }
.card-stack-container:hover .subject-card:nth-child(2) { transform: translateY(-115px) translateX(12px) rotate(2deg); box-shadow: 6px 6px 0px var(--black); }
.card-stack-container:hover .subject-card:nth-child(3) { transform: translateY(-165px) translateX(-5px) rotate(-1.5deg); box-shadow: 6px 6px 0px var(--black); }

/* ─── Hover hint ─────────────────────── */
.hover-hint {
  font-family: 'Caveat', cursive; font-size: 13px; color: #aaa;
  margin-top: 12px; display: block; transition: opacity 0.2s; user-select: none;
}
.card-stack-container:hover .hover-hint { opacity: 0; }