/*
 * Project-specific CSS. Keep this small — Bootstrap 5 utilities should do
 * most of the work. Only add rules here for things Bootstrap doesn't express
 * cleanly (brand colors, the navbar background, wordmark sizing, etc.).
 */

:root {
    --igc-navbar-bg: #ffffff;
}

/* Plain white header (the space-photo background is retired), dark text,
   nav items justified across the full width, slightly larger type. */
.igc-navbar {
    background-color: var(--igc-navbar-bg);
    border-bottom: 1px solid #dee2e6;
}
.igc-navbar .nav-link {
    font-size: 1.1rem;
    color: #212529;
}
.igc-navbar .nav-link:hover,
.igc-navbar .nav-link:focus {
    color: #1e407c; /* PSU navy, matches the wordmark */
}
.igc-navbar .nav-link.active {
    color: #1e407c;
    font-weight: 600;
}
.igc-navbar .nav-link.disabled {
    color: #adb5bd;
}

/* Splash video on the home page — matches Hugo's 75vh video header.
   Adapted from https://startbootstrap.com/snippets/video-header so the
   video covers the full block and the overlay sits centered on top. */
.igc-splash {
    position: relative;
    width: 100%;
    height: 75vh;
    min-height: 25rem;
    overflow: hidden;
    background-color: #000;
}
.igc-splash video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}
.igc-splash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    /* Slight darkening so the title reads cleanly on a bright video frame. */
    background-color: rgba(0, 0, 0, 0.35);
}

/* Hide the video on narrow screens (matches the Hugo CSS source) — mobile
   devices often don't autoplay; the overlay title still reads well against
   the dark fallback background. */
@media (max-width: 767.98px) {
    .igc-splash video {
        display: none;
    }
}

/* Light footer, mirroring the header: white, top border, dark text. */
.igc-footer {
    background-color: #fff;
    border-top: 1px solid #dee2e6;
    color: #495057;
}
.igc-footer a {
    color: #1e407c; /* PSU navy, matches the header links */
}

/* Sponsor strip: a navy band inside the light footer, because three of the
   sponsor lockups (ECoS, Downsbrough, SVP Research) are white-text artwork
   that vanishes on a light background — and inverting official PSU marks
   would wreck their colors. */
.igc-sponsor-band {
    background-color: #1e407c;
}
.igc-sponsor-logo {
    height: 45px;
    max-width: 100%;
    object-fit: contain;
}

.igc-person-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.igc-person-thumb-placeholder {
    width: 100px;
    height: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #dee2e6;
    color: #6c757d;
    font-size: 0.8rem;
    border-radius: 0.375rem;
}

/* Fixed-height card image used on every card grid (news, events, projects,
   reference lists). ``contain`` rather than ``cover``: the imagery mixes
   portraits, posters, and logos, and cover-cropping was cutting faces off
   (a portrait photo in a landscape slot keeps only its center band). The
   whole image now always shows, letterboxed on a neutral backdrop. */
.igc-card-image {
    height: 200px;
    object-fit: contain;
    background-color: #f8f9fa;
    padding: 0.25rem;
}

/* Fixed aspect-ratio for carousel slides so the Bootstrap component doesn't
   reflow to each image's natural size as it cycles. */
/* Slide images display at their native aspect ratio at a fixed height —
   no cropping. Width is computed from the image's own dimensions. */
.igc-carousel-img {
    height: 420px;
    width: auto;
    /* Guard against very-wide panoramic images starving the text column. */
    max-width: 60%;
    object-fit: contain;
    flex-shrink: 0;
}

/* Home-page carousels (news + topics) mix slides with and without images.
   Pin the carousel-item to an exact height so the page doesn't jump as the
   carousel cycles, and lay the slide out as a flex row (stacked on mobile)
   so the image keeps its natural aspect ratio while the text fills the
   rest of the horizontal space. */
.igc-home-carousel .carousel-item {
    height: 420px;
}
.igc-home-carousel .igc-carousel-slide {
    display: flex;
    flex-direction: column;
    height: 100%;
}
@media (min-width: 768px) {
    .igc-home-carousel .igc-carousel-slide {
        flex-direction: row;
    }
}
.igc-home-carousel .igc-carousel-body {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}