/**
 * 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);

    /* 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
   (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;
    max-width: 998px;
    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;
}

.upcoming-speeches__card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Floor matching the view-all card. Unlike recent-speeches this stays a
       min-height: the date/name/position/calendar stack needs ~128px when the
       name and position both run to two lines, and a hard 118px would clip the
       calendar link. The clamps below are what actually bound the height. */
    min-height: 118px;
}

.upcoming-speeches__card-date {
    font-family: var(--ibm-plex-sans-ssm);
    font-size: 12px;
    font-weight: 500;
    color: #747474;
    margin: 0.5rem 0;
    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.5rem;
    /* 100% leaves no room for descenders (p, g, y) once the clamp's
       overflow: hidden crops the line box */
    line-height: 1.25;
    /* 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.5rem;
    flex: 1;
    line-height: 1.25;
    /* 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;
}

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