/* =====================================================
   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 section's text painted a highlight
       the section's full width. WebKit skips gap painting inside flex containers.
       Children are stacked with padding and no vertical margins, so nothing that
       margin collapsing was doing is lost. 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;
    max-width: 998px;
    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, #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. */
.recent-speeches__card-portraits--3 .recent-speeches__card-portraits-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. */
.recent-speeches__card-portraits-gap {
    background-color: var(--c-speaker-filler, #7D8B9C);
}

/* 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;
    /* Single line — a long speaker name must not grow the card */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -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;
    margin: .5rem 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 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* =============================
   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;
    }
}