/* ═══════════════════════════════════════════
   SHARED PAGE STYLES
   Common styles for inner pages
   ═══════════════════════════════════════════ */

/* ─── Page Hero (inner pages) ─── */
.page-hero {
  background: var(--dark);
  padding: calc(var(--header-height-mobile) + var(--space-3xl)) 0 var(--space-3xl);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(196,26,26,0.1) 0%, transparent 60%);
}

.page-hero-short {
  padding-bottom: var(--space-2xl);
}

@media (min-width: 1024px) {
  .page-hero {
    padding-top: calc(var(--header-height-desktop) + var(--space-4xl));
    padding-bottom: var(--space-4xl);
  }
  .page-hero-short { padding-bottom: var(--space-3xl); }
}

.page-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: var(--space-sm);
}

.page-subtitle {
  color: rgba(255,255,255,0.5);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  margin: var(--space-sm) auto 0;
  max-width: 480px;
  line-height: 1.6;
}

/* ─── Page Transitions ─── */
.page-transition-out {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s ease;
}

.page-transition-in {
  animation: fadeUp 0.4s var(--ease-out) forwards;
}

/* ─── Breadcrumb ─── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-md);
}

.breadcrumb a {
  color: rgba(255,255,255,0.4);
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: var(--red-light);
}

.breadcrumb .separator {
  opacity: 0.3;
}

/* ═══ PAGE HERO MOBILE FIXES ═══ */
@media (max-width: 639px) {
  .page-hero { padding: calc(var(--header-height-mobile) + var(--space-xl)) var(--space-md) var(--space-2xl); }
  .page-hero-short { padding-bottom: var(--space-xl); }
  .page-title { font-size: 1.5rem; }
  .page-subtitle { font-size: 0.9rem; }
}

/* Touch-friendly minimum sizes */
button, a.btn-primary, a.btn-secondary, a.btn-outline,
.filter-pill, .filter-select {
  min-height: 44px;
}

/* ─── ULTRA SMALL MOBILE ─── */
@media (max-width: 319px) {
  .page-hero { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .page-title { font-size: 1.3rem; }
}