/**
 * Page Hero Component
 *
 * Unified page header system with variant support.
 *
 * Variants:
 * - .page-hero--classic: Uses existing action-bar + page-header (no additional CSS needed)
 * - .page-hero--magazine: Editorial-style consolidated header
 */

/* Base page-hero container */
.page-hero {
  margin-bottom: var(--space-8);
}

/* ============================================================================
   MAGAZINE VARIANT
   Editorial-style consolidated header inspired by magazine layouts.
   Breadcrumbs as eyebrow, tight title, inline metadata.
   ============================================================================ */

.page-hero--magazine {
  position: relative;
  margin-bottom: var(--space-10);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: var(--prose-width);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  isolation: isolate;
}

/* Blob background animation - reusing action-bar pattern */
.page-hero--magazine::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 5%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle,
      color-mix(in srgb, var(--blob-color-1) 12%, transparent) 0%,
      color-mix(in srgb, var(--blob-color-2) 8%, transparent) 40%,
      transparent 70%);
  border-radius: 50%;
  filter: blur(25px);
  animation: pageHeroBlobLeft 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.page-hero--magazine::after {
  content: '';
  position: absolute;
  bottom: 15%;
  right: 10%;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle,
      color-mix(in srgb, var(--blob-color-2) 10%, transparent) 0%,
      color-mix(in srgb, var(--blob-color-3) 6%, transparent) 35%,
      transparent 65%);
  border-radius: 50%;
  filter: blur(22px);
  animation: pageHeroBlobRight 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.page-hero--magazine:hover::before,
.page-hero--magazine:hover::after {
  opacity: 0.85;
}

.page-hero--magazine > * {
  position: relative;
  z-index: 1;
}

/* Blob animations */
@keyframes pageHeroBlobLeft {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -15px) scale(1.1); }
  66% { transform: translate(-15px, 20px) scale(0.9); }
}

@keyframes pageHeroBlobRight {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-18px, -12px) scale(1.08); }
  66% { transform: translate(12px, 15px) scale(0.92); }
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, black, white)) {
  .page-hero--magazine::before {
    background: radial-gradient(circle,
        rgba(59, 130, 246, 0.12) 0%,
        rgba(76, 175, 80, 0.08) 40%,
        transparent 70%);
  }
  .page-hero--magazine::after {
    background: radial-gradient(circle,
        rgba(76, 175, 80, 0.1) 0%,
        rgba(255, 152, 0, 0.06) 35%,
        transparent 65%);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-hero--magazine::before,
  .page-hero--magazine::after {
    animation: none !important;
  }
}

/* ----------------------------------------------------------------------------
   Top Row: Breadcrumbs (left) + Actions (right)
   ---------------------------------------------------------------------------- */

.page-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0; /* Tight to title - breadcrumbs act as eyebrow */
}

/* Eyebrow / Breadcrumbs */
.page-hero__eyebrow {
  flex: 1;
  min-width: 0;
}

.page-hero__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.page-hero__breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: var(--weight-normal);
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

/* Separator (›) */
.page-hero__breadcrumbs li:not(:last-child)::after {
  content: '›';
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  opacity: 0.5;
}

.page-hero__breadcrumb-link {
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.page-hero__breadcrumb-link:hover {
  color: var(--color-primary);
}

/* ----------------------------------------------------------------------------
   Title - Magazine Style (tight to breadcrumbs)
   ---------------------------------------------------------------------------- */

.page-hero__title {
  font-size: var(--type-h1);
  font-weight: var(--weight-extrabold);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

/* ----------------------------------------------------------------------------
   Description
   ---------------------------------------------------------------------------- */

.page-hero__description {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  font-weight: var(--weight-light);
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-3) 0;
}

/* ----------------------------------------------------------------------------
   Inline Metadata
   No divider line - spacing and smaller text creates natural separation.
   ---------------------------------------------------------------------------- */

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.page-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.page-hero__meta-item svg {
  flex-shrink: 0;
  opacity: 0.5;
  width: 14px;
  height: 14px;
}

/* ----------------------------------------------------------------------------
   Share Button & Dropdown (reuses action-bar patterns)
   ---------------------------------------------------------------------------- */

.page-hero__actions {
  flex-shrink: 0;
  margin-left: auto; /* Always push to right, even when breadcrumbs are absent */
}

.page-hero__share {
  position: relative;
}

.page-hero__share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem 0.25rem 0.375rem;
  background: linear-gradient(180deg,
      var(--color-surface, var(--color-bg-elevated)),
      var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-medium, 6px);
  color: var(--color-text-secondary);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-medium, 500);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s);
  white-space: nowrap;
  box-shadow: var(--neumorphic-subtle);
}

.page-hero__share-trigger:hover {
  color: var(--color-text-primary);
  box-shadow: var(--neumorphic-hover);
  transform: translateY(-1px);
}

.page-hero__share-trigger:active {
  box-shadow: var(--neumorphic-subtle-pressed);
  transform: translateY(0) scale(0.98);
}

.page-hero__share-trigger > span:first-child {
  font-size: var(--icon-size-sm, 14px);
  line-height: 1;
}

.page-hero__share-chevron {
  width: var(--icon-size-xs, 12px);
  height: var(--icon-size-xs, 12px);
  flex-shrink: 0;
  transition: transform 0.15s ease;
  opacity: 0.7;
}

.page-hero__share-trigger[aria-expanded="true"] {
  color: var(--color-primary);
}

.page-hero__share-trigger[aria-expanded="true"] .page-hero__share-chevron {
  transform: rotate(180deg);
}

/* ============================================================================
   Share Dropdown - LEGACY (aria-hidden pattern)
   Used by page-hero-magazine, page-hero-overview, page-hero-editorial
   ============================================================================ */

.page-hero__share-dropdown {
  /* Positioning */
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  z-index: var(--z-dropdown, 1000);

  /* Appearance */
  min-width: 240px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.08);

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}

/* Open state - controlled by aria-hidden or JS toggle */
.page-hero__share-dropdown[aria-hidden="false"],
.page-hero__share-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ============================================================================
   Share Dropdown - POPOVER PATTERN
   See: assets/COMPONENT-PATTERNS.md
   ============================================================================ */

.page-hero__share-dropdown--popover {
  /* Reset popover defaults */
  margin: 0;
  padding: 0;
  border: none;

  /* Fixed positioning - top layer handles stacking */
  position: fixed;
  inset: unset;

  /* Appearance */
  min-width: 240px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.08);

  /* Hidden by default */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease,
              display 0.15s allow-discrete, overlay 0.15s allow-discrete;
}

/* Open state - visible */
.page-hero__share-dropdown--popover:popover-open {
  opacity: 1;
  transform: translateY(0);
}

/* Entry animation starting point */
@starting-style {
  .page-hero__share-dropdown--popover:popover-open {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Dark mode popover */
[data-theme="dark"] .page-hero__share-dropdown--popover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Reduced motion - no animations */
@media (prefers-reduced-motion: reduce) {
  .page-hero__share-dropdown--popover {
    transition: none;
  }

  @starting-style {
    .page-hero__share-dropdown--popover:popover-open {
      opacity: 1;
      transform: none;
    }
  }
}

.page-hero__share-content {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.page-hero__share-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
  width: 100%;
  text-align: left;
}

.page-hero__share-item:hover {
  background: var(--color-bg-secondary);
}

.page-hero__share-item:active {
  background: var(--color-bg-tertiary);
}

.page-hero__share-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.page-hero__share-separator {
  margin: 0.5rem 0;
  border: none;
  border-top: 1px solid var(--color-border);
}

.page-hero__share-section-header {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

/* AI Link hover colors */
.page-hero__share-ai svg {
  opacity: 1;
}

.page-hero__share-ai[data-ai="claude"]:hover {
  background: rgba(168, 122, 80, 0.1);
  color: var(--color-primary);
}

.page-hero__share-ai[data-ai="chatgpt"]:hover {
  background: rgba(116, 195, 194, 0.1);
  color: #74c3c2;
}

.page-hero__share-ai[data-ai="gemini"]:hover {
  background: rgba(138, 180, 248, 0.1);
  color: #8ab4f8;
}

.page-hero__share-ai[data-ai="copilot"]:hover {
  background: rgba(66, 153, 225, 0.1);
  color: #4299e1;
}

/* Success feedback */
.page-hero__share-item.success {
  background: var(--color-success-bg, rgba(34, 197, 94, 0.1));
  color: var(--color-success, #22c55e);
}

/* Dark mode dropdown */
[data-theme="dark"] .page-hero__share-dropdown {
  box-shadow:
    inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.08),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.4),
    4px 4px 12px rgba(0, 0, 0, 0.3),
    -2px -2px 6px rgba(255, 255, 255, 0.05);
}

/* ----------------------------------------------------------------------------
   Responsive Design
   ---------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 768px) {
  .page-hero--magazine {
    padding: var(--space-3) var(--space-4);
  }

  .page-hero__title {
    font-size: var(--text-5xl);
  }

  .page-hero__description {
    font-size: var(--text-base);
  }

  .page-hero__breadcrumbs {
    font-size: 0.6875rem;
  }

  .page-hero__breadcrumb-link {
    max-width: 120px;
  }

  .page-hero__meta {
    gap: var(--space-3);
  }
}

/* Mobile */
@media (max-width: 639px) {
  .page-hero--magazine {
    padding: var(--space-3);
  }

  .page-hero__top {
    gap: var(--space-2);
  }

  .page-hero__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-1);
  }

  .page-hero__description {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
  }

  .page-hero__breadcrumb-link {
    max-width: 80px;
  }

  /* Hide middle breadcrumb items on small screens */
  .page-hero__breadcrumbs li:not(:first-child):not(:last-child) {
    display: none;
  }

  .page-hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .page-hero__share-trigger {
    padding: 0.1875rem 0.375rem;
    font-size: 0.625rem;
  }

  .page-hero__share-dropdown {
    min-width: max(200px, 75vw);
    max-width: 90vw;
  }
}

/* Very Small Mobile */
@media (max-width: 399px) {
  .page-hero__title {
    font-size: var(--text-3xl);
  }

  .page-hero__share-dropdown {
    right: auto;
    left: 50%;
    transform: translate3d(-50%, -10px, 0);
    min-width: 280px;
  }

  .page-hero__share-dropdown[aria-hidden="false"] {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ----------------------------------------------------------------------------
   Focus & Accessibility
   ---------------------------------------------------------------------------- */

.page-hero__share-trigger:focus-visible,
.page-hero__share-item:focus-visible,
.page-hero__breadcrumb-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================================================
   EDITORIAL VARIANT
   Clean magazine layout without container styling.
   Same tight typography as magazine, no border/background/blobs.
   ============================================================================ */

.page-hero--editorial {
  margin-bottom: var(--space-10);
  max-width: var(--prose-width);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

/* No pseudo-elements (no blobs) */
.page-hero--editorial::before,
.page-hero--editorial::after {
  display: none;
}

/* Top row inherits from magazine - no changes needed */

/* Title - same tight spacing */
.page-hero--editorial .page-hero__title {
  font-size: var(--type-h1);
  font-weight: var(--weight-extrabold);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

/* Description */
.page-hero--editorial .page-hero__description {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  font-weight: var(--weight-light);
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-3) 0;
}

/* Metadata - inherits magazine styling (no border, typographic hierarchy) */
.page-hero--editorial .page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* Share button - slightly different style for clean look */
.page-hero--editorial .page-hero__share-trigger {
  background: transparent;
  border: 1px solid var(--color-border);
}

.page-hero--editorial .page-hero__share-trigger:hover {
  background: var(--color-bg-secondary);
}

/* ----------------------------------------------------------------------------
   Editorial Responsive
   ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .page-hero--editorial .page-hero__title {
    font-size: var(--text-5xl);
  }

  .page-hero--editorial .page-hero__description {
    font-size: var(--text-base);
  }
}

@media (max-width: 639px) {
  .page-hero--editorial .page-hero__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-1);
  }

  .page-hero--editorial .page-hero__description {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
  }

  .page-hero--editorial .page-hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

@media (max-width: 399px) {
  .page-hero--editorial .page-hero__title {
    font-size: var(--text-3xl);
  }
}

/* ============================================================================
   OVERVIEW VARIANT
   For section index pages - shows page count instead of read time.
   Inherits editorial styling, just different metadata.
   ============================================================================ */

.page-hero--overview {
  margin-bottom: var(--space-10);
  max-width: var(--prose-width);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

/* No pseudo-elements (no blobs) */
.page-hero--overview::before,
.page-hero--overview::after {
  display: none;
}

/* Title */
.page-hero--overview .page-hero__title {
  font-size: var(--type-h1);
  font-weight: var(--weight-extrabold);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

/* Description */
.page-hero--overview .page-hero__description {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  font-weight: var(--weight-light);
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-3) 0;
}

/* Section stats metadata - slightly different styling */
.page-hero--overview .page-hero__meta--section {
  margin-top: var(--space-4);
}

.page-hero--overview .page-hero__meta-item--section {
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}

.page-hero--overview .page-hero__meta-item--section svg {
  opacity: 0.6;
}

/* Share button - transparent style */
.page-hero--overview .page-hero__share-trigger {
  background: transparent;
  border: 1px solid var(--color-border);
}

.page-hero--overview .page-hero__share-trigger:hover {
  background: var(--color-bg-secondary);
}

/* ----------------------------------------------------------------------------
   Overview Responsive
   ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .page-hero--overview .page-hero__title {
    font-size: var(--text-5xl);
  }

  .page-hero--overview .page-hero__description {
    font-size: var(--text-base);
  }
}

@media (max-width: 639px) {
  .page-hero--overview .page-hero__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-1);
  }

  .page-hero--overview .page-hero__description {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
  }
}

@media (max-width: 399px) {
  .page-hero--overview .page-hero__title {
    font-size: var(--text-3xl);
  }
}

/* ============================================================================
   API VARIANT
   Unified hero for API reference pages.
   Combines breadcrumbs/share from editorial with badges/stats from module header.
   Vertical stacking for qualified name + markdown description.
   ============================================================================ */

.page-hero--api {
  margin-bottom: var(--space-8);
  max-width: var(--prose-width);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

/* No pseudo-elements (no blobs) */
.page-hero--api::before,
.page-hero--api::after {
  display: none;
}

/* Badges row - compact inline badges */
.page-hero--api .page-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3) 0;
}

/* Title - code-styled for qualified names */
.page-hero--api .page-hero__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
  word-break: break-word;
}

.page-hero--api .page-hero__title--code {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.page-hero--api .page-hero__title--code code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Description - handles markdown content with prose styling */
.page-hero--api .page-hero__description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0 0 var(--space-4) 0;
}

.page-hero--api .page-hero__description--prose {
  /* Ensure markdown content renders nicely */
}

.page-hero--api .page-hero__description--prose > p:first-child {
  margin-top: 0;
}

.page-hero--api .page-hero__description--prose > p:last-child {
  margin-bottom: 0;
}

.page-hero--api .page-hero__description--prose p {
  margin: var(--space-2) 0;
}

.page-hero--api .page-hero__description--prose code {
  background: var(--color-bg-code);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

.page-hero--api .page-hero__description--prose ul,
.page-hero--api .page-hero__description--prose ol {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.page-hero--api .page-hero__description--prose li {
  margin: var(--space-1) 0;
}

/* Footer - source link and stats */
.page-hero--api .page-hero__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* Source link - subtle button style */
.page-hero--api .page-hero__source-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.15s ease;
}

.page-hero--api .page-hero__source-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-bg-hover);
}

.page-hero--api .page-hero__source-link svg {
  opacity: 0.7;
}

/* Stats - class/function counts */
.page-hero--api .page-hero__stats {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.page-hero--api .page-hero__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.page-hero--api .page-hero__stat-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.page-hero--api .page-hero__stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-transform: lowercase;
}

/* Share button - transparent style like editorial */
.page-hero--api .page-hero__share-trigger {
  background: transparent;
  border: 1px solid var(--color-border);
}

.page-hero--api .page-hero__share-trigger:hover {
  background: var(--color-bg-secondary);
}

/* ----------------------------------------------------------------------------
   API Responsive
   ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .page-hero--api .page-hero__title {
    font-size: var(--text-2xl);
  }

  .page-hero--api .page-hero__title--code {
    font-size: var(--text-xl);
  }

  .page-hero--api .page-hero__description {
    font-size: var(--text-sm);
  }

  .page-hero--api .page-hero__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

@media (max-width: 639px) {
  .page-hero--api .page-hero__title {
    font-size: var(--text-xl);
  }

  .page-hero--api .page-hero__title--code {
    font-size: var(--text-lg);
  }

  .page-hero--api .page-hero__badges {
    margin: var(--space-1) 0 var(--space-2) 0;
  }

  .page-hero--api .page-hero__stats {
    gap: var(--space-3);
  }

  .page-hero--api .page-hero__stat-value {
    font-size: var(--text-base);
  }

  .page-hero--api .page-hero__stat-label {
    font-size: var(--text-xs);
  }
}

@media (max-width: 399px) {
  .page-hero--api .page-hero__title {
    font-size: var(--text-lg);
  }

  .page-hero--api .page-hero__title--code {
    font-size: var(--text-base);
  }
}
