/* ============================================================
   .page-detail-header-next — proposed canonical detail-page header (loaded only on /docs/ui-kit)
   ============================================================
   Consolidates three near-identical header treatments scattered across
   page-specific stylesheets:

     .location-detail-header + h1 + .location-detail-subtitle + .location-detail-meta
                                          in `location-detail.css`
     .locations-hero + h1 + .locations-hero-subtitle
                                          in `locations.css`
     .privacy-header + .privacy-icon + .privacy-title + .privacy-subtitle
       + .privacy-last-updated            in `privacy.css`

   One canonical, three layout modifiers:

     – default (no modifier) : left-aligned, breadcrumb-led detail header
                               (replaces .location-detail-header). Title uses
                               the fluid `--font-section` clamp (32 → 48 px).
     – `--hero`              : centered, narrow content, top-padded with
                               --layout-hero-top (replaces .locations-hero).
     – `--marketing`         : centered, big optional icon above, larger
                               title with optional gradient text-fill, a
                               quiet mono "last updated" line below
                               (replaces .privacy-header).

   Composes with: `.breadcrumbs-next` (Breadcrumbs section) for the eyebrow
   slot when needed; `.icon-box-next` is *not* used for the marketing icon —
   that one carries a unique gradient + glow + float treatment, kept as the
   inline `.page-detail-header-next-icon` here so consumers don't have to
   layer extra classes.
   ============================================================ */

/* ============================================
   Root — default (left-aligned detail header)
   ============================================ */
.page-detail-header-next {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.page-detail-header-next-eyebrow {
    margin-bottom: var(--space-sm);
}

.page-detail-header-next-title {
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
    font-size: var(--font-section);
    font-weight: 800;
    line-height: var(--line-tight);
    letter-spacing: -0.02em;
}

.page-detail-header-next-subtitle {
    margin: 0 0 var(--space-md);
    color: var(--color-text-secondary);
    font-size: var(--font-lg);
    line-height: var(--line-relaxed);
}

.page-detail-header-next-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--font-sm);
}

.page-detail-header-next-updated {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
}

/* ============================================
   --hero — centered narrow header, deep top padding
   ============================================
   Replaces `.locations-hero`. Subtitle clamps to 720 px so the line-length
   stays readable on wide viewports. No icon, no breadcrumb (use the global
   site nav instead).
   ============================================ */
.page-detail-header-next--hero {
    padding: var(--layout-hero-top) 0 var(--section-padding-y-tight);
    text-align: center;
}

.page-detail-header-next--hero .page-detail-header-next-title {
    margin-bottom: var(--space-md);
}

.page-detail-header-next--hero .page-detail-header-next-subtitle {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--font-xl);
}

.page-detail-header-next--hero .page-detail-header-next-meta {
    justify-content: center;
}

@media (max-width: 768px) {
    .page-detail-header-next--hero {
        padding-top: var(--layout-hero-top-mobile);
    }
}

/* ============================================
   --marketing — centered, big icon + gradient title + last-updated line
   ============================================
   Replaces `.privacy-header`. Floats the icon above the title, fills the
   title with the brand `--gradient-text`, drops a quiet mono "last
   updated" line below the subtitle. The float animation respects
   prefers-reduced-motion.
   ============================================ */
.page-detail-header-next--marketing {
    padding: var(--space-3xl) 0;
    text-align: center;
}

.page-detail-header-next--marketing .page-detail-header-next-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-lg);
    background: var(--gradient-primary);
    border-radius: var(--radius-2xl);
    color: #fff;
    box-shadow: var(--shadow-glow);
    animation: page-detail-header-next-float 6s ease-in-out infinite;
}

.page-detail-header-next--marketing .page-detail-header-next-icon svg {
    width: 40px;
    height: 40px;
}

@keyframes page-detail-header-next-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .page-detail-header-next--marketing .page-detail-header-next-icon {
        animation: none;
    }
}

.page-detail-header-next--marketing .page-detail-header-next-title {
    margin: 0 0 var(--space-md);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
}

.page-detail-header-next--marketing.page-detail-header-next--gradient-title
.page-detail-header-next-title {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.page-detail-header-next--marketing .page-detail-header-next-subtitle {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-md);
    font-size: var(--font-xl);
}

.page-detail-header-next--marketing .page-detail-header-next-updated {
    display: block;
    margin-top: var(--space-md);
}

/* ============================================
   --centered — light variant: default sizing, centered alignment
   ============================================
   For middle-ground cases — when the detail page wants centered framing
   without the hero's deep top padding or the marketing variant's icon.
   ============================================ */
.page-detail-header-next--centered {
    text-align: center;
}

.page-detail-header-next--centered .page-detail-header-next-subtitle {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.page-detail-header-next--centered .page-detail-header-next-meta {
    justify-content: center;
}