/* produk-preview.css — Section 04 / Produk
 *
 * Design rationale:
 * - KelasIO: full-width, name truly oversized (type-display), feels like a
 *   product announcement — not just a wider card
 * - Other 3 products: uniform 2-column grid, same internal structure
 * - All cards: consistent border-radius, padding, and meta treatment
 * - CTA on all cards, not just featured
 * -------------------------------------------------------- */

.produk {
  background: var(--surface-1);
  border-block: 1px solid var(--paper-faint);
}

/* ── Section header ────────────────────────────────────── */
.produk__header {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
  margin-bottom: var(--sp-16);
}

.produk__label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.produk__h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--paper);
}

/* ── Grid ────────────────────────────────────────────────
 * NOTE: previously used background: var(--paper-faint) with a 1px gap to fake
 * hairline grid lines. That background bled through the empty bottom-right
 * cell (3 cards in a 2-col grid) and showed as a stray gray box. Cards now
 * sit on the section surface directly; hairlines come from each card's border.
 * ------------------------------------------------------ */
.produk__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
}

/* ── Featured card (KelasIO) ───────────────────────────── */
.produk__card--featured {
  grid-column: 1 / -1;
  background: var(--surface-1);
  border-bottom: 1px solid var(--paper-faint);
}

.produk__card--featured .bcard {
  flex-direction: column;
  border: none;
  border-radius: 0;
  padding: var(--sp-10);
  height: auto;               /* don't stretch to equal height */
}

.produk__card--featured .bcard:hover {
  background: var(--surface-2);
}

/* Featured name: truly large — announces the product */
.produk__card--featured .produk__name {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.045em;
  line-height: 0.88;
  margin-bottom: 0;
}

/* Featured head: name + status badge — center aligned */
.produk__card--featured .produk__card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* Featured body: tagline left (2/3), stack+cta right (1/3) */
.produk__card--featured .produk__card-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-10);
  align-items: end;
}

.produk__card--featured .produk__card-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-5);
}

/* ── Regular cards ─────────────────────────────────────── */
.produk__card {
  background: var(--surface-1);
  border-block: 1px solid var(--paper-faint);
}

/* internal hairline between the two regular cards in a row */
.produk__card:nth-child(odd of .produk__card) {
  border-right: 1px solid var(--paper-faint);
}

.produk__card .bcard {
  border: none;
  border-radius: 0;
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.produk__card .bcard:hover {
  background: var(--surface-2);
}

.produk__card .produk__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.produk__card .produk__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.produk__card .produk__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--paper-faint);
}

/* ── Shared elements ───────────────────────────────────── */
.produk__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--paper);
}

.produk__tagline {
  font-size: var(--type-small);
  color: var(--paper-dim);
  line-height: 1.6;
}

.produk__stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.produk__tech {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--paper-dim);
  border: 1px solid var(--paper-faint);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* ── Section footer ────────────────────────────────────── */
.produk__footer {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--paper-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.produk__all-link {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}

.produk__all-link:hover { color: var(--paper); }

.produk__count {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--paper-faint);
  letter-spacing: 0.08em;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .produk__card--featured .produk__card-body {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .produk__card--featured .produk__card-foot {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .produk__header { grid-template-columns: 1fr; gap: var(--sp-6); }
  .produk__grid {
    grid-template-columns: 1fr;  /* stack all cards */
  }
  .produk__card--featured { grid-column: 1; }
  .produk__card--featured .bcard { padding: var(--sp-6); }
  .produk__card--featured .produk__name { font-size: clamp(2rem, 8vw, 3rem); }
  .produk__card--featured .produk__card-head { flex-wrap: wrap; gap: var(--sp-3); }
}