/* ==========================================================================
   CAFÉ TRÊS LOBOS — CARDS
   ========================================================================== */

.ctl-card {
  background: var(--ctl-bg-elevated);
  border: var(--ctl-border-hairline);
  border-radius: var(--ctl-radius-lg);
  overflow: hidden;
  transition: transform var(--ctl-duration-base) var(--ctl-ease),
              box-shadow var(--ctl-duration-base) var(--ctl-ease),
              border-color var(--ctl-duration-base) var(--ctl-ease);
}

.ctl-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ctl-shadow-card-hover);
  border-color: rgba(191, 149, 63, 0.55);
}

.ctl-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ctl-bg-soft);
}

.ctl-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ctl-duration-slow) var(--ctl-ease);
}

.ctl-card:hover .ctl-card__media img {
  transform: scale(1.06);
}

.ctl-card__body {
  padding: var(--ctl-space-3);
}

.ctl-card__eyebrow {
  font-size: var(--ctl-fs-xs);
  letter-spacing: var(--ctl-ls-menu);
  text-transform: uppercase;
  color: var(--ctl-gold-center);
  margin-bottom: var(--ctl-space-1);
}

.ctl-card__title {
  font-size: var(--ctl-fs-md);
  font-weight: var(--ctl-fw-semibold);
  color: var(--ctl-white);
  margin-bottom: var(--ctl-space-1);
}

.ctl-card__text {
  color: var(--ctl-gray-400);
  font-size: var(--ctl-fs-sm);
}

.ctl-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ctl-space-2);
}

/* ---------- Badges (Novo / Promoção) ---------- */
.ctl-badge {
  position: absolute;
  top: var(--ctl-space-2);
  left: var(--ctl-space-2);
  padding: 0.35em 0.9em;
  font-size: var(--ctl-fs-xs);
  font-weight: var(--ctl-fw-semibold);
  letter-spacing: var(--ctl-ls-menu);
  text-transform: uppercase;
  border-radius: var(--ctl-radius-pill);
  z-index: 2;
}

.ctl-badge--new {
  background: var(--ctl-bg);
  color: var(--ctl-gold-center);
  border: 1px solid var(--ctl-gold-center);
}

.ctl-badge--sale {
  background: var(--ctl-gold-gradient-135);
  color: var(--ctl-black-text);
}

/* ---------- Skeleton loading de card (ver 11-animations.css para o keyframe) ---------- */
.ctl-card--skeleton .ctl-card__media,
.ctl-card--skeleton .ctl-skeleton-line {
  background: linear-gradient(90deg, var(--ctl-bg-soft) 25%, var(--ctl-gray-700) 50%, var(--ctl-bg-soft) 75%);
  background-size: 200% 100%;
  animation: ctl-skeleton-pulse 1.4s ease-in-out infinite;
}

.ctl-skeleton-line {
  height: 14px;
  border-radius: var(--ctl-radius-sm);
  margin-bottom: var(--ctl-space-1);
}

.ctl-skeleton-line--60 { width: 60%; }
.ctl-skeleton-line--40 { width: 40%; }