/**
 * DIGITAL SEBA - Resource Center Extension Styles
 * Additive only. Uses existing CSS variables from assets/css/main.css.
 * Nothing here overrides or redefines any existing class.
 */

@keyframes ds-heart-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.fav-btn.pop {
  animation: ds-heart-pop 0.35s ease;
}

.resource-card p.ds-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ds-highlight {
  background: rgba(37, 99, 235, 0.18);
  color: var(--primary);
  border-radius: 3px;
  padding: 0 2px;
}

.ds-shortcut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: all var(--transition-normal);
}

.ds-shortcut-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.ds-shortcut-icon { font-size: 30px; }

.ds-shortcut-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.3;
}

.ds-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.ds-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

/* ---- Premium polish: card entrance animation ---- */
@keyframes ds-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.resource-card {
  animation: ds-card-in 0.4s ease both;
}
.resource-card:nth-child(1) { animation-delay: 0.02s; }
.resource-card:nth-child(2) { animation-delay: 0.05s; }
.resource-card:nth-child(3) { animation-delay: 0.08s; }
.resource-card:nth-child(4) { animation-delay: 0.11s; }
.resource-card:nth-child(5) { animation-delay: 0.14s; }
.resource-card:nth-child(6) { animation-delay: 0.17s; }
.resource-card:nth-child(7) { animation-delay: 0.20s; }
.resource-card:nth-child(8) { animation-delay: 0.23s; }

@media (prefers-reduced-motion: reduce) {
  .resource-card { animation: none; }
}

/* ---- Skeleton loading state ---- */
@keyframes ds-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.ds-skeleton-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 20px;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.ds-skeleton-line {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary, var(--bg-secondary)) 37%, var(--bg-secondary) 63%);
  background-size: 800px 100%;
  animation: ds-shimmer 1.4s ease-in-out infinite;
}

/* ---- Sticky glass search/filter bar ---- */
.ds-sticky-bar {
  position: sticky;
  top: calc(var(--nav-height, 72px) + 12px);
  z-index: 50;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}

/* ---- Sticky category rail ---- */
.ds-sticky-categories {
  position: sticky;
  top: calc(var(--nav-height, 72px) + 128px);
  z-index: 40;
  background: var(--bg-primary);
  padding: 10px 0;
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  .ds-sticky-bar, .ds-sticky-categories { position: static; }
}