/* ==========================================================================
   DESA55 Utilities
   ========================================================================== */

/* ── Margin ──────────────────────────────────────────────────────────────── */
.m-0  { margin: 0; }
.m-auto { margin: auto; }
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* ── Padding ─────────────────────────────────────────────────────────────── */
.p-0  { padding: 0; }
.p-2  { padding: var(--space-2); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }

/* ── Border ──────────────────────────────────────────────────────────────── */
.border        { border: 1px solid var(--color-border); }
.border-top    { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.border-primary { border-color: var(--color-primary); }
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded     { border-radius: var(--radius-base); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Background ──────────────────────────────────────────────────────────── */
.bg-primary   { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-card      { background-color: var(--bg-card); }
.bg-gradient  { background: var(--gradient-primary); }
.bg-transparent { background: transparent; }

/* ── Object Fit ──────────────────────────────────────────────────────────── */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ── Aspect Ratio ────────────────────────────────────────────────────────── */
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-3-2    { aspect-ratio: 3 / 2; }
.aspect-4-3    { aspect-ratio: 4 / 3; }

/* ── Cursor ──────────────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ── User Select ─────────────────────────────────────────────────────────── */
.select-none { -webkit-user-select: none; user-select: none; }
.select-all  { -webkit-user-select: all; user-select: all; }

/* ── Pointer Events ──────────────────────────────────────────────────────── */
.pointer-none { pointer-events: none; }
.pointer-auto { pointer-events: auto; }

/* ── Opacity ─────────────────────────────────────────────────────────────── */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ── Truncate ────────────────────────────────────────────────────────────── */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Break ───────────────────────────────────────────────────────────────── */
.break-words { overflow-wrap: break-word; word-break: break-word; }

/* ── Whitespace ──────────────────────────────────────────────────────────── */
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }

/* ── Shadow ──────────────────────────────────────────────────────────────── */
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-xl  { box-shadow: var(--shadow-xl); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* ── Separator dot ───────────────────────────────────────────────────────── */
.sep-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  vertical-align: middle;
  margin-inline: var(--space-2);
}

/* ── Reading Time Chip ───────────────────────────────────────────────────── */
.reading-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* ── Category Pill ───────────────────────────────────────────────────────── */
.category-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  text-decoration: none;
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
  text-align: center;
}

.category-pill:hover {
  border-color: var(--color-border-hover);
  background: rgba(34, 197, 94, 0.06);
  box-shadow: var(--shadow-glow-sm);
  transform: translateY(-2px);
}

.category-pill-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--color-primary);
  transition: background var(--transition-base);
}

.category-pill:hover .category-pill-icon {
  background: rgba(34, 197, 94, 0.18);
}

.category-pill-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.category-pill-count {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* ── Notification Dot ────────────────────────────────────────────────────── */
.notif-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--bg-primary);
  animation: pulse 2s infinite;
}

/* ── Responsive Show/Hide ────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

@media (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  body { background: white; color: black; }
}