/* =============================================================================
 * HIPHEN — Single Use Case (single-use_case.php)
 * -----------------------------------------------------------------------------
 * Page-level layout only: the detail card itself reuses the .uc-grid__detail-*
 * styles from blocks/use-case-grid/style.css (enqueued alongside this file).
 * Token-based values only — see design-system-tokens.json.
 * ============================================================================= */

.use-case-single__content {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--space-12) var(--space-8) var(--space-24);
}

/* The wrapper was designed for the inline expand animation — neutralize the
   entrance animation in the static page context. */
.use-case-single .uc-grid__detail-wrapper {
  animation: none;
  padding-top: var(--space-12);
}

.use-case-single__back {
  margin: var(--space-12) 0 0;
}

.use-case-single__back a {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  color: var(--color-text-primary);
  text-decoration: none;
}

.use-case-single__back a:hover,
.use-case-single__back a:focus-visible {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .use-case-single__content {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }
}