/* Cases overview — featured case. Filter/pagination live in overview.css. Grid reuses .case-tile. */

.case-featured {
  display: flex;
  align-items: flex-start;
  max-inline-size: 77.125rem; /* Figma 1234 */
  margin-inline: auto;
  color: var(--color-primary);
  text-decoration: none;
}

.case-featured:hover,
.case-featured:focus,
.case-featured:focus-visible {
  color: var(--color-primary);
}

.case-featured-body {
  display: flex;
  flex: 478 1 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: 1.5rem; /* Figma 24px title → copy */
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 29.875rem; /* Figma 478 */
  padding-block: 3.125rem; /* Figma 50 */
  padding-inline: 3.3125rem 4.625rem; /* Figma 53 / ~74 */
  background: #fff;
  border-start-start-radius: var(--radius-lg);
}

.case-featured-title {
  margin-block: 0;
  color: inherit;
}

.case-featured-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem; /* Figma 32px excerpt → link */
}

.case-featured-excerpt {
  display: block;
}

.case-featured-link {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.case-featured:hover .case-featured-link,
.case-featured:focus-visible .case-featured-link {
  text-decoration-thickness: 2px;
}

.case-featured-media {
  display: block;
  flex: 756 1 0;
  overflow: hidden;
  min-inline-size: 0;
  aspect-ratio: 756 / 507;
  border-end-end-radius: var(--radius-lg);
}

.case-featured-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  width: 100%;
  height: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: center;
  margin-block-end: 0 !important;
}

.case-featured-image-placeholder {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}

@media (max-width: 999px) {
  .case-featured {
    flex-direction: column;
    max-inline-size: none;
  }

  .case-featured-body {
    flex: none;
    order: 1;
    max-inline-size: none;
    padding-inline: 2rem;
  }

  .case-featured-media {
    flex: none;
    order: 0;
    inline-size: 100%;
  }
}