/* =============================================================
   Work Card Component
   Layout + base styles from atumasova.webflow.io /work
   Motion: GSAP (card.js). Marquee image is hidden at rest
   (--work-bg-idle-opacity: 0) so the card reads as solid --card-bg-color;
   hover fades the image in. Derived from Webflow IX2 a-102 / a-103 / a-106.
   ============================================================= */

:root {
  --card-font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  --card-font-title: 1.2rem;
  --card-line-height: 1.4;
  --card-font-weight: 500;
  --card-text-color: #ffffff;
  --card-bg-color: #53192D;
  --card-gap: 15px;
  --card-gap-wide: clamp(16px, 1.25vw, 24px);
  /* Marquee hidden at rest — full gray surface; GSAP fades image in on hover */
  --work-bg-idle-opacity: 0;
}

.card-row {
  display: flex;
  gap: var(--card-gap);
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
}

.card-row + .card-row {
  margin-top: var(--card-gap);
}

/* Outer wrapper — IX2 SCROLL_INTO_VIEW targets .wrok-card-wrapper */
.wrok-card-wrapper,
.work-card {
  border-radius: 0;
  width: 100%;
  overflow: hidden;
  font-family: var(--card-font-family);
}

/* Interactive surface — IX2 MOUSE_OVER / MOUSE_MOVE target .work-wrapper */
.work-wrapper,
.work-card__link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 40vw;
  margin-bottom: 16px;
  background-color: var(--card-bg-color);
  color: var(--card-text-color);
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

/* Full-bleed marquee — IX2 targets .work-bg */
.work-bg,
.work-card__bg {
  z-index: 1;
  object-fit: cover;
  background-color: #53192D;
  height: 100%;
  position: absolute;
  inset: 0%;
  width: 100%;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  opacity: var(--work-bg-idle-opacity);
}

/* Framed thumbnail — IX2 targets .project-card-thumbnail-wrapper */
.project-card-thumbnail-wrapper,
.work-card__thumb {
  z-index: 6;
  aspect-ratio: 3 / 2;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  width: 29.6vw;
  display: flex;
  position: relative;
  overflow: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Thumbnail still */
.wrok-primay-photo,
.work-card__thumb-img {
  z-index: 2;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Overlay — same role as .overlay-main._01.less.full on the live site */
.overlay-main._01.less.full,
.work-card__overlay {
  z-index: 5;
  pointer-events: none;
  height: 100%;
  inset: 0;
  position: absolute;
  background-color: #0000004d;
}

/* Title row — IX2 targets .work-title-wrapper */
.work-title-wrapper,
.work-card__meta {
  z-index: 6;
  grid-column-gap: 3px;
  grid-row-gap: 5px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: auto auto 20px 20px;
  margin: 0;
  will-change: transform, opacity;
}

.work-title,
.work-card__title {
  font-size: var(--card-font-title);
  line-height: var(--card-line-height);
  font-weight: var(--card-font-weight);
  letter-spacing: -0.01em;
  margin: 0 1px;
}

.work-title.light-text,
.work-card__title--muted {
  opacity: 0.45;
}

.work-card__sep {
  margin: 0 1px;
  opacity: 0.45;
  font-size: var(--card-font-title);
  font-weight: var(--card-font-weight);
}

@media (prefers-reduced-motion: reduce) {
  .work-bg,
  .work-card__bg,
  .project-card-thumbnail-wrapper,
  .work-card__thumb,
  .work-title-wrapper,
  .work-card__meta,
  .wrok-primay-photo,
  .work-card__thumb-img {
    transition: none !important;
  }
}

/* Large viewports: full-width row, equal columns, 4:3 cards */
@media screen and (min-width: 992px) {
  .card-row {
    gap: var(--card-gap-wide);
  }

  .wrok-card-wrapper,
  .work-card {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .work-wrapper,
  .work-card__link {
    aspect-ratio: 4 / 3;
    min-height: 0;
    margin-bottom: 0;
  }

  /* Thumbnail scales with card width; 20% smaller than min(90%, 700px) */
  .project-card-thumbnail-wrapper,
  .work-card__thumb {
    width: min(72%, 560px);
  }

  .card-row + .card-row {
    margin-top: var(--card-gap-wide);
  }
}

@media screen and (max-width: 991px) {
  .wrok-card-wrapper,
  .work-card {
    flex: none;
    width: 100%;
  }

  .project-card-thumbnail-wrapper,
  .work-card__thumb {
    width: 52.8%;
  }
  .card-row {
    flex-flow: column;
  }
  .work-wrapper,
  .work-card__link {
    aspect-ratio: 3 / 2;
    min-height: auto;
  }
}

@media screen and (max-width: 767px) {
  .work-wrapper,
  .work-card__link {
    aspect-ratio: auto;
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --card-font-title: 1.1rem;
  }
  .project-card-thumbnail-wrapper,
  .work-card__thumb {
    width: 65.6%;
  }
  .work-title-wrapper,
  .work-card__meta {
    flex-flow: wrap;
    width: 100%;
    bottom: 17px;
    left: 0;
  }
  .work-wrapper,
  .work-card__link {
    padding-top: 29px;
    padding-bottom: 79px;
  }
}