@use "../../../styles/abstracts/variables" as *;

$primary: #5e3817;
$primary-2: #7a4b20;

/* ================= CARD ================= */
.card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.05);

  overflow: hidden;

  display: flex;
  flex-direction: column;

  cursor: pointer;

  opacity: 0;
  transform: translateY(20px);

  animation: fadeUp 0.5s ease forwards;

  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.02);

  &:hover {
    transform: translateY(-6px) scale(1.01);

    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.12),
      0 8px 20px rgba(122, 75, 32, 0.08);
  }
}

/* ================= GRID ANIMATION ================= */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= IMAGE ================= */
.image {
  position: relative;
  height: 200px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: translateZ(0);
    filter: contrast(1.05) saturate(1.05);

    transition: transform 0.7s ease;
  }
}

.card:hover .image img {
  transform: scale(1.08);
}

/* ================= OVERLAY ================= */
.overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0.35)
  );
}

/* ================= STATUS ================= */
.status {
  position: absolute;
  top: 14px;
  left: 14px;

  font-size: 0.7rem;
  font-weight: 600;

  padding: 5px 12px;
  border-radius: 999px;

  backdrop-filter: blur(10px);

  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* status colors */
.on-going { background: rgba(245, 158, 11, 0.85); }
.upcoming { background: rgba(59, 130, 246, 0.85); }
.completed { background: rgba(0, 193, 139, 0.85); }
.pending { background: rgba(100, 116, 139, 0.85); }

/* ================= CONTENT ================= */
.content {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 1rem;
  font-weight: 600;
}

/* ================= META ================= */
.meta {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 6px;

  font-size: 0.8rem;
  color: #6b6b6b;

  div {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  svg {
    color: $primary-2;
  }
}

/* ================= DESCRIPTION ================= */
.description {
  margin-top: 0.7rem;

  font-size: 0.85rem;
  color: #4b4b4b;
  line-height: 1.6;

  display: -webkit-box;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

/* ================= DIVIDER ================= */
.divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 1rem 0 0.6rem;
}

/* ================= FOOTER ================= */
.footer {
  display: flex;
  justify-content: flex-end;
}

.view {
  display: flex;
  align-items: center;
  gap: 5px;

  font-size: 0.8rem;
  font-weight: 600;

  color: $primary;

  opacity: 0.85;
  transition: all 0.3s ease;
}

.card:hover .view {
  opacity: 1;
  transform: translateX(6px);
}

/* ================= SKELETON ================= */
.skeleton {
  pointer-events: none;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skelImage,
.skelTitle,
.skelMeta span,
.skelDesc,
.skelFooter {
  position: relative;
  overflow: hidden;
  background: #eee;
  border-radius: 6px;
}

.skelImage {
  height: 200px;
}

.skelTitle {
  height: 14px;
  width: 70%;
  margin-top: 10px;
}

.skelMeta {
  display: flex;
  gap: 10px;
  margin-top: 10px;

  span {
    height: 10px;
    width: 40%;
  }
}

.skelDesc {
  height: 40px;
  margin-top: 10px;
}

.skelFooter {
  height: 12px;
  width: 30%;
  margin-top: 12px;
}

/* shimmer effect */
.skelImage::after,
.skelTitle::after,
.skelMeta span::after,
.skelDesc::after,
.skelFooter::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );

  animation: shimmer 1.2s infinite;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .image {
    height: 170px;
  }
}