/**
 * iNKPPL Design System — Listing Hero (unified)
 * Canonical cross-cutting hero block for listing pages.
 * Replaces 4+ subsystem hero classes (.masters-page-hero / .studios-page-hero /
 * .company-page-hero / .seo-hero) — see SPEC docs/specs/spec.md.
 * @version 1.0.0  @date 2026-05-14
 * Tokens: --font-display, --font-mono, --font-ui, --text-4xl, --text-base, --text-sm, --text-xs,
 *         --font-weight-normal, --font-weight-semibold, --font-weight-bold,
 *         --line-height-display, --line-height-body, --letter-spacing-tight, --letter-spacing-caps,
 *         --color-text-secondary, --color-brand-accent, --color-border, --color-bg, --color-focus-ring,
 *         --space-2, --space-3, --space-4, --space-6, --gutter, --container-max
 */

.listing-hero {
  padding: var(--space-12) var(--gutter) 0;
}

/* --container-max became `none` after global 1400px cap removal
   (epic mm97ai4g). The legacy max-width + margin-inline rules
   were no-ops; removed so hero stays flush with the page gutter,
   matching filter-bar/persona/grid on all listing pages.
   SPEC: INK-DEV-AFISHA-CARD-POLISH task-mpfb0ygd-cqq85 (2026-05-21). */
.listing-hero__inner {
  /* full-width within parent's gutter */
}

/* Afisha wraps its listing content in `.afisha-v2`, which already
   applies `padding: 0 var(--gutter)`. The hero would otherwise compound
   to 2× gutter and look offset vs. filter-bar/persona. Scoped reset
   keeps a single gutter source-of-truth. */
.afisha-v2 > .listing-hero {
  padding-inline: 0;
}

.listing-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-2);
}

/* — gold italic accent on hero noun (matches section-mast em). */
.listing-hero__title em {
  font-style: normal;
  font-weight: 700;
  color: var(--color-brand-accent);
  font-variation-settings: "opsz" 72;
}

.listing-hero__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  margin: 0;
}

.listing-hero__subtitle strong {
  color: var(--color-brand-accent);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-mono);
}

/* Intro paragraph (optional; tattoo-style read-more) */
/* E10: light theme — gold accent poor contrast on white; darken text, keep accent fragment */
:root:not(.dark-theme) .listing-hero__title em,
:root:not(.dark-theme) .listing-hero__subtitle strong,
:root:not(.dark-theme) .listing-hero__intro-toggle {
  color: var(--color-text);
}

.listing-hero__intro {
  margin-top: var(--space-3);
  max-width: 70ch;
}

.listing-hero__intro-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

.listing-hero__intro:not(.is-expanded) > .listing-hero__intro-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

.listing-hero__intro:not(.is-expanded) > .listing-hero__intro-text::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1.5em;
  background: linear-gradient(to bottom, transparent, var(--color-bg) 80%);
  pointer-events: none;
}

.listing-hero__intro-extra {
  display: none;
  margin-top: var(--space-2);
}

.listing-hero__intro.is-expanded .listing-hero__intro-extra {
  display: block;
}

.listing-hero__intro-toggle {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-brand-accent);
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--space-2);
  cursor: pointer;
}

.listing-hero__intro-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Variant: bottom rule (tattoo legacy parity) */
.listing-hero--with-rule {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-4);
}