/* Give the two working exhibits enough space without altering the other sections. */
#project .project-showcase > .project-card:is(.has-ordering-demo, .has-solar-demo) {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas:
    "header header"
    "type demo"
    "title demo"
    "summary demo"
    "flow demo"
    "details details"
    "tags tags";
  align-content: start;
  gap: 18px clamp(24px, 3.2vw, 48px);
  min-height: 0;
  margin-top: 20px;
  padding: clamp(22px, 3.2vw, 44px);
  background:
    radial-gradient(ellipse at 94% 10%, rgba(var(--rgb-signal-red), 0.045), transparent 54%),
    rgba(var(--rgb-paper), 0.96);
  /* Keep controls steady while the exhibits respond to interaction internally. */
  transform: none;
  transform-style: flat;
}

#project .project-showcase > .project-card:is(.has-ordering-demo, .has-solar-demo):hover {
  transform: none;
}

#project .project-showcase > .has-solar-demo {
  margin-top: 28px;
}

#project .has-ordering-demo > .project-card__header,
#project .has-solar-demo > .project-card__header {
  grid-area: header;
  margin-bottom: 6px;
}

#project .has-ordering-demo > .project-card__type,
#project .has-solar-demo > .project-card__type {
  grid-area: type;
  align-self: end;
  margin: 22px 0 0;
}

#project .has-ordering-demo > h3,
#project .has-solar-demo > h3 {
  grid-area: title;
  align-self: start;
  max-width: 16ch;
  font-size: clamp(30px, 3.4vw, 48px);
  text-wrap: balance;
}

#project .has-ordering-demo > .project-card__summary,
#project .has-solar-demo > .project-card__summary {
  grid-area: summary;
  align-self: start;
  max-width: 52ch;
  margin: 0;
}

#project .has-ordering-demo > .project-flow,
#project .has-solar-demo > .project-flow {
  grid-area: flow;
  align-self: end;
  margin: 8px 0 0;
}

#project .has-ordering-demo > .ordering-demo,
#project .has-solar-demo > .solar-demo {
  grid-area: demo;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#project .has-ordering-demo > ul,
#project .has-solar-demo > ul {
  grid-area: details;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 36px;
  margin: 14px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-on-paper);
}

#project .has-ordering-demo > .project-tags,
#project .has-solar-demo > .project-tags {
  grid-area: tags;
  margin: 6px 0 0;
  padding-top: 18px;
}

@media (max-width: 1040px) {
  #project .project-showcase > .project-card:is(.has-ordering-demo, .has-solar-demo) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "type"
      "title"
      "summary"
      "demo"
      "flow"
      "details"
      "tags";
    gap: 18px;
  }

  #project .has-ordering-demo > h3,
  #project .has-solar-demo > h3 {
    max-width: 24ch;
  }

  #project .has-ordering-demo > .ordering-demo,
  #project .has-solar-demo > .solar-demo {
    margin-top: 10px;
  }
}

@media (max-width: 640px) {
  #project .project-showcase > .project-card:is(.has-ordering-demo, .has-solar-demo) {
    gap: 16px;
    margin-top: 10px;
    padding: 20px 16px;
  }

  #project .has-ordering-demo > ul,
  #project .has-solar-demo > ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 18px;
  }

  #project .has-ordering-demo > .project-card__type,
  #project .has-solar-demo > .project-card__type {
    margin-top: 6px;
  }
}