/* Project gallery: stable image frames keep hover motion from reflowing the grid. */
.projects-grid {
  align-items: stretch;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-card {
  display: flex;
  flex-direction: column;
  min-height: 548px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.project-art.project-shot {
  aspect-ratio: 16 / 10;
  background: #dbe8f5;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.project-image {
  display: block;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
  width: 100%;
}

.project-art-overlay {
  background: linear-gradient(180deg, rgba(6, 27, 79, .6), rgba(6, 27, 79, 0) 48%);
  display: flex;
  inset: 0;
  padding: 20px 21px;
  pointer-events: none;
  position: absolute;
}

.project-art-overlay .project-label {
  color: #fff;
  font-family: Manrope, Inter, sans-serif;
  font-size: 22px;
  letter-spacing: -.08em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}

.project-art-overlay .project-chip {
  align-self: flex-start;
  border-color: rgba(255, 255, 255, .62);
  color: #fff;
  margin-left: auto;
  position: static;
  white-space: nowrap;
}

.project-info {
  flex: 1;
  min-height: 280px;
}

.project-info h3 {
  font-size: 21px;
  margin-bottom: 14px;
}

.project-info .project-category {
  margin-bottom: 18px;
}

.project-info .project-status {
  margin-bottom: 0;
}

.project-info .card-link {
  margin-top: auto;
}

.project-card:hover .project-image,
.project-card:focus-within .project-image {
  transform: scale(1.05);
}

.project-rafas .project-art-overlay .project-label,
.project-iglesia .project-art-overlay .project-label {
  letter-spacing: -.06em;
}

@media (max-width: 1020px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .projects-grid {
    gap: 18px;
    grid-template-columns: 1fr;
  }

  .project-card {
    min-height: 0;
  }

  .project-art.project-shot {
    aspect-ratio: 16 / 10;
  }

  .project-info {
    min-height: 265px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card:hover,
  .project-card:focus-within {
    transform: none;
  }

  .project-image {
    transform: none;
    transition: none;
  }

  .project-card:hover .project-image,
  .project-card:focus-within .project-image {
    transform: none;
  }
}

/* Case study actions remain separate from each external website link (ES + EN). */
.project-info .case-trigger {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
}
.project-info .card-link {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
}
.case-modal {
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.case-modal.is-open {
  visibility: visible;
  transition-delay: 0s;
}
.case-dialog {
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.case-dialog .case-close {
  position: sticky;
  float: right;
  top: 0;
  z-index: 2;
  margin: -10px -10px 0 0;
}
.case-dialog [data-case-category],
.case-dialog [data-case-description] {
  clear: both;
}
.case-dialog .case-website {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 20px 0 10px;
  min-height: 48px;
  width: 100%;
}
.case-dialog .button-primary {
  min-height: 48px;
}
@media (max-width: 760px) {
  .case-modal { padding: 18px; }
  .case-dialog { max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); }
}