/**
 * Upcoming Speeches
  - Desktop (>=992px): horizontal free-scroll slider (3 cards per view),
     overlay arrows step one set of 3, pagination dots below.
   - Tablet / mobile (<=991px): stacked grid with a "Load More" button.
 */

.upcoming-speeches {
    width: 100%;
    padding: 1.5rem 0 3rem;
    background: var(--c-white);
}

/* width + box-sizing, not the block default. The section is a flex column
   (see its selection-painting note), and in a flex container align-self:
   stretch is switched off when either cross-axis margin is auto. The auto
   margins below therefore left this item sized to fit-content rather than
   filled and then capped, collapsing the section to the width of its widest
   content. An explicit cross size restores the old block behaviour and gives
   the auto margins real free space to centre within. box-sizing keeps the
   horizontal padding inside that width instead of adding to it — this theme
   has no global border-box reset. */
.upcoming-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;
}

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

.upcoming-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;
}

.upcoming-speeches__calendar-icon {
    transition: opacity 0.2s;
}

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

/* Grid Layout */
.upcoming-speeches__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.upcoming-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;
}

/* Card overlay link - covers entire card but allows calendar link to be clicked */
.upcoming-speeches__card-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    text-decoration: none;
}

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

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

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

/* Matches the regular cards' content min-height so the box is the same height */
.upcoming-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;
}

.upcoming-speeches__card-image {
    flex-shrink: 0;
    width: 103px;
    align-self: stretch;
    overflow: hidden;
    margin: -0.75rem 0 -0.75rem -0.75rem;
}

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

/* A speaker who has not been named yet has no portrait, and the theme ships no
   stock headshot to stand in for one. The column is kept and filled flat rather
   than removed so the card keeps the same geometry as its neighbours — the
   desktop slider measures a real card's width to size its scroll step, so a
   narrower card there would put the arrows out of step with the cards. */
.upcoming-speeches__card-image--tba {
    background: #e4e4e7;
}

.upcoming-speeches__card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Hard height, matching .recent-speeches__card-content, so every card in a
       grid row or the desktop scroll track is the same size however long the
       name and position run. A min-height here let the worst case (both wrapping
       to two lines) push the card to ~128px in the 769-991px two-column grid and
       at the narrowest one-column widths. The date margin below is tightened to
       buy back the 10px that case needs, and the clamps bound each row. */
    height: 118px;
}

.upcoming-speeches__card-date {
    font-family: var(--ibm-plex-sans-ssm);
    font-size: 12px;
    font-weight: 500;
    color: #747474;
    /* Tightened from 0.5rem top and bottom: the worst-case stack (two-line name
       over a two-line position) needs the 10px this frees to fit inside the
       118px above. Nothing sits above the date, so it loses no separation. */
    margin: 0 0 0.375rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.upcoming-speeches__card-name {
    font-family: var(--ibm-plex-sans-ssm);
    font-size: 15px;
    font-weight: 600;
    color: #002d5d;
    margin: 0 0 0.375rem;
    /* 100% leaves no room for descenders (p, g, y) once the clamp's
       overflow: hidden crops the line box */
    line-height: 1.3;
    /* Truncate after two lines so a long name can't stretch the card and
       push the position/calendar 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;
}

.upcoming-speeches__card-position {
    font-family: var(--ibm-plex-sans-ssm);
    font-size: 12px;
    font-weight: 400;
    color: #747474;
    margin: 0 0 0.375rem;
    line-height: 1.3;
    /* Speaker positions run long — cap at two lines like the name above */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    /* No flex: 1 here, and an explicit two-line ceiling. Stretching this box to
       fill the column left it taller than the two lines the clamp ellipsised, so
       overflow: hidden no longer cropped on a line boundary and the ascenders of
       a third line showed through below the ellipsis. The calendar link's
       margin-top: auto already pins the bottom row, so nothing needs to grow.

       Keep the multiplier in step with line-height above: a ceiling shorter than
       two line boxes crops the bottom of the second line, which shaves the very
       descenders the 1.3 line-height exists to make room for. */
    max-height: calc(2 * 1.3em);
}

/* Translation cards follow the recent-speeches hierarchy instead: the speaker
   is a small blue line above a large navy title, rather than the other way
   round. Same type as .recent-speeches__card-name / -title, so the two sections
   read as one family. English upcoming cards keep their own arrangement, where
   the speaker is the headline and the date and calendar link do the work. */
/* The speaker name is the one thing on a translation card that does lead
   somewhere: that speaker's page. Matches the recent-speeches treatment. */
.upcoming-speeches__card-name-link {
    color: inherit;
    text-decoration: none;
}

.upcoming-speeches__card-name-link:hover,
.upcoming-speeches__card-name-link:focus-visible {
    text-decoration: underline;
}

/* A translation card is not clickable — there is no speech to open yet, so no
   overlay link is rendered. Drop the affordances that promise one: the lift on
   hover and the pointer cursor both say "click me" about a card that does
   nothing. English upcoming cards keep theirs; they link to the event. */
.upcoming-speeches__card--translation {
    cursor: default;
    transition: none;
}

.upcoming-speeches__card--translation:hover {
    box-shadow: none;
}

.upcoming-speeches__card--translation .upcoming-speeches__card-name {
    font-size: 12px;
    font-weight: 500;
    color: #266ec1;
    margin: 0 0 0.25rem;
}

.upcoming-speeches__card--translation .upcoming-speeches__card-title {
    font-size: 15px;
    font-weight: 600;
    color: #002d5d;
    /* No longer pinned to the bottom: with the position gone it follows the
       speaker directly. Same margins as .recent-speeches__card-title, which
       clears the speaker by 0.5rem on top of the name's own 0.25rem — the two
       do not collapse inside the flex column, so the gap is 0.75rem. */
    margin: 0.5rem 0 0.25rem;
    padding-right: 10px;
    letter-spacing: -0.15px;
}

/* Speech title — translations only, sits where the calendar link does on
   English cards, so both variants keep the same card rhythm. */
.upcoming-speeches__card-title {
    font-family: var(--ibm-plex-sans-ssm);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-navy, #002E5D);
    margin: 0;
    margin-top: auto;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Calendar link with pointer-events to click through overlay */
.upcoming-speeches__card-calendar-link {
    display: inline-flex;
    align-items: center;
    font-family: var(--ibm-plex-sans-ssm);
    font-size: 12px;
    font-weight: 600;
    color: #266EC1;
    text-decoration: none;
    transition: color 0.2s;
    margin-top: auto;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.upcoming-speeches__card-calendar-link:hover {
    color: #003d82;
}

/* =============================
   Slider arrows (desktop only)
   ============================= */
.upcoming-speeches__arrow {
    display: none;
    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;
}

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

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

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


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

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

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

.upcoming-speeches__load-more-wrapper {
    display: flex;
    justify-content: center;
}

.upcoming-speeches__load-more-wrapper--mobile {
    display: none;
}

.upcoming-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;
}

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

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

/* 3 columns layout - Desktop */
@media (min-width: 992px) {
    .upcoming-speeches__container {
        padding: 0 1rem;
    }

    /* Grid becomes a horizontal scroll track */
    .upcoming-speeches__grid {
        display: flex;
        grid-template-columns: none;
        gap: 0.625rem;
        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;
    }

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

    /* Exactly three cards per view (2 gaps of 0.625rem) */
    .upcoming-speeches__card {
        flex: 0 0 calc((100% - 2 * 0.625rem) / 3);
    }

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

    /* Show arrows + dots, hide Load More */
    .upcoming-speeches__arrow {
        display: flex;
    }

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

    .upcoming-speeches__dots {
        display: flex;
    }

    .upcoming-speeches__load-more-wrapper {
        display: none;
    }
}

@media (max-width: 991px) {
    .upcoming-speeches__load-more {
        width: 100%;
        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;
    }

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

/* 2 columns layout - Tablet */
@media (min-width: 769px) and (max-width: 991px) {
    .upcoming-speeches__container {
        padding: 0 1rem;
    }

    .upcoming-speeches__grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .upcoming-speeches__load-more-wrapper--desktop {
        margin-top: 1.5rem;
    }

    /* One card = (row width minus the 1rem grid gap) / 2 */
    .upcoming-speeches__load-more {
        max-width: calc((100% - 1rem) / 2);
    }
}

/* Mobile layout */
@media (max-width: 768px) {
    .upcoming-speeches {
        padding: 2rem 0;
    }

    .upcoming-speeches__container {
        padding: 0 1rem;
    }

    .upcoming-speeches__grid {
        grid-template-columns: 1fr;
    }
    
    .upcoming-speeches__load-more-wrapper--mobile {
        display: flex;
        width: 100%;
        margin-top: 1.5rem;
    }

    .upcoming-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) {

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