/* ==========================================================================
   Navigation submenu
   ========================================================================== */

/* Submenu background and width */
.wp-block-navigation .wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--background) !important;
    min-width: 240px;
    border: 1px solid var(--wp--preset--color--border-subtle);
    border-radius: 8px;
    padding: 0.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Submenu items */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.5rem 1.25rem;
    white-space: nowrap;
    color: var(--wp--preset--color--primary);
}

/* Submenu item hover */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    background-color: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--primary-hover);
}

/* Remove default underline on submenu links */
.wp-block-navigation .wp-block-navigation__submenu-container a {
    text-decoration: none;
}

/* Caret/arrow color in dropdowns */
.wp-block-navigation .wp-block-navigation-submenu__toggle svg {
    fill: var(--wp--preset--color--accent-green);
}

/* ==========================================================================
   Header
   ========================================================================== */

   .utility-bar {
    border-bottom: 1px solid var(--wp--preset--color--border-subtle);
    gap: 1rem;
}

.utility-bar p {
    margin: 0;
}

.utility-bar a {
    text-decoration: none;
    color: var(--wp--preset--color--primary);
}

.utility-bar a:hover {
    color: var(--wp--preset--color--primary-hover);
}

/* Main nav: remove default underlines on top-level links */
.header-main .wp-block-navigation a {
    text-decoration: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer h4 {
    margin-bottom: 0.5rem;
    color: var(--wp--preset--color--primary);
}

.site-footer .wp-block-navigation a {
    text-decoration: none;
    padding: 0.25rem 0;
}

/* Footer social icons — muted instead of default brand colors */
.site-footer .wp-block-social-links {
    margin-top: 1rem;
}

/* Footer bottom bar: stack on mobile */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column !important;
        gap: 0.5rem;
    }
}

.bhs-event-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    width: 100%;
}

.bhs-event-meta-grid p {
    margin: 0;
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.bhs-newsletter-meta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.bhs-newsletter-meta p {
    margin: 0;
}

.bhs-newsletter-issue {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
}

.bhs-newsletter-summary p {
    margin: 0 0 0.75rem;
}

.bhs-pdf-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface) !important;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 600;
    font-family: var(--wp--preset--font-family--body);
    transition: background-color 0.2s ease;
}

.bhs-pdf-button:hover,
.bhs-pdf-button:focus {
    background-color: var(--wp--preset--color--primary-hover);
    color: var(--wp--preset--color--surface) !important;
}

/* ==========================================================================
   Collection items
   ========================================================================== */

.bhs-collection-meta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.bhs-collection-meta p {
    margin: 0;
}

.bhs-collection-provenance p:first-child {
    margin-bottom: 0.25rem;
}

.bhs-collection-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.bhs-collection-gallery figure {
    margin: 0;
}

.bhs-collection-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* ==========================================================================
   Board members
   ========================================================================== */

.bhs-board-member-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.bhs-board-member-meta p {
    margin: 0;
}

.bhs-board-position {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--x-large);
    color: var(--wp--preset--color--text-muted);
}

.bhs-board-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.bhs-board-contact a {
    text-decoration: none;
    color: var(--wp--preset--color--primary);
}

.bhs-board-contact a:hover,
.bhs-board-contact a:focus {
    color: var(--wp--preset--color--primary-hover);
}

/* ==========================================================================
   Archive layouts (shared)
   ========================================================================== */

.bhs-archive-header {
    margin-bottom: 2.5rem;
}

.bhs-archive-header h1 {
    margin: 0 0 0.5rem;
}

.bhs-archive-header p {
    margin: 0;
    color: var(--wp--preset--color--text-muted);
    max-width: 60ch;
}

.bhs-archive-section {
    margin-bottom: 3rem;
}

.bhs-archive-section__title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--x-large);
    margin: 0 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--wp--preset--color--accent-green, var(--wp--preset--color--primary));
}

.bhs-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.bhs-archive-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wp--preset--color--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--wp--preset--color--surface);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bhs-archive-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.bhs-archive-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--wp--preset--color--border-subtle);
}

.bhs-archive-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bhs-archive-card__body {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.bhs-archive-card__title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

.bhs-archive-card__title a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.bhs-archive-card__title a:hover,
.bhs-archive-card__title a:focus {
    color: var(--wp--preset--color--primary-hover);
}

.bhs-archive-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
    color: var(--wp--preset--color--text-muted);
}

.bhs-archive-card__excerpt {
    margin: 0;
    font-size: 0.95rem;
    color: var(--wp--preset--color--text, inherit);
}

.bhs-archive-card__more {
    margin: auto 0 0;
    font-weight: 600;
}

.bhs-archive-card__more a {
    text-decoration: none;
    color: var(--wp--preset--color--primary);
}

.bhs-archive-empty {
    padding: 1.5rem;
    border: 1px dashed var(--wp--preset--color--border-subtle);
    border-radius: 8px;
    color: var(--wp--preset--color--text-muted);
    text-align: center;
}

/* Pagination */
.bhs-archive-pagination {
    margin-top: 2rem;
}

.bhs-archive-pagination ul.page-numbers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.bhs-archive-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--wp--preset--color--border-subtle);
    border-radius: 6px;
    text-decoration: none;
    color: var(--wp--preset--color--primary);
}

.bhs-archive-pagination .page-numbers.current {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
    border-color: var(--wp--preset--color--primary);
}

.bhs-archive-pagination .page-numbers:hover:not(.current) {
    background-color: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--primary-hover);
}

/* Newsletter archive */
.bhs-newsletter-archive .bhs-newsletter-year {
    margin-bottom: 2.5rem;
}

.bhs-newsletter-year__title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--x-large);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--wp--preset--color--accent-green, var(--wp--preset--color--primary));
}

.bhs-newsletter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bhs-newsletter-list__item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}

.bhs-newsletter-list__item:last-child {
    border-bottom: none;
}

.bhs-newsletter-list__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bhs-newsletter-list__title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.125rem;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    font-weight: 600;
}

.bhs-newsletter-list__title:hover,
.bhs-newsletter-list__title:focus {
    color: var(--wp--preset--color--primary-hover);
}

.bhs-newsletter-list__date {
    font-size: 0.875rem;
    color: var(--wp--preset--color--text-muted);
}

.bhs-newsletter-list__summary {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
}

@media (max-width: 600px) {
    .bhs-newsletter-list__item {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Collection archive (grouped by category) */
.bhs-collection-category {
    margin-bottom: 3rem;
}

.bhs-collection-category__title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--x-large);
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--wp--preset--color--accent-green, var(--wp--preset--color--primary));
}

.bhs-collection-category__desc {
    margin: 0 0 1.25rem;
    color: var(--wp--preset--color--text-muted);
    max-width: 60ch;
}

/* ==========================================================================
   Fluent Forms — brand styling
   ========================================================================== */

   .fluentform .ff-el-form-control {
    border: 1px solid var(--wp--preset--color--primary);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: transparent;
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--body);
    font-size: 1rem;
}

.fluentform .ff-el-form-control:focus {
    outline: 2px solid var(--wp--preset--color--accent-green);
    outline-offset: 1px;
}

.fluentform .ff-el-input--label label {
    color: var(--wp--preset--color--primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.fluentform .ff-btn-submit {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--body);
}

.fluentform .ff-btn-submit:hover {
    background: var(--wp--preset--color--primary-hover);
}

.fluentform .ff-message-success {
    background: rgba(31, 165, 46, 0.1);
    border-left: 4px solid var(--wp--preset--color--accent-green);
    padding: 1rem;
    border-radius: 4px;
    color: var(--wp--preset--color--primary);
}

/* Membership fees table — clean two-column, no borders */
.bhs-fee-table table {
    border-collapse: collapse;
    max-width: 400px;
}

.bhs-fee-table td {
    padding: 0.5rem 1rem 0.5rem 0;
    border: none;
    color: var(--wp--preset--color--primary);
}

.bhs-fee-table tr td:first-child {
    padding-right: 3rem;
}

.bhs-fee-table tr td:last-child {
    font-weight: 600;
}

/* Outline button variant — for "Download PDF Form" */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--primary);
    border: 2px solid var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
}

/* ==========================================================================
   FAQ accordion items
   ========================================================================== */

   .bhs-faq-item {
    background: var(--wp--preset--color--surface);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    list-style: none;
}

/* Hide default disclosure triangle */
.bhs-faq-item summary::-webkit-details-marker,
.bhs-faq-item summary::marker {
    display: none;
    content: '';
}

.bhs-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    font-size: 1.0625rem;
    list-style: none;
    position: relative;
    padding-right: 2rem;
    display: block;
}

/* The +/- icon on the right */
.bhs-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wp--preset--color--accent-green);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.2s ease;
}

.bhs-faq-item[open] summary::after {
    content: '−';
}

/* Answer content spacing when expanded */
.bhs-faq-item[open] {
    padding-bottom: 1.5rem;
}

.bhs-faq-item p {
    margin: 1rem 0 0;
    color: var(--wp--preset--color--primary);
    line-height: 1.6;
}

/* Focus state for keyboard navigation */
.bhs-faq-item summary:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   Resources grid
   ========================================================================== */

   .bhs-resources-grid .wp-block-column {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bhs-resources-grid .wp-block-column:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Logo + content row inside each card */
.bhs-resources-grid .wp-block-column > .wp-block-group {
    align-items: flex-start;
    gap: 1rem;
}

/* Logo container — fixed size, content-fit */
.bhs-resources-grid figure.wp-block-image {
    flex-shrink: 0;
    margin: 0;
    width: 80px;
    height: 80px;
}

.bhs-resources-grid figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Resource link styling — no underline by default, primary olive */
.bhs-resources-grid h3 a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.bhs-resources-grid h3 a:hover {
    text-decoration: underline;
}

/* Mobile: stack logo above text for narrow widths */
@media (max-width: 480px) {
    .bhs-resources-grid .wp-block-column > .wp-block-group {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

<!-- wp:group {"style":{"spacing":{"padding":{"top":"3rem","right":"2rem","bottom":"3rem","left":"2rem"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:3rem;padding-right:2rem;padding-bottom:3rem;padding-left:2rem">

    <!-- Heading + intro -->
    <!-- wp:heading {"level":1} -->
    <h1 class="wp-block-heading">Oral History</h1>
    <!-- /wp:heading -->

    <!-- wp:paragraph -->
    <p>Oral histories preserve the firsthand voices and lived experiences of individuals whose stories deepen our understanding of history beyond written records. Through recorded interviews and personal narratives, these accounts capture diverse perspectives that highlight cultural heritage, community struggles, and moments of change. Our oral history collection is a vital resource that connects past and present, ensuring these invaluable stories continue to inform and inspire.</p>
    <!-- /wp:paragraph -->

    <!-- Outlined CTA button -->
    <!-- wp:buttons {"style":{"spacing":{"margin":{"top":"1.5rem","bottom":"3rem"}}}} -->
    <div class="wp-block-buttons" style="margin-top:1.5rem;margin-bottom:3rem">
        <!-- wp:button {"className":"is-style-outline"} -->
        <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="/collections/accessing-the-archive/">Learn how to access the archive →</a></div>
        <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->

    <!-- ============ Card 1 ============ -->
    <!-- wp:group {"backgroundColor":"surface","className":"bhs-oral-history-card","style":{"spacing":{"margin":{"bottom":"1.5rem"}},"border":{"radius":"12px"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-surface-background-color has-background bhs-oral-history-card" style="border-radius:12px;margin-bottom:1.5rem">

        <!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
        <div class="wp-block-columns are-vertically-aligned-center">

            <!-- Thumbnail column -->
            <!-- wp:column {"verticalAlignment":"center","width":"45%","className":"bhs-oh-media"} -->
            <div class="wp-block-column is-vertically-aligned-center bhs-oh-media" style="flex-basis:45%">
                <!-- wp:image {"sizeSlug":"large","style":{"border":{"radius":{"topLeft":"12px","bottomLeft":"12px"}}}} -->
                <figure class="wp-block-image size-large has-custom-border"><img alt="Memories of a Thriving Community" style="border-top-left-radius:12px;border-bottom-left-radius:12px"/></figure>
                <!-- /wp:image -->
            </div>
            <!-- /wp:column -->

            <!-- Content column -->
            <!-- wp:column {"verticalAlignment":"center","width":"55%","style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}}} -->
            <div class="wp-block-column is-vertically-aligned-center" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem;flex-basis:55%">

                <!-- wp:heading {"level":3} -->
                <h3 class="wp-block-heading">Memories of a Thriving Community</h3>
                <!-- /wp:heading -->

                <!-- Metadata row -->
                <!-- wp:paragraph {"className":"bhs-oh-meta","style":{"typography":{"fontSize":"0.875rem","fontWeight":"600","letterSpacing":"0.05em"},"color":{"text":"#1FA52E"}}} -->
                <p class="bhs-oh-meta has-text-color" style="color:#1FA52E;font-size:0.875rem;font-weight:600;letter-spacing:0.05em">2025 &nbsp;&nbsp; Documentary &nbsp;&nbsp; 2h 32m</p>
                <!-- /wp:paragraph -->

                <!-- Description -->
                <!-- wp:paragraph -->
                <p>This interview features longtime residents reflecting on the vibrant culture, enduring challenges, and remarkable resilience of Seattle's Central District during the mid-20th century. Their powerful stories reveal the neighborhood's pivotal role in shaping the city's Black history and its legacy of ongoing community activism.</p>
                <!-- /wp:paragraph -->

                <!-- Coming Soon note -->
                <!-- wp:paragraph {"style":{"typography":{"fontStyle":"italic","fontSize":"0.875rem"},"color":{"text":"#7A6A3F"}}} -->
                <p class="has-text-color" style="color:#7A6A3F;font-size:0.875rem;font-style:italic">Recording coming soon — contact BHS for access.</p>
                <!-- /wp:paragraph -->

            </div>
            <!-- /wp:column -->

        </div>
        <!-- /wp:columns -->

    </div>
    <!-- /wp:group -->

    <!-- ============ Card 2 ============ -->
    <!-- wp:group {"backgroundColor":"surface","className":"bhs-oral-history-card","style":{"spacing":{"margin":{"bottom":"1.5rem"}},"border":{"radius":"12px"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-surface-background-color has-background bhs-oral-history-card" style="border-radius:12px;margin-bottom:1.5rem">

        <!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
        <div class="wp-block-columns are-vertically-aligned-center">

            <!-- wp:column {"verticalAlignment":"center","width":"45%","className":"bhs-oh-media"} -->
            <div class="wp-block-column is-vertically-aligned-center bhs-oh-media" style="flex-basis:45%">
                <!-- wp:image {"sizeSlug":"large","style":{"border":{"radius":{"topLeft":"12px","bottomLeft":"12px"}}}} -->
                <figure class="wp-block-image size-large has-custom-border"><img alt="An Interview with Dr. Jason Thompson" style="border-top-left-radius:12px;border-bottom-left-radius:12px"/></figure>
                <!-- /wp:image -->
            </div>
            <!-- /wp:column -->

            <!-- wp:column {"verticalAlignment":"center","width":"55%","style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}}} -->
            <div class="wp-block-column is-vertically-aligned-center" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem;flex-basis:55%">

                <!-- wp:heading {"level":3} -->
                <h3 class="wp-block-heading">An Interview with Dr. Jason Thompson</h3>
                <!-- /wp:heading -->

                <!-- wp:paragraph {"className":"bhs-oh-meta","style":{"typography":{"fontSize":"0.875rem","fontWeight":"600","letterSpacing":"0.05em"},"color":{"text":"#1FA52E"}}} -->
                <p class="bhs-oh-meta has-text-color" style="color:#1FA52E;font-size:0.875rem;font-weight:600;letter-spacing:0.05em">2025 &nbsp;&nbsp; Narrative &nbsp;&nbsp; 0h 45m</p>
                <!-- /wp:paragraph -->

                <!-- wp:paragraph -->
                <p>Dr. Jason Thompson shares his experiences as one of the first Black engineers in Seattle's growing technology sector. His narrative highlights barriers broken, mentorship, and his vision for increasing diversity in STEM fields.</p>
                <!-- /wp:paragraph -->

                <!-- wp:paragraph {"style":{"typography":{"fontStyle":"italic","fontSize":"0.875rem"},"color":{"text":"#7A6A3F"}}} -->
                <p class="has-text-color" style="color:#7A6A3F;font-size:0.875rem;font-style:italic">Recording coming soon — contact BHS for access.</p>
                <!-- /wp:paragraph -->

            </div>
            <!-- /wp:column -->

        </div>
        <!-- /wp:columns -->

    </div>
    <!-- /wp:group -->

    <!-- ============ Card 3 ============ -->
    <!-- wp:group {"backgroundColor":"surface","className":"bhs-oral-history-card","style":{"spacing":{"margin":{"bottom":"1.5rem"}},"border":{"radius":"12px"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-surface-background-color has-background bhs-oral-history-card" style="border-radius:12px;margin-bottom:1.5rem">

        <!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
        <div class="wp-block-columns are-vertically-aligned-center">

            <!-- wp:column {"verticalAlignment":"center","width":"45%","className":"bhs-oh-media"} -->
            <div class="wp-block-column is-vertically-aligned-center bhs-oh-media" style="flex-basis:45%">
                <!-- wp:image {"sizeSlug":"large","style":{"border":{"radius":{"topLeft":"12px","bottomLeft":"12px"}}}} -->
                <figure class="wp-block-image size-large has-custom-border"><img alt="The Life of Gospel Singer Ruth Washington" style="border-top-left-radius:12px;border-bottom-left-radius:12px"/></figure>
                <!-- /wp:image -->
            </div>
            <!-- /wp:column -->

            <!-- wp:column {"verticalAlignment":"center","width":"55%","style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}}} -->
            <div class="wp-block-column is-vertically-aligned-center" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem;flex-basis:55%">

                <!-- wp:heading {"level":3} -->
                <h3 class="wp-block-heading">The Life of Gospel Singer Ruth Washington</h3>
                <!-- /wp:heading -->

                <!-- wp:paragraph {"className":"bhs-oh-meta","style":{"typography":{"fontSize":"0.875rem","fontWeight":"600","letterSpacing":"0.05em"},"color":{"text":"#1FA52E"}}} -->
                <p class="bhs-oh-meta has-text-color" style="color:#1FA52E;font-size:0.875rem;font-weight:600;letter-spacing:0.05em">2024 &nbsp;&nbsp; Music &nbsp;&nbsp; 1h 10m</p>
                <!-- /wp:paragraph -->

                <!-- wp:paragraph -->
                <p>Ruth Washington recounts her journey as a gospel singer whose music became a source of hope and unity during the Civil Rights Movement. Her oral history sheds light on the power of music in cultural identity and social change.</p>
                <!-- /wp:paragraph -->

                <!-- wp:paragraph {"style":{"typography":{"fontStyle":"italic","fontSize":"0.875rem"},"color":{"text":"#7A6A3F"}}} -->
                <p class="has-text-color" style="color:#7A6A3F;font-size:0.875rem;font-style:italic">Recording coming soon — contact BHS for access.</p>
                <!-- /wp:paragraph -->

            </div>
            <!-- /wp:column -->

        </div>
        <!-- /wp:columns -->

    </div>
    <!-- /wp:group -->

</div>
<!-- /wp:group -->

/* ==========================================================================
   Get Involved hub cards (also reusable for other hubs)
   ========================================================================== */

   .bhs-getinvolved-cards .wp-block-column {
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bhs-getinvolved-cards .wp-block-column:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bhs-getinvolved-cards figure.wp-block-image {
    margin: 0;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.bhs-getinvolved-cards figure.wp-block-image a,
.bhs-getinvolved-cards figure.wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card heading: clickable, primary olive, no underline */
.bhs-getinvolved-cards h3 a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.bhs-getinvolved-cards h3 a:hover {
    text-decoration: underline;
}

/* Apply hub card styling to both Get Involved and Resources hubs */
.bhs-getinvolved-cards .wp-block-column,
.bhs-resources-hub-cards .wp-block-column {
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bhs-getinvolved-cards .wp-block-column:hover,
.bhs-resources-hub-cards .wp-block-column:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bhs-getinvolved-cards figure.wp-block-image,
.bhs-resources-hub-cards figure.wp-block-image {
    margin: 0;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.bhs-getinvolved-cards figure.wp-block-image a,
.bhs-getinvolved-cards figure.wp-block-image img,
.bhs-resources-hub-cards figure.wp-block-image a,
.bhs-resources-hub-cards figure.wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bhs-getinvolved-cards h3 a,
.bhs-resources-hub-cards h3 a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.bhs-getinvolved-cards h3 a:hover,
.bhs-resources-hub-cards h3 a:hover {
    text-decoration: underline;
}

.bhs-oral-history-card,
.bhs-routed-history-card {
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.bhs-oral-history-card:hover,
.bhs-routed-history-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bhs-oral-history-card .bhs-oh-media figure,
.bhs-routed-history-card .bhs-rh-media figure {
    margin: 0;
    height: 100%;
}

.bhs-oral-history-card .bhs-oh-media img,
.bhs-routed-history-card .bhs-rh-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .bhs-oral-history-card .wp-block-columns,
    .bhs-routed-history-card .wp-block-columns {
        flex-direction: column !important;
    }

    .bhs-oral-history-card .wp-block-column,
    .bhs-routed-history-card .wp-block-column {
        flex-basis: 100% !important;
    }

    .bhs-oral-history-card .bhs-oh-media img,
    .bhs-routed-history-card .bhs-rh-media img {
        border-radius: 12px 12px 0 0 !important;
        max-height: 240px;
    }
}

.bhs-oral-history-card,
.bhs-routed-history-card,
.bhs-roots-voices-card {
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.bhs-oral-history-card:hover,
.bhs-routed-history-card:hover,
.bhs-roots-voices-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bhs-oral-history-card .bhs-oh-media figure,
.bhs-routed-history-card .bhs-rh-media figure,
.bhs-roots-voices-card .bhs-rv-media figure {
    margin: 0;
    height: 100%;
}

.bhs-oral-history-card .bhs-oh-media img,
.bhs-routed-history-card .bhs-rh-media img,
.bhs-roots-voices-card .bhs-rv-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .bhs-oral-history-card .wp-block-columns,
    .bhs-routed-history-card .wp-block-columns,
    .bhs-roots-voices-card .wp-block-columns {
        flex-direction: column !important;
    }

    .bhs-oral-history-card .wp-block-column,
    .bhs-routed-history-card .wp-block-column,
    .bhs-roots-voices-card .wp-block-column {
        flex-basis: 100% !important;
    }

    .bhs-oral-history-card .bhs-oh-media img,
    .bhs-routed-history-card .bhs-rh-media img,
    .bhs-roots-voices-card .bhs-rv-media img {
        border-radius: 12px 12px 0 0 !important;
        max-height: 240px;
    }
}

.bhs-getinvolved-cards .wp-block-column,
.bhs-resources-hub-cards .wp-block-column,
.bhs-projects-cards .wp-block-column {
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bhs-getinvolved-cards .wp-block-column:hover,
.bhs-resources-hub-cards .wp-block-column:hover,
.bhs-projects-cards .wp-block-column:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bhs-getinvolved-cards figure.wp-block-image,
.bhs-resources-hub-cards figure.wp-block-image,
.bhs-projects-cards figure.wp-block-image {
    margin: 0;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.bhs-getinvolved-cards figure.wp-block-image a,
.bhs-getinvolved-cards figure.wp-block-image img,
.bhs-resources-hub-cards figure.wp-block-image a,
.bhs-resources-hub-cards figure.wp-block-image img,
.bhs-projects-cards figure.wp-block-image a,
.bhs-projects-cards figure.wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bhs-getinvolved-cards h3 a,
.bhs-resources-hub-cards h3 a,
.bhs-projects-cards h3 a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.bhs-getinvolved-cards h3 a:hover,
.bhs-resources-hub-cards h3 a:hover,
.bhs-projects-cards h3 a:hover {
    text-decoration: underline;
}

/* Disable hover lift on cards without links */
.bhs-projects-cards .wp-block-column:not(:has(a)):hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: default;
}