/* ========================================================================== PortfolioCarousel — 07 §11.8b The list scrolls and snaps with plain CSS — works with zero JavaScript (touch swipe, trackpad, mouse wheel). assets/js/portfolio-carousel.js only adds the prev/next buttons and the accessible position indicator on top. ========================================================================== */ .portfolio-carousel { position: relative; /* Confirmed on a real iPhone (Teo, 2026-08-04): .portfolio-carousel__list's own overflow-x:auto scrolls its content correctly, but flex/grid items can still report their max-content intrinsic width to WebKit's layout, inflating the LIST's own outer box past this wrapper — and every ancestor above it (this element included, until now) had overflow-x: visible, so nothing stopped that inflated width from reaching 's scrollWidth and dragging the whole page sideways on swipe. This is the actual containment boundary — overscroll-behavior-x: contain (on the list itself) stops boundary-scroll chaining, this stops the layout overflow chaining, and they fix different halves of the same bug. */ overflow-x: hidden; } .portfolio-carousel__list { display: flex; gap: var(--space-6); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-2); margin: 0; padding-inline-start: 0; list-style: none; } .portfolio-carousel__list:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); } .portfolio-carousel__item { flex: 0 0 85%; scroll-snap-align: start; } @media (min-width: 48rem) { .portfolio-carousel__item { flex-basis: calc((100% - var(--space-6)) / 2); } } @media (min-width: 64rem) { .portfolio-carousel__item { flex-basis: calc((100% - 2 * var(--space-6)) / 3); } } .portfolio-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin-top: var(--space-5); } .portfolio-carousel__arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--border-subtle); background-color: var(--surface-base); color: var(--text-strong); cursor: pointer; } .portfolio-carousel__arrow:hover:not(:disabled) { background-color: var(--surface-raised); } .portfolio-carousel__arrow:disabled { opacity: 0.4; cursor: default; } .portfolio-carousel__arrow:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); } .portfolio-carousel__position { margin: 0; font-size: var(--text-sm); color: var(--text-muted); min-width: 5rem; text-align: center; } @media (prefers-reduced-motion: reduce) { .portfolio-carousel__list { scroll-behavior: auto; } }