/* =====================================================
   Recent Speeches
   - Desktop (base, >1024px): horizontal free-scroll slider (3 cards per view),
     overlay arrows step one set of 3, pagination dots below.
   - Tablet (<=1024px): 2-column stacked grid with a "Load More" button.
   - Mobile (<=768px): single-column stacked grid with a full-width "Load More".
   ===================================================== */

/* =============================
   General / Structure
   ============================= */

/* Main container and layout */
.recent-speeches {
    width: 100%;
    padding: 1.5rem 0 3rem;
    background: var(--c-white);

    /* Flex, for selection painting rather than for layout. WebKit fills the gaps
       between the blocks a selection spans at the width of their nearest common
       ancestor block, so a drag through this page's text painted a highlight the
       full width of this wrapper rather than of the text column. WebKit skips gap
       painting inside flex containers. The child sets width/box-sizing explicitly
       because its auto margins would otherwise opt it out of stretching. See
       .individual-speech for the measured case. */
    display: flex;
    flex-direction: column;
}

/* width + box-sizing, not the block default: the section is a flex column,
   and auto cross-axis margins switch off align-self: stretch, so this
   collapsed to fit-content. Full note in upcoming-speeches.css. */
.recent-speeches__container {
    width: 100%;
    box-sizing: border-box;

    /* Tracks the header's content edge. .top-half-header caps itself at
       calc(100% - 2 * (max(3%, 50% - 515px) + 1rem)) and carries no side
       padding, so its content starts at max(3%, 50% - 515px) + 1rem. This
       box does have 1rem of side padding, so its cap omits that 1rem and the
       two content edges land on the same pixel. Below 1025px both fall back
       to a flat 1.25rem inset. Change alongside header.css. */
    max-width: calc(100% - 2 * max(3%, 50% - 515px));
    margin: 0 auto;
    padding: 0 1rem;
}

/* Section header */
.recent-speeches__header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E0E0E3;
}

.recent-speeches__header {
    font-family: 'IBM Plex Sans Condensed', var(--f-ibm-plex-sans), sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #002d5d;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.26px;
    line-height: 27px;
}

/* Slider wrapper — positions the overlay arrows on desktop */
.recent-speeches__slider {
    position: relative;
}

/* Grid layout (desktop base): horizontal flex scroller */
.recent-speeches__grid {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* vertical breathing room so card shadows aren't clipped while scrolling */
    padding: 8px 0;
    margin-top: -8px;
    margin-bottom: calc(1rem - 8px);
    -webkit-overflow-scrolling: touch;
}

.recent-speeches__grid::-webkit-scrollbar {
    display: none;
}

/* Card structure — gray rounded box with a flush speaker image */
.recent-speeches__card {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f4f4f5;
    border: none;
    border-radius: var(--brad-button-medium, 0.375rem);
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    /* Exactly three cards per view (2 gaps of 0.625rem) on the desktop slider */
    flex: 0 0 calc((100% - 2 * 0.625rem) / 3);
}

.recent-speeches__card-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    text-decoration: none;
}

.recent-speeches__card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* All cards live in the scroll track on desktop (Load More hiding does not apply here) */
.recent-speeches__card--hidden {
    display: flex;
}

/* Final "View All Speeches" card — centered link, no image/content columns */
.recent-speeches__card--view-all {
    text-decoration: none;
}

/* Matches the regular cards' fixed content height so the box is the same height */
.recent-speeches__view-all-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 118px;
    text-align: center;
    font-family: 'IBM Plex Sans', var(--f-ibm-plex-sans), sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #266ec1;
    letter-spacing: -0.15px;
}

/* =============================
   Image (flush to the card's left/top/bottom edges)
   ============================= */
.recent-speeches__card-image {
    flex-shrink: 0;
    width: 103px;
    align-self: stretch;
    overflow: hidden;
    margin: -0.75rem 0 -0.75rem -0.75rem;
}

.recent-speeches__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* Multi-speaker (2-4): fill the image column with a 2x2 grid. A single speaker
   still renders a bare <img> and never hits these rules. */
.recent-speeches__card-portraits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
}

.recent-speeches__card-portraits .recent-speeches__card-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bias the crop upward so faces stay in frame in the short cells. */
    object-position: center 25%;
    display: block;
}

.recent-speeches__card-portraits-filler {
    background-color: var(--c-speaker-filler, #6395CB);
    /* Podium artwork over the blue field, 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. */
.recent-speeches__card-portraits--3 .recent-speeches__card-portraits-filler {
    background-size: 200% auto;
    background-position: right bottom;
}

/* 2 speakers: photos take the top row, the filler spans the whole bottom row. */
.recent-speeches__card-portraits--2 .recent-speeches__card-portraits-filler {
    grid-column: 1 / -1;
}

/* =============================
   Card Content Container
   ============================= */
.recent-speeches__card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Fixed, not a floor: with the name and title clamped every card's content
       column is the same height, so cards in a row/grid stay aligned */
    height: 118px;
    overflow: hidden;
}

/* =============================
   Name
   ============================= */
.recent-speeches__card-name {
    font-family: 'IBM Plex Sans', var(--f-ibm-plex-sans), sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #266ec1;
    margin: 0 0 0.25rem;
    /* 1.037 is tighter than the font's ascent + descent, so the clamp's
       overflow: hidden crops descenders (p, g, y). 1.25 gives them room. */
    line-height: 1.25;
    /* Up to three lines, so multi-speaker bylines are shown in full rather
       than silently cut after one. Three is a hard ceiling: the content column
       is a fixed 118px and 3 byline lines (45px) + a 1-line title (19px) + meta
       (12px) + media links (21px) + margins comes to 117px. Four lines does not
       fit under any combination. Past three, line-clamp ellipsises, so omitted
       names are visible as "…" instead of vanishing. */
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* =============================
   Speech Title
   ============================= */
/* The speaker name goes to that speaker's page. It sits above the card's own
   overlay link, which otherwise swallows every click and sends the reader to
   the speech instead — the same lift the media links below already need. */
.recent-speeches__card-name-link {
    color: inherit;
    text-decoration: none;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* Underline only — the name keeps its colour, so hovering does not restate the
   card's palette at the reader. */
.recent-speeches__card-name-link:hover,
.recent-speeches__card-name-link:focus-visible {
    text-decoration: underline;
}

.recent-speeches__card-title {
    font-family: 'IBM Plex Sans', var(--f-ibm-plex-sans), sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #002d5d;
    /* 6px, not 8px, on purpose. The content column is a fixed 118px and the
       stack lands ~2px over it, so flexbox shrinks the only shrinkable item —
       this title — from 2 x 18.75px to 36.66px. The clamp's overflow: hidden
       then shaves the descenders on the second line (the tail of a g or y).
       Giving those 2px back means the title gets its full 37.5px and the ink
       clears the clip edge by 0.75px. Verified: the media row is not pushed out
       and the card stays 142px.

       Do NOT "fix" this by raising line-height — the box cannot grow, so taller
       lines inside it clip MORE, not less (1.3 measured 1.84px of clipping). */
    margin: calc(.5rem - 2px) 0 0.25rem;
    padding-right: 10px;
    /* Room for descenders — the clamp's overflow: hidden would crop them at 1.037 */
    line-height: 1.25;
    letter-spacing: -0.15px;
    /* Truncate after two lines so a long title can't stretch the card and
       push the meta/media rows out of alignment with its neighbors. Drops to
       one line when the byline has wrapped — see the modifier below. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* A wrapped byline (2 or 3 lines) leaves room for only one line of title
   inside the fixed 118px column, so the title clamp tightens to 1. Applied by
   recent-speeches.js, which measures the byline's rendered line count — CSS
   cannot count lines, and the count depends on the text column's width, so it
   has to be measured rather than guessed from the number of speakers.
   Snapping to exactly one line keeps line-clamp's ellipsis correct; letting the
   title shrink to a part-line instead would clip it mid-letter with no "…". */
.recent-speeches__card--byline-wrapped .recent-speeches__card-title {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

/* Three full lines of speaker names is the only case that also squeezes the
   date/event-type row. A 2-line date row fits fine otherwise — measured, the
   media links' auto margin absorbs it — so this deliberately does NOT apply to
   the 2-line case, which would truncate "September 2026 | University
   Conference" on cards that have the room. */
.recent-speeches__card--byline-crowded .recent-speeches__card-meta {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =============================
   Speech Info (date, type) — sits directly under the title
   ============================= */
.recent-speeches__card-meta {
    font-family: 'IBM Plex Sans', var(--f-ibm-plex-sans), sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #747474;
    margin-top: 0.25rem;
    margin-bottom: 0;
    line-height: 1.037;
}

/* =============================
   Media Links (video, audio, text) — pinned to the bottom of the card
   ============================= */

/* Media links container */
.recent-speeches__card-media-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
    line-height: 1.037;
}

/* Media link separators */
.recent-speeches__media-separator {
    color: #c9c9c9;
    font-family: 'IBM Plex Sans', var(--f-ibm-plex-sans), sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 0 0.35rem;
}

/* Standard media links */
.recent-speeches__media-link {
    font-family: 'IBM Plex Sans', var(--f-ibm-plex-sans), sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #266ec1;
    text-decoration: none;
    position: relative;
    z-index: 2;
    line-height: 1.037;
}

.recent-speeches__media-link:hover {
    text-decoration: underline;
}

.recent-speeches__media-link--unavailable {
    color: #c9c9c9;
    cursor: default;
    pointer-events: none;
}

.recent-speeches__media-link--unavailable:hover {
    text-decoration: none;
}

/* =============================
   Slider arrows (desktop only)
   ============================= */
.recent-speeches__arrow {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 34px;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(107, 107, 107, 0.85);
    transition: opacity 0.2s;
}

.recent-speeches__arrow:hover {
    opacity: 0.85;
}

.recent-speeches__arrow--prev {
    left: -12px;
}

.recent-speeches__arrow--next {
    right: -12px;
}

.recent-speeches__arrow--disabled {
    visibility: hidden;
    pointer-events: none;
}

/* =============================
   Pagination dots (desktop only)
   ============================= */
.recent-speeches__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.recent-speeches__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #c9c9c9;
    cursor: pointer;
    transition: background 0.2s, width 0.2s;
}

.recent-speeches__dot--active {
    background: var(--c-navy, #002d5d);
    width: 20px;
    border-radius: 4px;
}

/* =============================
   Load More Button
   ============================= */
/* Hidden by default (desktop base) — arrows/dots replace Load More there */
.recent-speeches__load-more-wrapper {
    display: none;
    justify-content: center;
}

.recent-speeches__load-more {
    padding: 0 0 0.125rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid #266ec1;
    color: #266ec1;
    font-family: 'IBM Plex Sans', var(--f-ibm-plex-sans), sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 22px;
}

.recent-speeches__load-more:hover {
    border-bottom-color: transparent;
}

.recent-speeches__load-more--hidden {
    display: none;
}

/* =============================
   Responsive Layouts
   ============================= */

/* Tablet (<=1024px) — 2 column grid; Load More renders as a blue pill,
   capped at one card's width, positioned via the --desktop wrapper. */
@media (max-width: 1024px) {
    .recent-speeches__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        overflow-x: visible;
    }

    .recent-speeches__card {
        flex: initial;
    }

    .recent-speeches__card--hidden {
        display: none;
    }

    .recent-speeches__arrow {
        display: none;
    }

    .recent-speeches__dots {
        display: none;
    }

    .recent-speeches__load-more {
        width: 100%;
        max-width: calc((100% - 1rem) / 2);
        background-color: var(--c-blue-lighter);
        color: var(--c-navy);
        border: none;
        border-radius: var(--brad-button-large);
        padding: 0.875rem 1rem;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: normal;
        transition: opacity 0.2s;
    }

    .recent-speeches__load-more:hover {
        opacity: 0.8;
        border: none;
    }

    .recent-speeches__load-more-wrapper--desktop {
        display: flex;
        margin-top: 1.5rem;
    }
}

/* Mobile (<=768px) — single column + full-width Load More */
@media (max-width: 768px) {
    .recent-speeches {
        padding: 2rem 0;
    }

    .recent-speeches__grid {
        grid-template-columns: 1fr;
    }

    .recent-speeches__load-more {
        max-width: none;
    }

    /* Show mobile load more button, hide the tablet one */
    .recent-speeches__load-more-wrapper--mobile {
        display: flex;
        width: 100%;
        margin-top: 1.5rem;
    }

    .recent-speeches__load-more-wrapper--desktop {
        display: none;
    }
}

/* Below the desktop breakpoint the header drops to a flat 1.25rem inset, so
   this does too: full width, with the inset carried entirely by the padding.
   This runs all the way down, so the section stays flush with the header on
   phones as well as tablets. Side longhands rather than the shorthand, so each
   section keeps whatever top/bottom padding its own mobile rules set. */
@media (max-width: 1024px) {

    .recent-speeches__container {
        max-width: 100%;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}