/* ===== SUBPAGE UNIFIED OVERRIDES ===== */
/* Enforce landing page font hierarchy and full-width layout on all subpages */
/* This file MUST be included after design-system.css on all subpages */

/* ===== FONT FIXES ===== */
/* Headlines: ALWAYS Outfit (not Cinzel) — matches landing page */
.page-header h1,
.page-header-content h1,
.content-section h2,
.content-section h3,
h1, h2, h3 {
    font-family: 'Outfit', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

h1 { font-weight: 700; }

h2 {
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

h3 {
    font-weight: 600;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    letter-spacing: 0.1em;
}

h4 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600;
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Body text: Cormorant Garamond — sized up ~20% for readability */
.content-section p,
.content-section li,
p, li {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.32rem;
    line-height: 1.75;
}

/* Labels/accents: Cinzel — small, uppercase, gold */
.section-label,
.page-header .section-label,
.timeline-phase {
    font-family: 'Cinzel', serif !important;
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold, #C5A55A);
}

/* ===== FULL-WIDTH LAYOUT ===== */
/* Remove boxed containers — section goes full-width for background,     */
/* dynamic padding centers content within ~1200px on wide screens.        */
/* Uses max() so side padding is at least 48px, growing on wider screens. */
.content-section {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    padding-left: max(48px, calc(50% - 600px)) !important;
    padding-right: max(48px, calc(50% - 600px)) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* ===== FULL-BLEED ELEMENTS ===== */
/* Visual breaks & team quotes extend edge-to-edge within padded sections.  */
/* Uses 100vw + calc(-50vw + 50%) to cancel out parent dynamic padding.     */
/* Safe because body has overflow-x: hidden via design-system.css.          */
.content-section .visual-break {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    margin-bottom: 4rem !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.content-section .team-quote {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 60px max(48px, calc(50vw - 600px)) !important;
    background: var(--marble, #F5F0E8) !important;
    border-left: none !important;
    border-radius: 0 !important;
}

/* ===== CONTENT CARDS ===== */
/* Cards: white with subtle borders, gold accent on hover */
.diff-card, .stack-item, .spec-item, .stat-item,
.senate-card, .participate-card, .highlight-box,
.arch-layer, .lifecycle-step,
.card, .benefit-card, .stat-card, .voting-card,
.feature-card, .grant-card, .event-card {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative !important;
}

/* Card hover: lift with gold accent */
.diff-card:hover, .stack-item:hover, .spec-item:hover,
.stat-item:hover, .senate-card:hover, .participate-card:hover,
.card:hover, .benefit-card:hover, .stat-card:hover,
.voting-card:hover, .feature-card:hover, .grant-card:hover,
.event-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(197, 165, 90, 0.3) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.08), 0 0 20px rgba(197,165,90,0.06) !important;
}

/* Card top gold accent line on hover */
.diff-card::before, .stack-item::before, .spec-item::before,
.senate-card::before, .participate-card::before,
.card::before, .benefit-card::before, .stat-card::before,
.voting-card::before, .feature-card::before, .grant-card::before,
.event-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold, #C5A55A), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.diff-card:hover::before, .stack-item:hover::before, .spec-item:hover::before,
.senate-card:hover::before, .participate-card:hover::before,
.card:hover::before, .benefit-card:hover::before, .stat-card:hover::before,
.voting-card:hover::before, .feature-card:hover::before, .grant-card:hover::before,
.event-card:hover::before {
    opacity: 1;
}

/* Card headings */
.diff-card h4, .stack-item h4, .spec-item h4,
.senate-card h3, .participate-card h3,
.diff-card h3, .highlight-box h3,
.card h3, .card h4, .benefit-card h3, .benefit-card h4,
.voting-card h3, .voting-card h4,
.feature-card h3, .grant-card h3, .event-card h3 {
    color: var(--gold, #C5A55A) !important;
}

/* Card paragraph text */
.diff-card p, .stack-item p, .spec-item p,
.senate-card p, .participate-card p,
.highlight-box p,
.card p, .benefit-card p, .stat-card p,
.voting-card p, .feature-card p, .grant-card p,
.event-card p {
    color: #4A4A4A !important;
}

/* ===== SECTION DIVIDERS ===== */
.content-section + .content-section::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold, #C5A55A), transparent);
    margin: 0 auto 60px;
}

/* ===== SCROLL ANIMATIONS ===== */
.sc-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc-fade.sc-visible {
    opacity: 1;
    transform: translateY(0);
}
.sc-stagger > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc-stagger > .sc-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== QUOTE BLOCKS ===== */
blockquote,
.vision-quote,
.quote-section {
    padding: 40px 48px !important;
    background: linear-gradient(135deg, rgba(197,165,90,0.04), rgba(197,165,90,0.02)) !important;
    border: none !important;
    border-left: 3px solid var(--gold, #C5A55A) !important;
    border-radius: 0 8px 8px 0 !important;
    margin: 40px 0 !important;
    position: relative;
}
blockquote::before,
.vision-quote::before {
    content: '\201C';
    position: absolute;
    top: 20px; left: 20px;
    font-family: 'Cinzel', serif;
    font-size: 64px;
    color: var(--gold, #C5A55A);
    opacity: 0.15;
    line-height: 1;
}
blockquote p,
.vision-quote p {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.3rem !important;
    font-style: italic;
    line-height: 1.6;
}

/* ===== BUTTONS ===== */
.btn, .cta-button, .btn-secondary {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.25em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    padding: 16px 48px !important;
    border: 1px solid var(--gold, #C5A55A) !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.btn:hover, .cta-button:hover {
    background: var(--gold, #C5A55A) !important;
    color: var(--nero, #1A1A1E) !important;
    letter-spacing: 0.3em !important;
}

/* ===== PAGE HEADER ===== */
/* BUG FIX: use background-color NOT background shorthand,                */
/* because `background:` resets background-image to none on every page!   */
.page-header {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: var(--nero, #1A1A1E) !important;
}

.page-header h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--marble, #F5F0E8) !important;
}

.page-header p {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(1rem, 2vw, 1.3rem) !important;
    font-weight: 300;
    font-style: italic;
    color: var(--senate, #8A8680) !important;
}

.page-header-content {
    position: relative;
    z-index: 2;
}

/* ===== TEAM PAGE PHOTO HOVER ===== */
/* Dramatic hover: gold glow ring, strong shadow, card lift, gold overlay */
.team-photo-wrap,
.lead-photo-wrap {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.team-card:hover .team-photo-wrap,
.lead-card:hover .lead-photo-wrap {
    border-color: var(--gold, #C5A55A) !important;
    box-shadow:
        0 16px 48px rgba(0,0,0,0.22),
        0 0 0 3px rgba(197,165,90,0.25),
        0 0 30px rgba(197,165,90,0.15) !important;
}

.team-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.team-card:hover {
    transform: translateY(-10px) !important;
}

/* Gold overlay on team photo hover */
.team-photo-wrap::after,
.lead-photo-wrap::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(197,165,90,0.18) 0%, transparent 60%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
}
.team-card:hover .team-photo-wrap::after,
.lead-card:hover .lead-photo-wrap::after {
    opacity: 1 !important;
}

/* ===== STAT ITEMS ===== */
.stat-number { color: var(--gold, #C5A55A); }
.stat-label { color: var(--nero, #1A1A1E); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .content-section {
        padding: 60px 20px !important;
    }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.1rem !important; }
    h4 { font-size: 0.95rem !important; }

    .diff-card, .stack-item, .spec-item, .stat-item,
    .senate-card, .participate-card, .highlight-box,
    .card, .benefit-card, .stat-card, .voting-card,
    .feature-card, .grant-card, .event-card {
        padding: 24px !important;
    }

    blockquote, .vision-quote, .quote-section {
        padding: 32px 24px !important;
    }

    .btn, .cta-button, .btn-secondary {
        padding: 12px 32px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .page-header { min-height: 45vh; }
    .page-header h1 { font-size: 1.6rem !important; }
    .content-section { padding: 40px 16px !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1rem !important; }
    p, li { font-size: 1.15rem !important; }
}