/* A shared image-and-copy layout for every project in the gallery. */
.project-gallery-page {
  --project-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  --project-panel: #0c1a23;
  --project-border: #28424e;
}

.project-gallery-page .mcp-feature {
  grid-template-columns: var(--project-columns);
  align-items: stretch;
  background: var(--project-panel);
}

.project-gallery-page .all-projects {
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  padding-top: 0;
}

.project-gallery-page .all-projects .project-card {
  display: grid;
  grid-template-columns: var(--project-columns);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--project-border);
  border-radius: 12px;
  background: var(--project-panel);
}

.project-gallery-page .all-projects .project-card .project-visual {
  min-width: 0;
  height: 490px;
  padding: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto !important;
}

.project-gallery-page .mcp-feature-copy,
.project-gallery-page .all-projects .project-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 36px;
  background: var(--project-panel);
  border-left: 1px solid var(--project-border);
  text-align: center;
}

/* Every project uses the same centered title, description, and action. */
.project-gallery-page .mcp-feature-copy .mcp-unified-title,
.project-gallery-page .all-projects .project-card-copy h2 {
  max-width: 24ch;
  margin: 0 0 18px;
  font-size: clamp(1.6rem, 2.3vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.project-gallery-page .mcp-feature-copy > p:not(.eyebrow),
.project-gallery-page .all-projects .project-card-copy > p:not(.eyebrow) {
  max-width: 30ch;
  margin: 0 0 26px;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #aec3ce;
  text-wrap: balance;
}

.project-gallery-page .mcp-feature-copy > .text-link,
.project-gallery-page .all-projects .project-card-copy > .text-link {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .project-gallery-page {
    --project-columns: minmax(0, 1fr);
  }

  .project-gallery-page .all-projects .project-card .project-visual {
    height: 480px;
  }

  .project-gallery-page .mcp-feature-copy,
  .project-gallery-page .all-projects .project-card-copy {
    padding: 36px 28px 40px;
    border-left: 0;
    border-top: 1px solid var(--project-border);
  }
}

@media (max-width: 720px) {
  .project-gallery-page .mcp-feature {
    margin-bottom: 28px;
  }

  .project-gallery-page .all-projects {
    gap: 28px;
  }
}

@media (max-width: 420px) {
  .project-gallery-page .all-projects .project-card .project-visual {
    height: 330px;
  }

  .project-gallery-page .mcp-feature-copy,
  .project-gallery-page .all-projects .project-card-copy {
    padding: 32px 24px 36px;
  }
}