/* =============================================================================
   Individual Speech Block
   ============================================================================= */

/* ── Container ─────────────────────────────────────────────────────────────── */

.individual-speech {
    background: var(--byu-white);

    /* The horizontal offset for the text column lives here as padding rather
       than as margins on __container. Both put the column in the same place,
       but Safari paints a text selection across the full width of the block
       the line boxes belong to: with the offset as a margin the painted box
       still started at the viewport edge, so the highlight ran far to the left
       of the text and past its right edge. As padding, the container's box
       begins where the text begins. */
    padding: 2rem max(5%, calc((100% - 1000px) / 2)) 4rem;

    /* Flex, for selection painting rather than for layout. WebKit fills the
       gaps between the blocks a selection spans using the width of their
       nearest common ancestor block -- this section -- so dragging across two
       paragraphs painted a highlight the full 1211px section width even though
       the text column is 736px and correctly inset. WebKit skips gap painting
       inside flex containers. __container is the only child and keeps its
       46rem cap, so stretch leaves the column exactly where it was. */
    display: flex;
    flex-direction: column;
}

.individual-speech__container {
    max-width: 46rem; /* ~736px — readable line length */
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */

.individual-speech__breadcrumb {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #4180c9;
    margin-bottom: 1.5rem;
}

.individual-speech__breadcrumb a {
    color: #4180c9;
    text-decoration: none;
}

.individual-speech__breadcrumb a:hover {
    text-decoration: underline;
}

.individual-speech__breadcrumb span:last-child {
    color: #4180c9;
}

/* ── Meta row (badge + date) ────────────────────────────────────────────────── */

.individual-speech__meta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.individual-speech__badge {
    display: inline-block;
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #747474;
    background: #fff;
    border: 0.0625rem solid #e0e0e3;
    border-radius: 0.313rem;
    padding: 0.25rem 0.625rem;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.individual-speech__badge:hover {
    background: #f4f4f6;
    border-color: #c0c0c3;
}

.individual-speech__date {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #747474;
    margin: 0;
}

/* ── Title ──────────────────────────────────────────────────────────────────── */

.individual-speech__title {
    font-family: var(--f-ibm-plex-sans);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-navy);
    margin: 0.5rem 0 0.625rem;
}

@media (min-width: 40rem) {
    .individual-speech__title {
        font-size: 2rem;
    }
}

/* ── Speakers ───────────────────────────────────────────────────────────────── */

/* Natural text flow, not a flex row: multiple speakers read as one comma-separated
   sentence that wraps mid-line. Flex + gap would put a space before every comma.
   Typography lives on the container so the separators inherit it. */
.individual-speech__speakers {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #266ec1;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.individual-speech__speaker-name {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #266ec1;
    text-decoration: none;
}

.individual-speech__speaker-name:hover {
    text-decoration: underline;
}

/* ── Speaker position ───────────────────────────────────────────────────────── */

.individual-speech__position {
    font-style: italic;
    font-size: 0.75rem;
    color: #747474;
    margin: 0 0 1.25rem;
}

/* ── Action buttons ─────────────────────────────────────────────────────────── */

.individual-speech__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 1.5rem;
}

.individual-speech__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-navy);
    background: #fff;
    border: 0.0625rem solid #e0e0e3;
    border-radius: 0.313rem;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.individual-speech__action-btn:hover,
.individual-speech__action-btn:focus-visible {
    background: #f4f4f6;
    border-color: #c0c0c3;
    outline: none;
}

.individual-speech__action-btn--print img {
    height: 1lh;
    width: auto;
}

.individual-speech__video-tab.is-active {
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy);
}

.individual-speech__chevron {
    transition: transform 0.2s;
}

[aria-expanded="true"] .individual-speech__chevron {
    transform: rotate(180deg);
}

/* ── Language menu ──────────────────────────────────────────────────────────── */

.individual-speech__lang-wrapper {
    position: relative;
}

.individual-speech__lang-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 0.0625rem solid #e0e0e3;
    border-radius: 0.313rem;
    min-width: 9rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 0.25rem 0;
    overflow: hidden;
}

.individual-speech__lang-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.875rem;
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--c-navy);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.individual-speech__lang-option:hover {
    background: #f4f4f6;
}

.individual-speech__video-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

/* ── Audio Player ────────────────────────────────────────────────────────────── */

.individual-speech__audio-wrapper {
    margin-bottom: 1.5rem;
}

.individual-speech__audio-el {
    display: none;
}

.individual-speech__audio-player {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    background: #6aafe6;
    border-radius: 0.313rem;
    padding: 0.75rem 1rem;
    transition: box-shadow 0.2s;
}

.individual-speech__audio-player.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    z-index: 200;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* Sit below the WordPress admin bar for logged-in editors. */
body.admin-bar .individual-speech__audio-player.is-sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .individual-speech__audio-player.is-sticky {
        top: 46px;
    }
}

.individual-speech__audio-play-btn,
.individual-speech__audio-skip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--c-navy);
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.individual-speech__audio-play-btn:hover,
.individual-speech__audio-skip-btn:hover {
    opacity: 0.75;
}

.individual-speech__audio-timeline-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 12rem;
    min-width: 0;
}

.individual-speech__audio-time {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--c-navy);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.individual-speech__audio-timeline {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 0.375rem;
    background: linear-gradient(to right, var(--c-navy) 0%, var(--c-navy) 0%, rgba(255,255,255,0.45) 0%);
    border-radius: 0.25rem;
    cursor: pointer;
    outline: none;
}

.individual-speech__audio-timeline::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--c-navy);
    cursor: pointer;
}

.individual-speech__audio-timeline::-moz-range-thumb {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--c-navy);
    cursor: pointer;
    border: none;
}

.individual-speech__audio-speed {
    display: flex;
    align-items: center;
}

.individual-speech__speed-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-navy);
    gap: 0.125rem;
    cursor: pointer;
}

.individual-speech__speed-select {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--c-navy);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
}

.individual-speech__audio-download {
    display: flex;
    align-items: center;
    color: var(--c-navy);
    transition: opacity 0.15s;
    margin-left: auto;
}

.individual-speech__audio-download:hover {
    opacity: 0.75;
}

/* ── Video Player ────────────────────────────────────────────────────────────── */

.individual-speech__video-wrapper {
    margin-bottom: 1.5rem;
}

.individual-speech__video-player {
    position: relative;
    background: #000;
    border-radius: var(--brad-card);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.individual-speech__video-thumbnail {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.individual-speech__video-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.individual-speech__video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s;
}

.individual-speech__video-play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.individual-speech__video-iframe-wrap {
    position: absolute;
    inset: 0;
}

.individual-speech__video-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Hero Image ─────────────────────────────────────────────────────────────── */

.individual-speech__hero {
    margin-bottom: 1.75rem;
    border-radius: var(--brad-card);
    overflow: hidden;
}

.individual-speech__hero-img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 22rem;
    object-fit: cover;
}

/* ── Envisioning BYU link ────────────────────────────────────────────────────── */

.individual-speech__envisioning {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.75rem;
    padding: 0.75rem 1rem;
    background: #f4f4f6;
    border: 0.0625rem solid #e0e0e3;
    border-radius: var(--brad-card);
}

.individual-speech__envisioning-icon {
    flex-shrink: 0;
}

.individual-speech__envisioning-text {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.8125rem;
    color: #747474;
}

.individual-speech__envisioning-link {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #266ec1;
    text-decoration: none;
}

.individual-speech__envisioning-link:hover {
    text-decoration: underline;
}

/* ── Callout / Pull Quote ────────────────────────────────────────────────────── */

.individual-speech__callout {
    font-family: var(--f-ibm-plex-sans);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.6;
    color: #266ec1;
    margin: 0 0 2rem;
    padding: 0.25rem 0;
}

.individual-speech__callout p {
    margin: 0;
}

/* ── AI Disclaimer ───────────────────────────────────────────────────────────── */

.individual-speech__ai-disclaimer {
    background: #fff8e1;
    border: 0.0625rem solid #ffe082;
    border-radius: var(--brad-card);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #5d4037;
}

.individual-speech__ai-disclaimer p {
    margin: 0;
}

/* ── Body Content ────────────────────────────────────────────────────────────── */

.individual-speech__content {
    font-family: "Source Serif Pro", "Georgia", serif;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--c-navy);
    margin-bottom: 2.5rem;
}

.individual-speech__content p {
    margin: 0 0 1rem;
}

.individual-speech__content h2,
.individual-speech__content h3 {
    font-family: var(--f-ibm-plex-sans);
    font-weight: 600;
    color: var(--c-navy);
    margin: 1.75rem 0 0.5rem;
}

.individual-speech__content h2 {
    font-size: 1.3125rem;
}

.individual-speech__content h3 {
    font-size: 0.9375rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.individual-speech__content blockquote {
    border-left: 0.25rem solid #e0e0e3;
    margin: 1.5rem 0;
    padding-left: 1.25rem;
    font-style: italic;
    color: #494949;
}

.individual-speech__content a {
    color: #266ec1;
}

/*
 * In-content button rows (Truman G. Madsen Joseph Smith Lectures).
 *
 * The eight Madsen lecture speeches hardcode a
 * .single-speech__button-wrapper row of cross-links into their post_content --
 * once above the transcript and once below it -- using the classes that
 * pg-core-child styled in src/css/single-speech.css. Nothing else in the
 * database carries these classes, so scoping the rules to
 * .individual-speech__content leaves ordinary inline links in every other
 * speech on the plain anchor treatment above.
 *
 * Both the button formatting and the row layout are a straight port of
 * pg-core-child's rules (src/css/single-speech.css), down to its literal
 * #767676 / #c5c5c5 greys and its 400 / 640 / 1024px column steps, so these
 * rows read exactly as they did on the old theme. The greys stay literal
 * because the speeches palette has no token for either value, and pulling in
 * pg-core's --byu-grey-medium would add a dependency the theme is trying to
 * shed. Spacing comes from a 0.25rem margin on each button, as it did there,
 * not from a grid gap.
 */
.individual-speech__content .single-speech__button-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 0.75rem;
    justify-items: center;
    line-height: 1;
    margin: 1.5rem 0;
}

.individual-speech__content .single-speech__button {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.7rem;
    font-weight: 500;
    color: #767676;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    padding: 0.3rem 0.75rem;
    border: 1px solid #c5c5c5;
    border-radius: 3px;
    margin: 0.25rem;
}

/* Wins over .individual-speech__content a, which would otherwise recolor
   these. pg-core-child had no equivalent rule because its body copy did not
   colour anchors the way this theme's does. */
.individual-speech__content a.single-speech__button {
    color: #767676;
}

.individual-speech__content .single-speech__button:hover,
.individual-speech__content a.single-speech__button:focus-visible,
.individual-speech__content .single-speech__button--active {
    cursor: pointer;
    color: var(--byu-white);
    background-color: #767676;
    border-color: #767676;
}

@media (min-width: 400px) {

    .individual-speech__content .single-speech__button-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 640px) {

    .individual-speech__content .single-speech__button-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {

    .individual-speech__content .single-speech__button-wrapper {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .individual-speech__content .single-speech__button:first-child {
        margin-left: 0;
    }

    .individual-speech__content .single-speech__button:last-child {
        margin-right: 0;
    }
}

/*
 * YouTube / oEmbed aspect-ratio wrapper.
 *
 * wp-block-library's styles may not load in a block theme, so an embed in the
 * transcript gets its height from the iframe alone. That collapses the figure to
 * nothing whenever the iframe is hidden -- which is exactly what the cookie
 * disclaimer does when a visitor has declined advertising cookies, leaving the
 * disclaimer (or the play facade that precedes it) with a zero-height box to fill
 * and nothing visible on the page. Mirrors the same block in
 * parts/individual-blog-post/individual-blog-post.css, where blog posts have had
 * these rules all along.
 */
.individual-speech__content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
    position: relative;
}

.individual-speech__content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
    content: "";
    display: block;
}

.individual-speech__content .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
    padding-top: 56.25%;
}

.individual-speech__content .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
    padding-top: 75%;
}

.individual-speech__content .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before {
    padding-top: 42.857%;
}

.individual-speech__content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper iframe,
.individual-speech__content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.individual-speech__footnote-ref {
    color: #266ec1;
    font-size: 0.65em;
    vertical-align: super;
    text-decoration: none;
    font-family: var(--f-ibm-plex-sans);
    font-weight: 600;
}

.individual-speech__footnote-ref:hover {
    text-decoration: underline;
}

.individual-speech__unavailable {
    color: #747474;
    font-style: italic;
}

/* ── Notes (static fallback) ─────────────────────────────────────────────────────
   Old-school bottom-of-page notes, shown only when a post has notes but no
   clickable footnote refs to open the drawer. */

.individual-speech__notes-static {
    margin: 2.5rem 0;
    padding-top: 1.5rem;
    border-top: 0.0625rem solid #e0e0e3;
}

.individual-speech__notes-static-body {
    overflow-wrap: anywhere;
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--c-navy);
}

.individual-speech__notes-static-body p,
.individual-speech__notes-static-body li {
    margin-bottom: 0.75rem;
}

.individual-speech__notes-static-body a {
    overflow-wrap: anywhere;
    color: #266ec1;
}

/* ── Speaker Blurb ───────────────────────────────────────────────────────────── */

/* Blurb text only — this page carries no speaker portrait; the linked byline
   under the title identifies the speakers instead. */
.individual-speech__blurb {
    margin-bottom: 2rem;
}

.individual-speech__blurb-text {
    font-family: "Source Serif Pro", "Georgia", serif;
    font-style: italic;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #494949;
    margin: 0;
}

/* ── Related Topics ──────────────────────────────────────────────────────────── */

.individual-speech__topics {
    margin-bottom: 2rem;
}

.individual-speech__section-heading {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-navy);
    margin: 0 0 0.75rem;
}

.individual-speech__topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.individual-speech__topic-tag {
    display: inline-block;
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: #266ec1;
    background: #e5e5e5;
    border-radius: 0.188rem;
    padding: 0.25rem 0.625rem;
    text-decoration: none;
    transition: background 0.15s;
}

.individual-speech__topic-tag:hover {
    background: #d5d5d8;
}

/* ── Related Speeches ────────────────────────────────────────────────────────── */

.individual-speech__related {
    margin-bottom: 2rem;
}

.individual-speech__related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

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

.individual-speech__related-card {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: #f4f4f6;
    border: 0.0625rem solid #e0e0e3;
    border-radius: var(--brad-card);
    transition: box-shadow 0.15s;
}

.individual-speech__related-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.individual-speech__related-title-link {
    text-decoration: none;
    color: inherit;
}

.individual-speech__related-title-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.individual-speech__related-thumb {
    width: 96px;
    height: 124px;
    object-fit: cover;
    object-position: top;
    border-radius: var(--brad-button-small);
    flex-shrink: 0;
}

/* Multi-speaker (2-4): the same 96x124 box, split into a 2x2 grid. */
.individual-speech__related-thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 96px;
    height: 124px;
    border-radius: var(--brad-button-small);
    overflow: hidden;
    flex-shrink: 0;
}

.individual-speech__related-thumbs .individual-speech__related-thumb {
    width: 100%;
    height: 100%;
    /* The grid owns the rounding; square the cells so they butt together. */
    border-radius: 0;
    object-position: center 25%;
}

.individual-speech__related-thumbs-filler {
    background-color: var(--c-speaker-filler, #7D8B9C);
    /* Podium artwork over the slate-blue fill, anchored to the cell's bottom edge.
       The artwork carries transparent headroom above the mic, so scaling it past
       the cell's height crops empty space rather than the podium. */
    background-image: url('../../assets/images/podium.webp');
    background-repeat: no-repeat;
    background-position: bottom center;
    /* Width of the whole GRID, not of this cell — see the --3 rule below. */
    background-size: 100% auto;
}

/* 3 speakers: this leftover cell is the bottom-RIGHT one and only half the
   grid's width, so `100% auto` would draw the podium at half the size it
   gets in the 2-speaker strip. Scale to the full grid width (200% of the
   cell) and anchor right, so the podium renders at a consistent size and
   its left portion is cropped by the photo cell beside it instead. */
.individual-speech__related-thumbs--3 .individual-speech__related-thumbs-filler {
    background-size: 200% auto;
    background-position: right bottom;
}

/* A speaker with no portrait: one cell, in that speaker's own position. Kept off
   the -filler class so the --2 bottom-row stretch below never applies to it. */
.individual-speech__related-thumbs-gap {
    background-color: var(--c-speaker-filler, #7D8B9C);
}

/* 2 speakers: photos take the top row, the filler spans the whole bottom row. */
.individual-speech__related-thumbs--2 .individual-speech__related-thumbs-filler {
    grid-column: 1 / -1;
}

.individual-speech__related-thumb-placeholder {
    width: 96px;
    height: 124px;
    background: #e5e5e5;
    border-radius: var(--brad-button-small);
    flex-shrink: 0;
}

.individual-speech__related-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Byline container. The single-line truncation moved here from the name itself:
   with several names it is the whole list that must stay on one line, not each
   name individually, so the card keeps its height. */
.individual-speech__related-speakers {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    max-width: 100%;
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: #266ec1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 0.375rem;
}

.individual-speech__related-speaker {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: #266ec1;
    text-decoration: none;
}

.individual-speech__related-speaker:hover {
    text-decoration: underline;
}

.individual-speech__related-title {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-navy);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.individual-speech__related-date {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    color: #747474;
}

/* ── Notes Drawer ────────────────────────────────────────────────────────────── */

.individual-speech__notes-drawer {
    position: fixed;
    top: 50%;
    right: 1.5rem;
    left: auto;
    width: 50%;
    max-width: 40rem;
    max-height: 50vh;
    background: #fff;
    z-index: 301;
    display: flex;
    flex-direction: column;
    border: 0.0625rem solid #e0e0e3;
    border-radius: 0.75rem;
    transform: translateX(calc(100% + 2rem)) translateY(-50%);

    /* The transform alone can't hide the drawer once the wide-screen rule below
       anchors it on both sides, so the closed state is hidden outright and the
       visibility flip is delayed until the slide-out finishes. */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.3s;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

.individual-speech__notes-drawer.is-open {
    transform: translateX(0) translateY(-50%);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s;
}

/* On wide screens, sit the card in the empty zone to the right of the
   left-anchored text column, with a 2rem gap from the content's right edge
   (content right edge = the container's margin-left + its 46rem max-width). */
@media (min-width: 72rem) {
    .individual-speech__notes-drawer {
        left: calc(max(5%, (100% - 1000px) / 2) + 46rem + 2rem);
        width: auto;
    }
}

.individual-speech__notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 0.0625rem solid #e0e0e3;
    flex-shrink: 0;
}

.individual-speech__notes-title {
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-navy);
    margin: 0;
}

.individual-speech__notes-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.375rem;
    cursor: pointer;
    color: var(--c-navy);
    border-radius: var(--brad-button-small);
    transition: background 0.1s;
}

.individual-speech__notes-close:hover {
    background: #f0f0f2;
}

/* Notes are citation-heavy and routinely contain bare URLs, which are a
   single unbroken word wider than this box. Without a break opportunity the
   content overflows horizontally, and because overflow-y is auto here the
   spec computes the visible overflow-x to auto too, producing a sideways
   scrollbar. "anywhere" breaks only when needed and lets the box shrink to
   its container as a flex item. */
.individual-speech__notes-body {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    padding: 1.25rem 1.5rem;
    font-family: var(--f-ibm-plex-sans);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--c-navy);
    -webkit-overflow-scrolling: touch;
}

.individual-speech__notes-body p,
.individual-speech__notes-body li {
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    border-left: 0.1875rem solid transparent;
}

.individual-speech__notes-body a {
    overflow-wrap: anywhere;
    color: #266ec1;
}

/* Persistent light-blue line beside the note whose footnote was clicked */
.individual-speech__notes-body .is-active-note {
    border-left-color: #6aafe6;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* The offset moves back off the section here; the 1rem gutter below is the
       whole inset at this width. */
    .individual-speech {
        padding-left: 0;
        padding-right: 0;
    }

    .individual-speech__container {
        max-width: 100%;
        padding: 0 1rem;
    }

    .individual-speech__title {
        font-size: 1.5rem;
    }

    .individual-speech__audio-player {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .individual-speech__audio-timeline-wrap {
        flex-basis: 100%;
        order: 5;
    }

    .individual-speech__audio-speed {
        margin-left: auto;
    }

    .individual-speech__audio-download {
        margin-left: 0.75rem;
        margin-right: 0.5rem;
    }

    .individual-speech__notes-drawer {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-width: none;
    }
}

/* ── Search-term highlight ─────────────────────────────────────────────────────
 * The .ep-highlight base style otherwise only loads on the search-results part,
 * which isn't enqueued here, so it must be (re)declared for the speech body.
 */
.individual-speech__content .ep-highlight {
    background-color: rgba(255, 253, 205, 1);
    font-style: inherit;
    padding: 0;
    color: inherit;
}

.individual-speech__content .ep-highlight--active {
    animation: pulse-highlight 2s ease-in-out;
}

@keyframes pulse-highlight {
    0%,
    100% {
        background-color: rgba(255, 253, 205, 1);
    }

    50% {
        background-color: rgba(255, 215, 0, 0.6);
    }
}