/* card.css — Your work goes here. */

/* ============================================================
   CARD
   ============================================================ */

.card {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: var(--transition-base);

   &:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
   }
}

/* ============================================================
   CARD IMAGE
   ============================================================ */

.card-image {
   overflow: hidden;
   max-height: 200px;

   img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition-base);
      transition-duration: 400ms;
   }
}

.card:hover .card-image img {
   transform: scale(1.05)
}

/* ============================================================
   CARD BODY
   ============================================================ */

.card-body {
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   flex: 1;
}

.card-tag {
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--color-accent-light);
   background: color-mix(in srgb, var(--color-accent) 15%, transparent);
   padding: 0.2rem 0.6rem;
   border-radius: 99px;
   align-self: flex-start;
}

.card-title {
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.3;
}

.card-description {
   font-size: 0.9rem;
   color: var(--color-text-muted);
   line-height: 1.55;
}

.card-cta {
   margin-top: auto;
}