/* ============================================================
   📝 Printable Worksheets — premium downloadable resource cards
   ============================================================
   Learning Centre section between "Lessons & Notes" and
   "Soalan Peperiksaan UASA".

   • Section shell reuses the .sifir-header/.sifir-content
     accordion from learning.css (same as Sifir / Latih Tubi /
     Year Selector / UASA) — nothing accordion-related lives here.
   • Cards are rendered dynamically by printable-worksheets.js
     from its WORKSHEET_DATA registry; each card receives its
     year accent colour via the --wc custom property (inline),
     so new years/packs need zero CSS changes.
   • Dark mode is automatic: every colour derives from the
     shared theme variables (--surface, --gray-*, …).
   ============================================================ */

.worksheets-section { margin-bottom: 1.75rem; }

/* Six cards can outgrow the default 3000px accordion limit on
   mobile (single column) — mirror the years-section override. */
.worksheets-section .sifir-content.expanded { max-height: 6000px; }

/* ---- Grid — 3 desktop · 2 tablet · 1 mobile ---------------- */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}

/* ---- Card -------------------------------------------------- */
.ws-card {
  --wc: var(--primary); /* per-year accent — set inline from WORKSHEET_DATA */
  position: relative; display: flex; flex-direction: column;
  text-align: left; gap: 0.5rem;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--wc) 7%, var(--surface)) 0%,
      var(--surface) 55%);
  border: 2px solid color-mix(in srgb, var(--wc) 18%, var(--gray-100));
  border-radius: var(--radius);
  padding: 1.85rem 1.4rem 1.4rem;
  cursor: pointer; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* coloured accent band along the top — matches the UASA cards */
.ws-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 6px;
  background: var(--wc); opacity: 0.9;
}
.ws-card:hover, .ws-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--wc) 30%, transparent);
  border-color: var(--wc); outline: none;
}
.ws-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--wc) 45%, transparent);
  outline-offset: 2px;
}
.ws-card:active { transform: translateY(-1px) scale(0.99); }

/* ---- Icon row: 📄 icon + worksheet-count badge ------------- */
.ws-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.2rem;
}
.ws-card-icon {
  display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem; font-size: 1.7rem; line-height: 1;
  background: color-mix(in srgb, var(--wc) 14%, var(--surface));
  border-radius: 14px;
  transition: transform 0.25s ease;
}
.ws-card:hover .ws-card-icon { transform: rotate(-6deg) scale(1.08); }
.ws-card-badge {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--wc) 72%, var(--gray-600));
  background: color-mix(in srgb, var(--wc) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--wc) 24%, transparent);
  border-radius: 999px; padding: 0.28rem 0.75rem;
  white-space: nowrap;
}

/* ---- Text -------------------------------------------------- */
.ws-card-title {
  font-family: 'Fredoka One', cursive; font-size: 1.35rem; line-height: 1.1;
  color: var(--wc);
}
.ws-card-age { font-size: 0.82rem; font-weight: 700; color: var(--gray-600); }
.ws-card-desc {
  font-size: 0.92rem; line-height: 1.5; color: var(--gray-600);
  margin: 0.3rem 0 0.6rem;
}

/* ---- Topic chips ------------------------------------------- */
.ws-card-topics {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 1rem;
}
.ws-topic-chip {
  font-size: 0.75rem; font-weight: 700;
  color: var(--gray-600);
  background: color-mix(in srgb, var(--wc) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--wc) 20%, var(--gray-100));
  border-radius: 999px; padding: 0.22rem 0.65rem;
}

/* ---- CTA pill ---------------------------------------------- */
.ws-card-cta {
  margin-top: auto; align-self: flex-start;
  font-size: 0.85rem; font-weight: 800; color: #fff;
  background: var(--wc);
  padding: 0.55rem 1.4rem; border-radius: 50px;
}

/* ---- Larger text mode -------------------------------------- */
body.large-text .ws-card-title { font-size: 1.45rem; }
body.large-text .ws-card-desc { font-size: 1.02rem; }
body.large-text .ws-topic-chip { font-size: 0.85rem; }

/* ---- Respect reduced-motion preference --------------------- */
@media (prefers-reduced-motion: reduce) {
  .ws-card, .ws-card-icon { transition: none; }
  .ws-card:hover, .ws-card:focus-visible { transform: none; }
  .ws-card:hover .ws-card-icon { transform: none; }
}

/* ---- Responsive: tablet → 2 per row, mobile → 1 per row ---- */
@media (max-width: 1024px) { .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .ws-grid { grid-template-columns: 1fr; gap: 1rem; }
}