/*
 * icg runtime hotfixes.
 *
 * Loaded AFTER main.css and post.css, so equal-specificity rules here win.
 *
 * NOTE: the Montserrat @font-face overrides that were briefly added here
 * (500 Medium / 600 SemiBold / 700 Bold) were removed on request — the extra
 * faces made the typography look too bold. main.css's original
 * 300/400/600/900 mapping is kept untouched.
 */

/* Blunt safety net against page-wide horizontal scroll. */
body {
    overflow-x: hidden;
}

/*
 * Landing intro video: the markup wraps it in a height:0/padding-bottom:56.25%
 * box, but the <video> is not absolutely positioned, so it overflows the box
 * (the width="100%" attribute is invalid and ignored). Fill the box instead.
 */
.block-info video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Year links under the header. main.css keeps them on one line inside an
 * 84%-wide strip with overflow-x:auto. Keep the single row and hide the
 * scrollbar so it reads as a centered strip.
 */
.header__links {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge/IE */
}

.header__links::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/*
 * Do NOT center with justify-content: a centered flex row that overflows a
 * scroll container spills on BOTH sides, and the leading (left) chips land in
 * unreachable overflow — on iOS they cannot be swiped back into view. A
 * max-content width with auto margins centers the row while it fits and
 * anchors it to the left (fully scrollable) once it overflows, so all years
 * stay reachable on phones.
 */
.header__links .button-group {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    margin: 0 auto;
}

.header__links .button-group__item {
    margin: 0 4px;
}

.header__links .button-link {
    padding: 0.1875rem 1.25rem;
}

/*
 * The runtime wrapper is .event-page__content, while main.css only styles the
 * (never-rendered) .main-page__content. Restore the intended container
 * padding / full-bleed background for the landing sections.
 */
.event-page__content .block-info-container {
    margin: 0 -98px;
    padding: 80px 98px 100px;
    background-color: #fff;
}

.event-page__content .symposiums-container {
    margin: 0 -98px;
    padding: 40px 98px;
    background-color: #fff;
}

@media screen and (max-width: 1100px) {
    .event-page__content .block-info-container,
    .event-page__content .symposiums-container {
        margin: 0 -46px;
        padding-left: 46px;
        padding-right: 46px;
    }
}

@media screen and (max-width: 960px) {
    .event-page__content .block-info-container,
    .event-page__content .symposiums-container {
        margin: 0 -36px;
        padding-left: 36px;
        padding-right: 36px;
    }
}

@media screen and (max-width: 780px) {
    .event-page__content .block-info-container {
        margin: 0 -28px;
        padding: 28px 28px 35px;
    }

    .event-page__content .symposiums-container {
        margin: 0 -28px;
        padding: 20px 28px;
    }

    /* The nav bars are fixed 49.5rem wide and only hidden at <=670px. */
    .nav-bar ul {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 24px;
        row-gap: 8px;
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    .footer-nav-bar {
        width: 100%;
        padding: 24px 14px;
    }

    .footer-nav-bar__list-items {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 24px;
        row-gap: 8px;
    }

    /* Between 671px and 780px the partner row cannot wrap. */
    .partners__row {
        flex-wrap: wrap;
    }

    .header__links .button-group__item {
        margin: 0 3px;
    }

    .header__links .button-link {
        padding: 0.1875rem 0.75rem;
    }
}

@media screen and (max-width: 670px) {
    .event-page__content .block-info-container {
        margin: 0 -28px;
        padding: 28px 14px 35px;
    }

    .event-page__content .symposiums-container {
        margin: 0 -28px;
        padding: 20px 14px;
    }

    /* post.css re-shows the header social block at every width; hide it on phones. */
    .header__social-block {
        display: none;
    }

    .header__links .button-group__item {
        margin: 0 2px;
    }

    .header__links .button-link {
        padding: 0.1875rem 0.5rem;
    }

    /* Keep clear space for the absolute speaker portrait in program rows. */
    .program__photo ~ .program__title {
        padding-left: 70px;
    }

    /* Long copyright line is clipped by the side panel. */
    .sidepanel__footer {
        right: 28px;
        white-space: normal;
    }
}