/* ════════════════════════════════════════════════════════════
   BluCruise Design System — states.css
   Loading, empty and error states.

   Before this file, every template page implemented its own
   not-found markup inline. Three near-identical copies, which is
   how the destination.html version came to contain a defect the
   others did not. One implementation now.

   Requires: variables.css
   Paired with: bc-ui.js (BC.ui.errorState / emptyState / skeleton)
════════════════════════════════════════════════════════════ */

/* ── Shared shell for full-page empty and error states ────── */
.bc-state {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-3);
  background: var(--crmd);
}

.bc-state__inner {
  max-width: 440px;
  text-align: center;
}

.bc-state__icon {
  font-size: 48px;
  line-height: 1;
  opacity: .2;
  margin-bottom: var(--sp-2);
  color: var(--navy);
}

.bc-state__title {
  font-family: var(--font-s);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 10px;
}

.bc-state__body {
  color: var(--tx3);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 var(--sp-3);
}

.bc-state__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Inline variant — sits inside a section, not the page ─── */
.bc-state--inline {
  min-height: 0;
  padding: var(--sp-4) var(--sp-3);
  background: transparent;
  border: 1px dashed var(--br);
  border-radius: var(--rad-md);
}

.bc-state--inline .bc-state__icon { font-size: 32px; margin-bottom: 12px; }
.bc-state--inline .bc-state__title { font-size: 20px; }

/* ── Skeleton loading ─────────────────────────────────────── */
.bc-skel {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, .05);
  border-radius: var(--rad-sm);
}

.bc-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, .45),
    transparent);
  animation: bc-shimmer 1.4s infinite;
}

@keyframes bc-shimmer {
  100% { transform: translateX(100%); }
}

.bc-skel--text  { height: 14px; margin-bottom: 8px; }
.bc-skel--title { height: 28px; width: 60%; margin-bottom: var(--sp-2); }
.bc-skel--line  { height: 12px; width: 100%; margin-bottom: 6px; }
.bc-skel--line:last-child { width: 70%; }
.bc-skel--card  { height: 190px; border-radius: var(--rad-md); margin-bottom: var(--sp-2); }
.bc-skel--img   { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--rad-md); }

.bc-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-2);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .bc-skel::after { animation: none; }
}

@media (max-width: 480px) {
  .bc-state { min-height: 55vh; padding: var(--sp-4) var(--sp-2); }
  .bc-state__title { font-size: 23px; }
  .bc-state__actions .bc-btn { width: 100%; }
}