/*
 * Cross-page exhibit redesign for Peanut, Sweet Potato, and Tuskegee pages.
 * Scoped to .page-exhibit classes so legacy pages remain unaffected.
 */

.page-exhibit {
    --ex-primary: #20463f;
    --ex-secondary: #b7773c;
    --ex-deep: #112723;
    --ex-accent: #f3c98c;
    --ex-glow: rgba(243, 201, 140, 0.25);
    --ex-bg-soft: #f4ecdc;
    --ex-card: #fffaf0;
    --ex-ink: #1d2823;
    --ex-muted: #53645d;
    --ex-border: #d5c7ac;
    --ex-pill: #2b5148;
    --ex-font-body: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ex-font-head: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;

    background:
        radial-gradient(1200px 900px at 0% -5%, color-mix(in srgb, var(--ex-secondary) 15%, transparent), transparent 72%),
        radial-gradient(1100px 800px at 100% 8%, color-mix(in srgb, var(--ex-primary) 16%, transparent), transparent 70%),
        linear-gradient(180deg, #fbf4e8 0%, #f1e5d3 56%, #ecddc8 100%);
    color: var(--ex-ink);
    font-family: var(--ex-font-body);
}

.page-exhibit.peanut-exhibit {
    --ex-primary: #7e4721;
    --ex-secondary: #cf8a47;
    --ex-deep: #2d1d13;
    --ex-accent: #ffd59a;
    --ex-glow: rgba(255, 213, 154, 0.3);
    --ex-bg-soft: #f7ebda;
    --ex-card: #fffaf2;
    --ex-pill: #74431f;
}

.page-exhibit.sweet-exhibit {
    --ex-primary: #8a5432;
    --ex-secondary: #d39a58;
    --ex-deep: #322015;
    --ex-accent: #ffdca8;
    --ex-glow: rgba(255, 220, 168, 0.28);
    --ex-bg-soft: #f8ecdc;
    --ex-card: #fffbf5;
    --ex-pill: #92552f;
}

.page-exhibit.tuskegee-exhibit {
    --ex-primary: #244f45;
    --ex-secondary: #b98042;
    --ex-deep: #102621;
    --ex-accent: #f4cf8f;
    --ex-glow: rgba(244, 207, 143, 0.28);
    --ex-bg-soft: #edf0e6;
    --ex-card: #fbfcf8;
    --ex-pill: #1f4a40;
}

html[data-theme="dark"] .page-exhibit,
.page-exhibit.tuskegee-exhibit.dark-mode {
    --ex-card: #192521;
    --ex-bg-soft: #111a17;
    --ex-ink: #ebe8de;
    --ex-muted: #adbaaf;
    --ex-border: #32423b;

    background:
        radial-gradient(1300px 1000px at 0% -5%, rgba(86, 132, 109, 0.3), transparent 72%),
        radial-gradient(1200px 900px at 100% 8%, rgba(178, 117, 60, 0.24), transparent 70%),
        linear-gradient(180deg, #0e1512 0%, #111d19 56%, #172822 100%);
    color: var(--ex-ink);
}

.page-exhibit::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(21, 45, 38, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(21, 45, 38, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
}

.page-exhibit .container {
    max-width: 1240px;
    padding-inline: 1rem;
}

.page-exhibit h1,
.page-exhibit h2,
.page-exhibit h3,
.page-exhibit h4,
.page-exhibit h5,
.page-exhibit h6 {
    font-family: var(--ex-font-head);
    letter-spacing: -0.02em;
    color: var(--ex-ink);
}

.page-exhibit p {
    color: var(--ex-muted);
}

.page-exhibit .dark-mode-toggle {
    background: color-mix(in srgb, var(--ex-card) 88%, transparent);
    color: var(--ex-ink);
    border: 1px solid color-mix(in srgb, var(--ex-border) 75%, transparent);
    box-shadow: 0 10px 22px rgba(13, 23, 20, 0.16);
}

.page-exhibit .back-link {
    background: linear-gradient(135deg, var(--ex-primary), color-mix(in srgb, var(--ex-primary) 68%, #000 32%));
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9999px;
    box-shadow: 0 12px 24px rgba(14, 26, 23, 0.26);
}

.page-exhibit .back-link:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ex-primary) 82%, #fff 18%), var(--ex-secondary));
}

.page-exhibit .hero {
    background: transparent;
    padding: clamp(5.4rem, 10vw, 8rem) 0 clamp(2.8rem, 6vw, 4.2rem);
    position: relative;
    isolation: isolate;
    text-align: left;
}

.page-exhibit .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(85% 100% at 0% 10%, color-mix(in srgb, var(--ex-primary) 60%, transparent), transparent 72%),
        radial-gradient(95% 120% at 100% -5%, color-mix(in srgb, var(--ex-secondary) 52%, transparent), transparent 70%),
        linear-gradient(130deg, color-mix(in srgb, var(--ex-deep) 94%, transparent) 0%, color-mix(in srgb, var(--ex-primary) 90%, transparent) 48%, color-mix(in srgb, var(--ex-secondary) 78%, transparent) 100%);
}

.page-exhibit .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 100%),
        linear-gradient(300deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 100%);
    background-size: 88px 88px, 64px 64px;
    opacity: 0.45;
}

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

.page-exhibit .hero-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(1rem, 3vw, 2.6rem);
    align-items: center;
}

.page-exhibit .hero-copy {
    max-width: 680px;
}

.page-exhibit .hero-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.page-exhibit .hero h1 {
    color: #fff;
    font-size: clamp(2.7rem, 7vw, 5.7rem);
    line-height: 0.95;
    margin-bottom: 0.9rem;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
}

.page-exhibit .hero-subtitle {
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.04rem, 1.8vw, 1.4rem);
    margin-bottom: 0.7rem;
}

.page-exhibit .hero-period {
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    margin-bottom: 0;
    font-style: normal;
}

.page-exhibit .hero-art-panel {
    background: linear-gradient(155deg, rgba(8, 30, 25, 0.42), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 28px;
    backdrop-filter: blur(14px);
    padding: 0.8rem 0.8rem 0.65rem;
    box-shadow: 0 24px 54px rgba(5, 11, 10, 0.45);
}

.page-exhibit .hero-art-panel svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 24px rgba(2, 10, 8, 0.45));
    animation: exhibitFloat 8s ease-in-out infinite;
}

.page-exhibit .hero-art-caption {
    margin: 0.55rem 0 0;
    text-align: center;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.88);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.page-exhibit .hero-stats {
    margin-top: clamp(1.4rem, 4vw, 2.5rem);
    gap: 0.75rem;
    max-width: none;
    padding: 0.8rem;
    background: rgba(7, 25, 21, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(8px);
}

.page-exhibit .stat-box {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07));
    padding: 1rem 0.75rem;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page-exhibit .stat-number {
    color: var(--ex-accent);
    font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.page-exhibit .stat-label {
    font-size: 0.67rem;
    letter-spacing: 0.12em;
}

.page-exhibit .nav-section {
    background: color-mix(in srgb, var(--ex-card) 88%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--ex-border) 72%, transparent);
    padding: 1rem 0 0.9rem;
}

.page-exhibit .nav-container {
    gap: 0.7rem;
}

.page-exhibit .search-section {
    width: 100%;
    max-width: 780px;
}

.page-exhibit .search-input {
    border: 1px solid color-mix(in srgb, var(--ex-border) 86%, transparent);
    border-radius: 999px;
    font-family: var(--ex-font-body);
    background: color-mix(in srgb, var(--ex-card) 88%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.page-exhibit .search-input:focus {
    border-color: color-mix(in srgb, var(--ex-primary) 70%, #fff 30%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ex-primary) 16%, transparent);
}

.page-exhibit .search-tip {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ex-muted);
}

.page-exhibit .category-filters {
    gap: 0.5rem;
}

.page-exhibit .filter-btn {
    border: 1px solid color-mix(in srgb, var(--ex-border) 80%, transparent);
    border-radius: 999px;
    color: var(--ex-ink);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    padding: 0.55rem 1rem;
    background: color-mix(in srgb, var(--ex-card) 88%, transparent);
}

.page-exhibit .filter-btn:hover,
.page-exhibit .filter-btn.active {
    background: linear-gradient(135deg, var(--ex-primary), color-mix(in srgb, var(--ex-primary) 75%, #000 25%));
    color: #fff;
    border-color: transparent;
}

.page-exhibit .products-section,
.page-exhibit .section {
    padding: clamp(2.4rem, 5vw, 4rem) 0;
    background: transparent;
}

.page-exhibit .section-header {
    margin-bottom: 2rem;
}

.page-exhibit .section-title {
    color: var(--ex-ink);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    margin-bottom: 0.65rem;
}

.page-exhibit .section-description {
    color: var(--ex-muted);
    font-size: 1rem;
    max-width: 74ch;
}

.page-exhibit .category-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ex-primary) 96%, transparent), color-mix(in srgb, var(--ex-secondary) 75%, transparent));
    border: 1px solid color-mix(in srgb, var(--ex-secondary) 45%, transparent);
    border-radius: 22px;
    margin: 2.2rem 0 1.2rem;
    padding: 1rem;
}

.page-exhibit .category-head-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 1rem;
    align-items: center;
}

.page-exhibit .category-copy {
    text-align: left;
}

.page-exhibit .category-title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    color: #fff;
}

.page-exhibit .category-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.32rem 0.68rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 0.55rem;
}

.page-exhibit .category-count {
    margin: 0;
    font-size: 0.92rem;
    opacity: 0.94;
    color: rgba(255, 255, 255, 0.92);
}

.page-exhibit .category-description {
    margin: 0.55rem 0 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.66;
}

.page-exhibit .category-vector {
    min-height: 150px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.page-exhibit .category-vector .vector-scene {
    min-height: 150px;
}

.page-exhibit .products-grid,
.page-exhibit .campus-grid,
.page-exhibit .daily-life-grid,
.page-exhibit .significance-grid {
    gap: 1rem;
}

.page-exhibit .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
    margin-top: 1.2rem;
}

.page-exhibit .product-card,
.page-exhibit .campus-card,
.page-exhibit .daily-card,
.page-exhibit .significance-card {
    border: 1px solid color-mix(in srgb, var(--ex-border) 84%, transparent);
    border-radius: 18px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--ex-card) 95%, transparent), color-mix(in srgb, var(--ex-bg-soft) 90%, transparent));
    box-shadow: 0 10px 24px rgba(16, 29, 25, 0.1);
    overflow: hidden;
}

.page-exhibit .product-card::before,
.page-exhibit .campus-card::before {
    display: none;
}

.page-exhibit .product-card {
    padding: 0.8rem;
    text-align: left;
}

.page-exhibit .product-art {
    border-radius: 12px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ex-primary) 17%, transparent), color-mix(in srgb, var(--ex-secondary) 18%, transparent));
    border: 1px solid color-mix(in srgb, var(--ex-border) 70%, transparent);
    min-height: 145px;
    margin-bottom: 0.72rem;
}

.page-exhibit .product-vector .vector-scene {
    min-height: 145px;
}

.page-exhibit .product-vector svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 18px rgba(6, 14, 12, 0.27));
}

.page-exhibit .product-emoji {
    display: none;
}

.page-exhibit .product-name {
    font-size: 1.02rem;
    margin-bottom: 0.45rem;
    color: var(--ex-ink);
}

.page-exhibit .product-category {
    background: linear-gradient(135deg, var(--ex-pill), color-mix(in srgb, var(--ex-pill) 70%, #000 30%));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.63rem;
    letter-spacing: 0.1em;
}

.page-exhibit .product-card:hover,
.page-exhibit .campus-card:hover,
.page-exhibit .daily-card:hover,
.page-exhibit .significance-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(16, 29, 25, 0.16);
    border-color: color-mix(in srgb, var(--ex-secondary) 45%, var(--ex-border) 55%);
}

.page-exhibit .loading,
.page-exhibit .no-results {
    border: 1px dashed color-mix(in srgb, var(--ex-border) 75%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ex-card) 86%, transparent);
}

.page-exhibit .innovation-timeline,
.page-exhibit .timeline {
    background:
        radial-gradient(70% 110% at 0% 0%, color-mix(in srgb, var(--ex-primary) 35%, transparent), transparent 70%),
        linear-gradient(145deg, color-mix(in srgb, var(--ex-deep) 95%, transparent), color-mix(in srgb, var(--ex-primary) 88%, transparent), color-mix(in srgb, var(--ex-secondary) 75%, transparent));
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-exhibit .timeline-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 1rem;
    align-items: center;
}

.page-exhibit .timeline-text {
    text-align: left;
}

.page-exhibit .timeline-title {
    margin-bottom: 0.85rem;
    color: var(--ex-accent);
}

.page-exhibit .timeline-description {
    color: rgba(255, 255, 255, 0.84);
    font-size: 1rem;
}

.page-exhibit .timeline-art-panel {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    min-height: 200px;
    overflow: hidden;
}

.page-exhibit .timeline-art-panel .vector-scene {
    min-height: 200px;
}

.page-exhibit .timeline-art-panel svg {
    width: 100%;
    height: auto;
}

.page-exhibit .innovation-stats {
    margin-top: 1rem;
    gap: 0.7rem;
}

.page-exhibit .innovation-stat {
    border-radius: 14px;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    padding: 1rem 0.8rem;
}

.page-exhibit .innovation-number {
    color: var(--ex-accent);
    font-size: clamp(1.7rem, 2.7vw, 2.2rem);
}

.page-exhibit .campus-card,
.page-exhibit .daily-card,
.page-exhibit .significance-card {
    padding: 0.9rem;
    text-align: left;
}

.page-exhibit .campus-emoji,
.page-exhibit .significance-icon {
    display: none;
}

.page-exhibit .story-vector {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ex-border) 70%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--ex-primary) 16%, transparent), color-mix(in srgb, var(--ex-secondary) 17%, transparent));
    min-height: 130px;
    margin-bottom: 0.72rem;
    overflow: hidden;
}

.page-exhibit .story-vector .vector-scene {
    min-height: 130px;
}

.page-exhibit .story-vector svg {
    width: 100%;
    height: auto;
}

.page-exhibit .campus-title,
.page-exhibit .daily-time,
.page-exhibit .significance-title {
    color: var(--ex-ink);
    margin-bottom: 0.45rem;
}

.page-exhibit .campus-description,
.page-exhibit .daily-activity,
.page-exhibit .significance-text {
    color: var(--ex-muted);
}

.page-exhibit .timeline-item {
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.page-exhibit .timeline-year {
    background: var(--ex-accent);
    color: var(--ex-deep);
}

.page-exhibit .timeline-content-item {
    border-left-color: var(--ex-accent);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
}

.page-exhibit .timeline-vector {
    min-width: 120px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.page-exhibit .timeline-vector .vector-scene {
    min-height: 90px;
}

.page-exhibit .quote-section {
    background:
        radial-gradient(80% 120% at 0% 0%, rgba(255, 255, 255, 0.08), transparent 72%),
        linear-gradient(145deg, color-mix(in srgb, var(--ex-primary) 96%, transparent), color-mix(in srgb, var(--ex-secondary) 70%, transparent));
}

.page-exhibit .quote-container {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
}

.page-exhibit .quote-text {
    color: var(--ex-accent);
}

.page-exhibit .vector-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.2rem;
}

.page-exhibit .vector-scene svg {
    display: block;
}

@keyframes exhibitFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (max-width: 1024px) {
    .page-exhibit .hero-story-grid,
    .page-exhibit .category-head-layout,
    .page-exhibit .timeline-layout {
        grid-template-columns: 1fr;
    }

    .page-exhibit .hero-copy,
    .page-exhibit .timeline-text {
        text-align: center;
        margin-inline: auto;
    }

    .page-exhibit .category-copy {
        text-align: center;
    }

    .page-exhibit .hero-art-panel,
    .page-exhibit .timeline-art-panel,
    .page-exhibit .category-vector {
        max-width: 540px;
        margin-inline: auto;
    }
}

@media (max-width: 760px) {
    .page-exhibit .hero {
        text-align: center;
        padding-top: 5.4rem;
        padding-bottom: 2rem;
    }

    .page-exhibit .hero-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .page-exhibit .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.65rem;
    }

    .page-exhibit .stat-box {
        min-height: 92px;
    }

    .page-exhibit .back-link {
        position: relative;
        margin: 1rem auto 0;
        top: auto;
        left: auto;
        display: block;
        width: fit-content;
    }

    .page-exhibit .products-grid,
    .page-exhibit .campus-grid,
    .page-exhibit .daily-life-grid,
    .page-exhibit .significance-grid {
        grid-template-columns: 1fr;
    }

    .page-exhibit .filter-btn {
        font-size: 0.64rem;
        padding: 0.5rem 0.72rem;
    }

    .page-exhibit .timeline-item {
        flex-direction: column;
    }

    .page-exhibit .timeline-vector {
        min-width: 0;
        width: 100%;
        max-width: 260px;
    }
}

@media (max-width: 480px) {
    .page-exhibit .hero-stats {
        grid-template-columns: 1fr;
    }
}