/* "What Muurel does": the plain-language answer directly under the hero.
   One sentence, four things it does, each linking to its detailed section. */

.overview {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--snow-space-xl) var(--snow-space-2xl);
  align-items: start;
  padding-top: var(--snow-space-2xl);
  padding-bottom: var(--snow-space-2xl);
  border-top: 1px solid var(--snow-color-border-default);
}

.overview h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  max-width: 24ch;
  text-wrap: balance;
}

.overview-intro p {
  text-wrap: pretty;
  margin-top: var(--snow-space-md);
  max-width: 52ch;
  color: var(--snow-color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* A plain two-by-two list, not cards: each row is a link into the detail. */
.overview-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--snow-space-xs) var(--snow-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.overview-list a {
  display: grid;
  gap: var(--snow-space-2xs);
  height: 100%;
  padding: var(--snow-space-md) 0;
  border-top: 2px solid var(--snow-color-assistant-primary);
  color: inherit;
  text-decoration: none;
}

.overview-list strong {
  display: flex;
  align-items: center;
  gap: var(--snow-space-xs);
  font-size: 1.0625rem;
  font-weight: var(--snow-type-weight-semibold);
}

.overview-list strong::after {
  content: "→";
  color: var(--snow-color-action-secondary-text);
  transition: transform 150ms ease-out;
}

.overview-list span {
  text-wrap: pretty;
  color: var(--snow-color-text-muted);
  font-size: var(--snow-type-size-label);
  line-height: 1.55;
}

.overview-list a:hover strong,
.overview-list a:focus-visible strong {
  color: var(--snow-color-action-secondary-text);
}

.overview-list a:hover strong::after,
.overview-list a:focus-visible strong::after {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .overview-list strong::after {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .overview {
    grid-template-columns: 1fr;
    gap: var(--snow-space-lg);
  }
}

@media (max-width: 600px) {
  .overview-list {
    grid-template-columns: 1fr;
  }
}