/* card.css — clean component file for cards */

/* Base card */
.card {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s;
  min-height: 140px;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
}
.card h3 { margin: 0 0 8px; font-size: 16px; }
.card p { margin: 0 0 12px; color: var(--muted); line-height: 1.45; }
.actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* Accent stripes */
.section.tools .grid.cols-3 > .card {
  border-top: 4px solid var(--accent);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.section.posts .grid.cols-3 > .card {
  border-left: 4px solid var(--accent-2);
  border-left-radius: 8px;
  padding-left: 14px;
}

/* Skeleton loading */
.card.skeleton {
  background: linear-gradient(90deg, #f6f8fa, #f0f3f6, #f6f8fa);
  border-radius: 12px;
  min-height: 140px;
  padding: 14px 16px;
  animation: shimmer 1.1s linear infinite;
  color: transparent;
}
.card.skeleton .s-line { height: 12px; border-radius: 6px; background: #eef3f7; margin-bottom: 10px; }
.card.skeleton .s-short { width: 30%; }
.card.skeleton .s-medium { width: 60%; }
.card.skeleton .s-long { width: 90%; }
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }

/* Buttons */
.btn-open {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.btn-open:hover { opacity: 0.9; }

/* Share button — pointer cursor and subtle hover */
.btn-share {
  background: #6b7280;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer; /* hand cursor */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: background-color .16s ease, transform .08s ease;
}
.btn-share:hover {
  background-color: #565e66;
  transform: translateY(-1px);
}
.btn-share:focus {
  outline: 3px solid rgba(37, 99, 235, 0.12);
  outline-offset: 3px;
}