.section--subtle {
  background: var(--color-background-subtle);
}

.desktop-nav .nav-disclosure > summary[aria-current="page"],
.mobile-nav__nested > summary[aria-current="page"] {
  color: var(--color-primary-dark);
}

.problem-grid {
  display: grid;
  gap: 0.0625rem;
  padding: 0.0625rem;
  background: var(--color-border);
}

.problem-link {
  display: flex;
  min-height: 9rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-background);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}

.problem-link__category {
  color: var(--color-primary-dark);
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.problem-link__arrow {
  color: var(--color-primary);
  font-size: 1.25rem;
  line-height: 1;
  text-align: right;
}

.category-section {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.category-intro {
  display: grid;
  grid-template-areas:
    "body"
    "media"
    "link";
  gap: 1.5rem;
  align-items: center;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.category-intro__body {
  grid-area: body;
}

.category-intro__label {
  margin-bottom: 0.75rem;
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.category-intro__body h2 {
  margin-bottom: 1rem;
}

.category-intro__body p:last-child {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

.category-intro__media {
  grid-area: media;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-background-subtle);
}

.category-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.category-intro__link {
  grid-area: link;
  justify-self: start;
}

.service-list-grid {
  display: grid;
  gap: 1.5rem;
}

.service-detail-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  border: 0.0625rem solid var(--color-border);
  background: var(--color-background);
}

.service-detail-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 0.0625rem solid var(--color-border);
  background: var(--color-background-subtle);
}

.service-detail-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.service-detail-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
}

.service-detail-card__target {
  margin-bottom: 0.625rem;
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 700;
}

.service-detail-card h3 {
  margin-bottom: 0.875rem;
}

.service-detail-card__description {
  margin-bottom: 1.5rem;
  color: var(--color-text-muted);
}

.service-detail-card .text-link {
  margin-top: auto;
}

.principle-grid {
  display: grid;
  gap: 0.0625rem;
  padding: 0.0625rem;
  background: var(--color-border);
}

.principle-card {
  padding: 1.75rem;
  background: var(--color-background);
}

.principle-card__mark {
  margin-bottom: 1rem;
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.principle-card h3 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.principle-card p:last-child {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

@media (min-width: 42rem) {
  .problem-grid,
  .principle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-detail-card--wide {
    display: grid;
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  }

  .service-detail-card--wide .service-detail-card__media {
    border-right: 0.0625rem solid var(--color-border);
    border-bottom: 0;
  }
}

@media (min-width: 48rem) {
  .category-intro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "media body"
      "media link";
    column-gap: clamp(2.5rem, 5vw, 4rem);
    row-gap: 0.5rem;
  }

  .category-intro--reverse {
    grid-template-areas:
      "body media"
      "link media";
  }

  .category-intro__media {
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 64rem) {
  .desktop-nav .nav-disclosure > summary[aria-current="page"] {
    background: var(--color-background-subtle);
  }

  .service-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 27rem) {
  .problem-link {
    min-height: 7.5rem;
    padding: 1.25rem;
  }

  .service-detail-card__body,
  .principle-card {
    padding: 1.25rem;
  }
}