/* ============================================================================
   Locked-category treatment — the six pre-release categories are shown to
   everyone as VISIBLE but greyed-out, locked cards/links (Owner ruling
   2026-09-02). The real content stays server-gated in functions/_middleware.js.

   Default state in the static markup is LOCKED (grey + 🔒 "เร็วๆ นี้" badge).
   main.js reads /api/account `staff` and removes `.ifp-locked` for staff/owner,
   which un-greys the element and auto-hides the badge. Brand red only (#c0392b);
   no gold. No inline handlers (CSP): interaction is wired in main.js.
   ============================================================================ */
.ifp-locked {
  filter: grayscale(1);
  opacity: .6;
  cursor: not-allowed;
  position: relative;
}
/* Locked cards must not lift/animate on hover the way live cards do. */
.ifp-locked:hover,
.ifp-locked:focus-visible {
  transform: none !important;
  filter: grayscale(1);
  opacity: .6;
}
.ifp-locked::before { transform: scaleX(0) !important; } /* kill the tool-card top accent sweep */

/* The 🔒 "เร็วๆ นี้" badge shows ONLY while the element is locked; when main.js
   removes .ifp-locked for staff, the badge disappears with it. */
.ifp-lock-badge { display: none; }
.ifp-locked .ifp-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-family: 'IBM Plex Sans Thai', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
/* On the image cards, pin the badge to the corner so the artwork stays legible. */
.wisdom-card.ifp-locked .ifp-lock-badge,
.tool-card.ifp-locked .ifp-lock-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  z-index: 2;
}
/* On the nav mega links (a flex column with a fixed min-height) and the mobile drawer,
   pin the badge absolutely so it does NOT add a row and grow the open mega panel — a taller
   panel would overlap and intercept clicks on the account menu. */
.nav-mega-link.ifp-locked .ifp-lock-badge,
#mobileNavShell .nav-mega-link.ifp-locked .ifp-lock-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  margin: 0;
  z-index: 2;
}