/* Inner pages: layouts that only the service and project pages use. Shared parts live in base.css. */

/* Service head: centred text, the board render below it. */
.page-art {
  width: 100%;
  margin: clamp(1rem, 3vw, 2.5rem) 0 0;
}

.page-art img {
  width: min(560px, 100%);
  margin: 0 auto;
}

.scope {
  display: grid;
}

/* Full-bleed cover on the project page. */
.cover {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(3rem, 7vw, 5rem);
}

.cover .media-credit {
  margin-inline: auto;
  text-align: center;
}

.cover .media img {
  aspect-ratio: 16 / 8;
}

@media (max-width: 900px) {
  .cover .media img {
    aspect-ratio: 3 / 2;
  }
}

/* ---------- Projects ---------- */

/* Featured projects on /projects/: one centred column each, large cover, text on the axis. */
.project-features {
  display: grid;
  gap: clamp(4.5rem, 10vw, 8rem);
  padding: 0 var(--pad-x) clamp(4rem, 9vw, 7rem);
}

.project-feature {
  display: grid;
  justify-items: center;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.project-feature-cover {
  display: block;
  width: 100%;
}

.project-feature-cover img {
  aspect-ratio: 16 / 9;
  transition: opacity 300ms ease;
}

.project-feature-cover:hover img {
  opacity: 0.92;
}

.project-feature-text {
  display: grid;
  justify-items: center;
  max-width: 46rem;
}

.project-feature h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  text-wrap: balance;
}

.project-feature h2 a {
  text-decoration: none;
}

.project-feature h2 a:hover {
  color: var(--blue);
}

.project-feature-summary {
  max-width: 44ch;
  margin: 0 0 0.6rem;
  color: var(--ink-muted);
  font-size: 1.08rem;
}

.project-meta {
  margin: 0 0 1rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-wrap: balance;
}

.page-head .project-meta {
  margin-bottom: 1.4rem;
}

.project-tech {
  color: var(--ink-faint);
  font-size: 0.92rem;
}

/* Collapsed rows: the meta line sits where the service list keeps its summary. */
.project-list .disclosure-summary {
  margin: 0;
  font-size: 0.92rem;
}

.project-list .disclosure-body p:first-child {
  margin-bottom: 0.4rem;
}

/* Project page: markdown body, gallery in one column, file list. */
.prose {
  max-width: 64ch;
  margin-inline: auto;
}

.prose h3 {
  margin: 2rem 0 0.8rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--ink-muted);
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose img {
  border-radius: 14px;
}

.gallery {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.gallery figure {
  margin: 0;
}

.gallery .media-credit {
  text-align: center;
  margin-inline: auto;
}

.project-files {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-files span {
  color: var(--ink-faint);
  font-size: 0.88rem;
}

@media (max-width: 900px) {
  .project-feature-cover img {
    aspect-ratio: 3 / 2;
  }
}

/* Services index: direction names are links in the editorial rows. */
.service-list h2 {
  font-size: 1.2rem;
  line-height: 1.3;
}

.service-list a {
  text-decoration: underline;
  text-decoration-color: rgba(44, 90, 166, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.service-list a:hover {
  color: var(--blue);
  text-decoration-color: currentColor;
}