/*
 * Page-specific styles
 * Centered hero, larger contrast, soft animations
 */

/* ═══════════════════════════════════════════════════════════
   HERO SECTION — Centered
═══════════════════════════════════════════════════════════ */

.hero {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-3xl) var(--container-padding);
}

.hero__content {
    max-width: 800px;
    margin: 0 auto;
}

.hero__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--weight-normal);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-lg);
}

.hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero__actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   ABOUT / BIO SECTION
═══════════════════════════════════════════════════════════ */

.about-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--card-gap);
}

.about-block {
    padding: var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    transition: all var(--duration-normal) var(--ease-out);
}

.about-block:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.about-block__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.about-block__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-md);
}

.about-block__text {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
    .about-section {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   SERVICES / PRODUCTS SECTION
═══════════════════════════════════════════════════════════ */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--card-gap);
}

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   VIDEO SECTION
═══════════════════════════════════════════════════════════ */

.video-section {
    max-width: 900px;
    margin: 0 auto;
}

.video-section__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-lg);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   INTERVIEWS LIST — Vertical stack
═══════════════════════════════════════════════════════════ */

.interviews-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    max-width: 900px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   EVENTS LIST
═══════════════════════════════════════════════════════════ */

.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

/* ═══════════════════════════════════════════════════════════
   CTA / CONTACT SECTION
═══════════════════════════════════════════════════════════ */

.cta-section {
    text-align: center;
    padding: var(--space-4xl) var(--container-padding);
    background-color: var(--color-surface-dark);
    color: var(--color-surface);
}

.cta-section__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
}

.cta-section__text {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-ink-faint);
    margin-bottom: var(--space-xl);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--leading-relaxed);
}

.cta-section__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.cta-section__contact {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.cta-section__contact a {
    color: var(--color-surface);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cta-section__contact a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — For inner pages, centered
═══════════════════════════════════════════════════════════ */

.page-hero {
    padding: var(--space-3xl) 0 var(--space-2xl);
    text-align: center;
}

.page-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--weight-normal);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

.page-hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-ink-soft);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   PROGRAM PAGE
═══════════════════════════════════════════════════════════ */

.program-intro {
    max-width: var(--container-text);
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-3xl);
    text-align: center;
}

.program-intro p {
    margin-bottom: var(--space-md);
}

.program-intro p:last-child {
    margin-bottom: 0;
}

.program-modules {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.module-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    transition: all var(--duration-normal) var(--ease-out);
}

.module-item:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.module-item__number {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-accent-soft);
    min-width: 3rem;
}

.module-item__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
}

.module-item__description {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* Pricing block */
.pricing-block {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
}

.pricing-block__label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: var(--space-sm);
}

.pricing-block__price {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    margin-bottom: var(--space-sm);
}

.pricing-block__note {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
}

/* Format block */
.format-block {
    padding: var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

.format-block__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-md);
}

.format-block__text {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   COACHING PAGE
═══════════════════════════════════════════════════════════ */

.coaching-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--card-gap);
}

.coaching-type {
    padding: var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    transition: all var(--transition-normal);
}

.coaching-type:hover {
    background: var(--glass-bg-hover);
}

.coaching-type__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: var(--space-sm);
}

.coaching-type__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
}

.coaching-type__description {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
    .coaching-types {
        grid-template-columns: 1fr;
    }
}

/* Coaching program full (same structure as main program) */
.coaching-program {
    padding: var(--space-3xl) 0;
}

.coaching-program__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.coaching-program__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
}

.coaching-program__intro {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-ink-soft);
    max-width: 700px;
    margin: 0 auto;
    line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGES
═══════════════════════════════════════════════════════════ */

.legal-content {
    max-width: var(--container-text);
    margin: 0 auto;
    padding-bottom: var(--space-3xl);
}

.legal-content h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-normal);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-md);
}

.legal-content ul {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-lg);
}

.legal-content li {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-sm);
}

.legal-content a {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-date {
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

/* Terms page - loaded from Firestore */
.terms-updated {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-top: var(--space-md);
}

.terms-content {
    max-width: var(--container-text);
    margin: 0 auto;
    padding-bottom: var(--space-3xl);
}

.terms-section {
    margin-bottom: var(--space-2xl);
}

.terms-section h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-normal);
    margin-bottom: var(--space-md);
}

.terms-section p {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   COMMUNITY PAGE — Leaders Grid
═══════════════════════════════════════════════════════════ */

.leaders-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--card-gap);
}

@media (max-width: 1200px) {
    .leaders-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .leaders-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .leaders-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
}

.leader-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out);
}

.leader-card:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.leader-card__photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface-warm);
}

.leader-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter var(--duration-normal) var(--ease-out);
}

.leader-card:hover .leader-card__photo img {
    filter: grayscale(0%);
}

.leader-card__content {
    padding: var(--space-lg);
}

.leader-card__name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-normal);
    margin-bottom: var(--space-xs);
    line-height: var(--leading-snug);
}

.leader-card__location {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.leader-card__role {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-md);
}

.leader-card__links {
    display: flex;
    gap: var(--space-sm);
}

.leader-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-ink-soft);
    transition: all var(--duration-fast) var(--ease-out);
}

.leader-card__link:hover {
    background: var(--color-ink);
    color: var(--color-surface);
}

.leader-card__link svg {
    width: 16px;
    height: 16px;
}

/* Mobile: 2 columns, vertical cards */
@media (max-width: 540px) {
    .leader-card__content {
        padding: var(--space-sm);
    }

    .leader-card__name {
        font-size: var(--text-lg);
        margin-bottom: 2px;
    }

    .leader-card__location {
        font-size: 9px;
        margin-bottom: 4px;
    }

    .leader-card__role {
        font-size: 11px;
        margin-bottom: var(--space-xs);
        line-height: 1.3;
    }

    .leader-card__links {
        gap: var(--space-xs);
    }

    .leader-card__link {
        width: 26px;
        height: 26px;
    }

    .leader-card__link svg {
        width: 12px;
        height: 12px;
    }

    /* Disable card hover transform on mobile */
    .leader-card:hover {
        transform: none;
    }
}

/* Extended stagger for larger grids - pairs animation */
.stagger.is-visible > *:nth-child(9),
.stagger.is-visible > *:nth-child(10) { animation-delay: 480ms; }
.stagger.is-visible > *:nth-child(11),
.stagger.is-visible > *:nth-child(12) { animation-delay: 600ms; }
.stagger.is-visible > *:nth-child(13),
.stagger.is-visible > *:nth-child(14) { animation-delay: 720ms; }
.stagger.is-visible > *:nth-child(15),
.stagger.is-visible > *:nth-child(16) { animation-delay: 840ms; }
.stagger.is-visible > *:nth-child(17),
.stagger.is-visible > *:nth-child(18) { animation-delay: 960ms; }

/* First row visible immediately (no animation) */
.leaders-grid.stagger > *:nth-child(1),
.leaders-grid.stagger > *:nth-child(2) {
    opacity: 1;
    transform: none;
    animation: none;
}

/* Override default stagger to animate in pairs (starting from row 2) */
.leaders-grid.stagger.is-visible > *:nth-child(3),
.leaders-grid.stagger.is-visible > *:nth-child(4) { animation-delay: 0ms; }
.leaders-grid.stagger.is-visible > *:nth-child(5),
.leaders-grid.stagger.is-visible > *:nth-child(6) { animation-delay: 120ms; }
.leaders-grid.stagger.is-visible > *:nth-child(7),
.leaders-grid.stagger.is-visible > *:nth-child(8) { animation-delay: 240ms; }
.leaders-grid.stagger.is-visible > *:nth-child(9),
.leaders-grid.stagger.is-visible > *:nth-child(10) { animation-delay: 360ms; }
.leaders-grid.stagger.is-visible > *:nth-child(11),
.leaders-grid.stagger.is-visible > *:nth-child(12) { animation-delay: 480ms; }
.leaders-grid.stagger.is-visible > *:nth-child(13),
.leaders-grid.stagger.is-visible > *:nth-child(14) { animation-delay: 600ms; }
.leaders-grid.stagger.is-visible > *:nth-child(15),
.leaders-grid.stagger.is-visible > *:nth-child(16) { animation-delay: 720ms; }
.leaders-grid.stagger.is-visible > *:nth-child(17),
.leaders-grid.stagger.is-visible > *:nth-child(18) { animation-delay: 840ms; }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS — Softer, slower, scroll-triggered
   Very gentle "floating up" effect
═══════════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Initial state: hidden, ready to animate */
.fade-in {
    opacity: 0;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
}

/* Triggered state (by JS IntersectionObserver) */
.fade-in.is-visible {
    animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-in-up.is-visible {
    animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger children — hidden until triggered */
.stagger > * {
    opacity: 0;
    transform: translateY(24px);
}

/* Stagger - animate when parent becomes visible */
.stagger.is-visible > * {
    animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stagger.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.stagger.is-visible > *:nth-child(2) { animation-delay: 120ms; }
.stagger.is-visible > *:nth-child(3) { animation-delay: 240ms; }
.stagger.is-visible > *:nth-child(4) { animation-delay: 360ms; }
.stagger.is-visible > *:nth-child(5) { animation-delay: 480ms; }
.stagger.is-visible > *:nth-child(6) { animation-delay: 600ms; }
.stagger.is-visible > *:nth-child(7) { animation-delay: 720ms; }
.stagger.is-visible > *:nth-child(8) { animation-delay: 840ms; }

/* Section fade-in for smooth section boundaries */
.section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero is always visible immediately */
.hero {
    opacity: 1;
    transform: none;
}

/* Parallax sections */
.parallax-section {
    position: relative;
    will-change: transform;
}

[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Reduced motion: disable animations */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-in-up,
    .stagger > *,
    .section {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
}