/*
 * Images inside Bootstrap .container only — :where() keeps specificity at 0
 * so theme rules like .img-fluid or .work-container img still win when needed.
 */

:where(.container img) {
    width: 100%;
}

/* Navbar brand sits inside `.container`; full-bleed width breaks the flex row on WebKit (logo “centered”, toggler wrapped). */
:where(.navbar .container img) {
    width: auto;
    max-width: 100%;
}

/* Side cut: clear fixed `nav-sticky` bar on all public routes except `home` (see PHASE3_EXECUTION_PLAN.md). */
.site-main-below-sticky-header {
    margin-top: 80px;
}

/*
 * Home only: `layouts.app` does not apply `.site-main-below-sticky-header` on the `home` route.
 * Below Bootstrap `lg` (992px), hero must clear `#navbar` (measured ~106px in Chrome).
 */
.home-hero-offset-sticky-nav {
    margin-top: 106px;
}

/* Home hero Swiper: before JS runs, show first slide only (no horizontal stack). */
.home-hero-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
}

.home-hero-swiper .home-hero-swiper__pagination {
    bottom: 0.75rem;
}

/* Swiper default active dot uses --swiper-theme-color (#007aff); hero needs white on imagery. */
#home-hero-swiper {
    --swiper-pagination-color: #fff;
}

@media (min-width: 992px) {
    .home-hero-offset-sticky-nav {
        margin-top: 0;
    }
}

/* About: reduce space between hero and main body (.section default is 80px top). */
.section.about-page-content {
    padding-top: 40px;
}

.http-error-illustration {
    max-width: 100%;
    height: auto;
    max-height: min(80vh, 80vw);
    width: auto;
}

/* Portfolio item detail: rich summary (Filament RichEditor + optional video block). */
.portfolio-summary-content img {
    max-width: 100%;
    height: auto;
}

.portfolio-summary-content video {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.portfolio-summary-content .portfolio-summary-video {
    max-width: 100%;
}

.portfolio-summary-content .portfolio-summary-youtube {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    margin: 0.75rem 0;
}

.portfolio-summary-content .portfolio-summary-youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}