/* Work Page Specific Styles */

.project-card-large {
  background-color: var(--bg-primary);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 2rem;
  padding: 0;
}

.project-display {
  overflow: hidden;
  padding: 3rem;
  background-color: transparent;
}

/* Base shape */
.display-shape {
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  transition: transform 0.5s ease;
}
.project-card-large:hover .display-shape {
  transform: scale(1.02);
}

.shape-arch {
  border-radius: var(--border-radius-arch);
  /* Or a specific path/clip-path if we wanted perfect matching, but border-radius works well */
}

.shape-circle {
  border-radius: 50vw 0 0 50vw; /* semi circle on the left */
}

.shape-arch-tall {
  width: 80%;
  height: 120%;
  top: -10%;
  border-radius: var(--border-radius-arch);
}

.shape-flat-bottom {
  width: 100%;
  height: 90%;
  top: 10%;
  border-radius: 50% 50% 0 0;
}

.mockup-img {
  width: 90%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s ease;
}

.mockup-mobile {
  width: auto;
  height: 400px; /* specific for mobile mockup */
  border-radius: 36px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s ease;
}

.project-card-large:hover .mockup-img,
.project-card-large:hover .mockup-mobile {
  transform: translateY(-10px);
}

.heading-arrow {
  top: -10px;
  right: -70px;
  pointer-events: none;
}

.stamp-work {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  /* Add SVG background via inline HTML or generic stamp class */
}

.stamp-orange {
  background-color: var(--accent-orange);
}

.top-left { top: 10%; left: 0%; transform: translateX(-50%); }
.top-right { top: 10%; right: 10%; transform: translateX(50%); }
.center-right { top: 50%; right: 0%; transform: translateX(50%); }

.translate-x-12 {
  transform: translateX(3rem);
}
.ml-24 {
  margin-left: 6rem;
}
.pr-8 {
  padding-right: 2rem;
}

/* Ensure padding adjustments for text info */
.project-info {
  padding: 4rem 2rem 4rem 4rem;
}

@media (max-width: 900px) {
  .project-card-large .grid-cols-2 {
    grid-template-columns: 1fr;
  }
  .project-display {
    padding: 2rem;
    transform: translateX(0);
    justify-content: center;
  }
  .project-info {
    padding: 2rem;
  }
  .heading-arrow {
    display: none;
  }
  .ml-24 { margin-left: 0; }
  .translate-x-12 { transform: translateX(0); }
}