.rvt-row {
    display: flex;
}

.rvt-cols {
    flex: 1;
    display: flex;
    gap: 0rem;
}

.rvt-card {
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: stretch;
}

.rvt-cols-x-md-spacing {
    margin-bottom: 1rem;
}

.rvt-billboard__body {
    flex-basis: 33%;
    flex-grow: 1;
    padding-right: 0;
}

.video-container {
    width: 90%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

.video {
    width: 100%;
    height: 100%;
}

.feature-slot {
    margin-top: 2rem;
    margin-right: 0rem;
    float: right;
    width: 24rem;
    margin-bottom: 2rem;
    margin-left: 2rem;
}

.toggle-content {
    display: none;
}

.toggle-checkbox:checked+.toggle-content {
    display: block;
}

.toggle-checkbox {
    display: none;
}

.rvt-hero__eyebrow {
    font-size: 0.870rem;
    font-weight: 500;
    color: #900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.grid {
    padding: 1.5rem;
    border: 1px solid;
    border-color: #e2e7e9;
}

.carousel-container {
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    position: relative;
}

.carousel-wrapper {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.3s ease;
}

.slide {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
}

.carousel-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    align-items: center;
}

/* Responsive design for carousel*/
@media (max-width: 1200px) {
    .carousel-container {
        max-width: 850px;
    }
}

@media (max-width: 768px) {
    .carousel-container {
        max-width: 590px;
    }

    .carousel-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .slide-indicator {
        width: 100%;
        text-align: center;
        margin: 0.5rem 0;
    }
}

@media (max-width: 550px) {
    .feature-slot {
        margin-top: 2rem;
        margin-right: 0rem;
        float: center;
        width: 22rem;
        margin-bottom: 2rem;
        margin-left: 0rem;
    }

    /* "Cyberinfrastructure" can't wrap, and at billboard-title size it is wider
       than the content area on narrow phones; allow it to break instead of
       widening the whole page. */
    .rvt-billboard__title {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 450px) {
    .carousel-container {
        max-width: 320px;
    }

    .feature-slot {
        margin-top: 2rem;
        margin-right: 0rem;
        float: center;
        width: 22rem;
        margin-bottom: 2rem;
        margin-left: 0rem;
    }
}

/* Create student fellow cards inside accordion*/
.rvt-fellow-card {
    display: flex;
    height: 100%;
    align-items: stretch;
    height: 100%;
}

/* Hidden screen reader on curriculum fellow carousel*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0.5rem 0 1rem 0;
    line-height: 1.3;
}

p {
    margin: 0;
    line-height: 1.7;
    color: #555;
}

li {
    margin: 0;
    line-height: 1.7;
    color: #555;
}

/* ACI Program intro: description text + report card side by side. Uses flex
   instead of .feature-slot's float — floats kept causing layout issues here
   (ordering-sensitive, needed manual "clear" on whatever came after). Flex
   siblings don't have that problem: nothing after this block needs clearing. */
.ci-program-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem;
}

.ci-program-intro__text {
    flex: 1 1 20rem;
}

.ci-program-intro__text p {
    margin: 0;
}

.ci-program-intro__report {
    flex: 0 0 22rem;
    max-width: 100%;
}

@media (max-width: 700px) {
    .ci-program-intro__report {
        flex-basis: 100%;
    }
}

/* 2026 ACI Fellows Program Report card. No real cover thumbnail exists for
   the PDF, so this uses a document icon + title instead of a fabricated
   cover image. */
.ci-report-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e2e7e9;
    border-top: 0.35rem solid #900;
    border-radius: 0.5rem;
    padding: 1.5rem;
    background: #fff;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ci-report-card:hover,
.ci-report-card:focus {
    border-color: #900;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ci-report-card__icon {
    color: #900;
    margin-bottom: 1rem;
}

.ci-report-card__eyebrow {
    display: block;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #900;
    margin-bottom: 0.25rem;
}

.ci-report-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #182534;
}

.ci-report-card__cta {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #006298;
}

/* Page.php wraps every body section in Rivet's .rvt-container-lg, which has
   a constant 1.5rem side padding (confirmed in rivet-core's source) at every
   breakpoint. The hero carousel is meant to span that container edge-to-edge
   like it does on the v4 index page (which places it outside any padded
   wrapper), so cancel the padding here instead of restructuring Page.php,
   which every other ACI page also renders through. */
.rvt-container-lg #heroCarousel {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    width: calc(100% + 3rem);
}