/**
 * SVGaze - Card Components
 * Card containers, preview areas, and related elements
 */

/* === Card Container === */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px;
  gap: 10px;
  min-height: auto;
  transition: all var(--transition-fast);
}

.card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* === Favorite Card Highlight === */
.favorite-card {
  border-color: rgba(255, 215, 0, 0.2);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.02), transparent);
}

.favorite-card:hover {
  border-color: rgba(255, 215, 0, 0.4);
}

/* === Preview Area === */
.preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  aspect-ratio: 1 / 1;
  width: 100%;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: var(--radius-md);
}

/* SVG Wrapper - maintains aspect ratio */
.svg-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
}

.svg-wrap svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* === Favorite Button in Preview === */
.preview .favorite-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  font-size: 20px;
  transition: color var(--transition-fast);
  z-index: 1;
}

.preview .favorite-btn:hover {
  color: #ef4444;
}

.preview .favorite-btn.favorited {
  color: #fbbf24;
}

.preview .favorite-btn.favorited:hover {
  color: #ef4444;
}

/* === Card Info Section === */
.card .info {
  padding: 0;
  display: flex;
  gap: 10px;
  flex-direction: column;
  background: transparent;
  border-top: none;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.filename {
  font-size: var(--font-size-xs);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  color: var(--text-primary);
  font-weight: var(--font-weight-normal);
}

/* === Badge Container === */
.card-badges {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-height: 22px;
  flex-wrap: wrap;
}

/* === Actions === */
.actions {
  display: flex;
  gap: 6px;
  flex-direction: column;
  width: 100%;
}

.actions .primary-action {
  width: 100%;
}

.actions .secondary-actions {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
}

/* === Welcome Card === */
#welcome {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-3xl);
  min-height: auto;
}

#welcome p:first-child {
  margin: 0 0 6px 0;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
}

#welcome p:last-child {
  margin: 0;
  color: var(--text-muted);
}

/* === Responsive === */
@media (max-width: 640px) {
  .preview svg {
    width: 56px;
    height: 56px;
  }

  .card .info {
    padding: var(--space-sm);
  }
}