/* ===================================================================
   JOLTKEYS — bundles.css  ·  curated bundle grid (Kinetic Brutalism)
   Loads after tokens.css + styles.css + v3.css + pages.css
   =================================================================== */

/* ---------- bundle grid ---------- */
.bundle-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .bundle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .bundle-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- bundle card ---------- */
.bundle {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--bd);
  background: var(--surface-1);
  padding: clamp(18px, 2vw, 24px);
  transition: border-color var(--dur-std), transform var(--dur-std) var(--ease-out), box-shadow var(--dur-std);
}
.bundle:hover {
  border-color: var(--acid);
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-hard);
}

/* fanned row of 3 cover thumbnails */
.bundle__covers {
  display: flex;
  justify-content: center;
  padding: 8px 4px 18px;
  margin-bottom: 18px;
  border-bottom: var(--bd);
}
.bundle__cover {
  width: 33%;
  max-width: 92px;
  aspect-ratio: 2 / 3;
  border: var(--bd-strong);
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: 4px 4px 0 0 #000;
  transition: transform var(--dur-std) var(--ease-out);
}
.bundle__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bundle__cover:nth-child(1) { transform: rotate(-5deg); z-index: 1; }
.bundle__cover:nth-child(2) { transform: translateY(-8px); z-index: 3; margin-inline: -10px; }
.bundle__cover:nth-child(3) { transform: rotate(5deg); z-index: 2; }
.bundle:hover .bundle__cover:nth-child(1) { transform: rotate(-9deg) translateX(-4px); }
.bundle:hover .bundle__cover:nth-child(3) { transform: rotate(9deg) translateX(4px); }

/* meta */
.bundle__tag {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acid);
}
.bundle__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 6px 0 14px;
}

/* included titles */
.bundle__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.bundle__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .86rem;
  color: var(--text-muted);
}
.bundle__item .icon { width: 15px; height: 15px; color: var(--acid); flex: none; }

/* price block — pushed to bottom */
.bundle__foot { margin-top: auto; }
.bundle__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 12px;
  border-top: var(--bd);
  padding-top: 16px;
  margin-bottom: 16px;
}
.bundle__old {
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--text-dim);
  text-decoration: line-through;
}
.bundle__new {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--acid);
}
.bundle__save {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  padding: 5px 9px;
  background: var(--magenta);
  color: #fff;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 0 #000;
  margin-left: auto;
}
.bundle .btn { width: 100%; justify-content: center; }