/* AlsoDid canonical top-level destination hero contract.
 * Crew Lists is the visual source of truth: one symmetric outer gap, one
 * symmetric inner padding, one heading scale, and one 24px copy→stats/filter gap.
 * Loaded after page-specific styles so older page CSS cannot re-diverge it. */
:root{
    --alsodid-destination-hero-outer: var(--alsodid-spacing-lg);
    --alsodid-destination-hero-inner: var(--alsodid-spacing-lg);
    --alsodid-destination-hero-content-gap: 24px;
}

.destination-page-hero,
.destination-page-hero.glass-deep,
.movie-list-hero.destination-page-hero,
.following-page-hero.destination-page-hero,
.crew-lists-hero.destination-page-hero,
.activity-feed-unified-hero.destination-page-hero,
.calendar-page-hero.destination-page-hero,
.search-page-hero.destination-page-hero,
.role-index-hero.destination-page-hero{
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: var(--alsodid-destination-hero-outer) 0;
    padding: var(--alsodid-destination-hero-inner);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.destination-page-hero .destination-page-hero-copy,
.destination-page-hero .following-page-hero-copy,
.destination-page-hero .crew-lists-title-row,
.destination-page-hero .role-index-hero-copy,
.destination-page-hero .calendar-page-hero-inner{
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.destination-page-hero h1.alsodid-page-heading,
.destination-page-hero .calendar-page-title.alsodid-page-heading,
.destination-page-hero .role-archive-title.alsodid-page-heading{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    margin: 0;
    color: var(--alsodid-text-primary);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-align: center;
}

.destination-page-hero p,
.destination-page-hero .movie-list-sub,
.destination-page-hero .calendar-page-subtitle,
.destination-page-hero .role-archive-subtitle{
    max-width: 760px;
    margin: .45rem auto 0;
    color: var(--alsodid-text-tertiary);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

/* Crew Lists' copy→summary rhythm is canonical everywhere. */
.destination-page-hero .ad-summary-filter,
.destination-page-hero .following-page-hero-stats,
.destination-page-hero .activity-feed-quicknav--inline-stats,
.destination-page-hero .search-page-form{
    margin-top: var(--alsodid-destination-hero-content-gap);
    margin-bottom: 0;
}

.destination-page-hero .following-page-hero-stats,
.destination-page-hero .activity-feed-quicknav--inline-stats{
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

/* The role/company discovery templates historically had a left-aligned hero
 * wrapper and a larger H1. Once they opt into destination-page-hero they use
 * the same centered contract as Crew Lists. */
.role-index-page .role-index-hero-copy{
    align-items: initial;
    justify-content: initial;
    gap: 0;
}
.role-index-page .role-index-hero h1{
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.08;
}

/* Homepage has no card shell, but its opening copy uses the same vertical
 * breathing room instead of stacking a second page-specific top gap. */
.hf-shell > .hf-intro{
    margin: 0;
    padding: var(--alsodid-destination-hero-inner) 0;
}
.hf-shell > .hf-intro .hf-home-search-form{
    margin-top: var(--alsodid-destination-hero-content-gap);
}

@media (max-width: 768px){
    :root{
        --alsodid-destination-hero-outer: var(--alsodid-spacing-md);
        --alsodid-destination-hero-inner: var(--alsodid-spacing-md);
        --alsodid-destination-hero-content-gap: 18px;
    }



    /* Mobile destination pages prioritize title + controls; explanatory copy is
     * desktop-only to preserve vertical space. */
    .destination-page-hero p,
    .destination-page-hero .movie-list-sub,
    .destination-page-hero .calendar-page-subtitle,
    .destination-page-hero .role-archive-subtitle,
    .destination-page-hero .following-page-hero-subtitle,
    .destination-page-hero .crew-lists-subtitle,
    .destination-page-hero .search-page-subtitle{
        display:none !important;
    }
    .destination-page-hero h1.alsodid-page-heading,
    .destination-page-hero .calendar-page-title.alsodid-page-heading,
    .destination-page-hero .role-archive-title.alsodid-page-heading{
        font-size: clamp(1.65rem, 8vw, 2.05rem);
    }

    .destination-page-hero p,
    .destination-page-hero .movie-list-sub,
    .destination-page-hero .calendar-page-subtitle,
    .destination-page-hero .role-archive-subtitle{
        font-size: .9rem;
    }
}