/* card-loading.css — inline per-card loader for tappable content cards.
   Same look as the Tools page's .tool-card spinner: a translucent scrim over
   the tapped card while the next page loads. No full-page overlay.

   Host cards opt in with class="kh-card"; card-loading.js injects the overlay
   on first click and toggles .is-loading (that class name is deliberate —
   turbo-init.js scrubs .is-loading before snapshotting, so history restores
   never resurrect a stuck spinner). Kept standalone rather than folded into
   client-layout.css because OrgPage/Index.cshtml renders with Layout = null
   and pulls this file in on its own. */

.kh-card { position: relative; }

.kh-card-spin {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center;
    background: rgba(255,255,255,.78);
    border-radius: inherit; z-index: 3;
    color: #7C3AED;
}

/* The scrim shows the spinner alone. The "Loading…" label stays in the DOM
   for the role=status live region, just out of sight. */
.kh-card-spin-label {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

.kh-card.is-loading { pointer-events: none; }
/* The event and tournament cards lift via inline onmouseover styles, which
   only lose to !important — without this the card stays raised under the scrim. */
.kh-card.is-loading { transform: none !important; box-shadow: none !important; }
.kh-card.is-loading .kh-card-spin { display: flex; }

.kh-card-spinner {
    width: 26px; height: 26px; flex: 0 0 auto;
    border: 3px solid #EDE9FE; border-top-color: #7C3AED;
    border-radius: 50%; animation: khcardspin .6s linear infinite;
}

@keyframes khcardspin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .kh-card-spinner { animation-duration: 1.8s; }
}