/* Portfolio slider: one horizontal editorial strip for the six projects. */

/* One horizontal editorial strip replaces six full-height project sections. */
.work--slider { padding-block: clamp(3.5rem, 6vw, 6rem); }
.work--slider > .container { max-width: 1280px; }
.work__heading { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-bottom: 2rem; text-align: center; }
.work__heading h2 { font-size: clamp(1.9rem, 3.2vw, 3.25rem); max-width: 24ch; text-wrap: balance; }
.work__heading p { margin-top: .8rem; font-size: .9375rem; color: var(--color-text-muted); }
.work__controls { display: flex; align-items: center; justify-content: center; gap: .65rem; flex-shrink: 0; }
.work__count { font-size: .8125rem; font-variant-numeric: tabular-nums; margin-right: 1rem; }
.work__count > span + span { color: var(--color-text-muted); }
.slider-button { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-strong); background: transparent; border-radius: 50%; transition: background-color 180ms, transform 140ms var(--ease-out); }
.slider-button--previous .icon { transform: rotate(180deg); }
.slider-button:disabled { opacity: .35; cursor: default; }
.slider-button:active:not(:disabled) { transform: scale(.96); }
.work__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: .35rem 0 1rem; }
.work__viewport::-webkit-scrollbar { display: none; }
.work__viewport:focus-visible { outline-offset: 7px; }
.work__slides { display: flex; gap: clamp(1rem, 2vw, 1.75rem); position: relative; }
.project-slide { flex: 0 0 72%; min-width: 0; scroll-snap-align: start; }
.work__slides::after { content: ''; flex: 0 0 calc(28% - clamp(1rem, 2vw, 1.75rem)); }
.project-slide__figure { position: relative; overflow: hidden; border-radius: 14px; background: var(--color-bg-elevated); aspect-ratio: 3/2; }
.project-slide__expand { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; text-decoration: none; }
.project-slide__expand:focus-visible { outline-offset: -6px; border-radius: 14px; }
.project-slide__image { display: block; width: 100%; height: 100%; }
.project-slide__image img { width: 100%; height: 100%; object-fit: contain; }
.project-slide__zoom { position: absolute; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .45rem .85rem; border-radius: 999px; background: #130d1ee8; color: #f4f0f8; font-size: .8125rem; transition: background-color 180ms, transform 180ms var(--ease-out); }
.project-slide__info { padding: 1.35rem .15rem .65rem; display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 1.25rem; }
.project-slide__info > div { min-width: 0; }
.project-slide__info h3 { font-size: clamp(1.3rem, 2vw, 1.9rem); }
.project-slide__info p { margin-top: .45rem; font-size: .875rem; color: var(--color-text-muted); }
.project-slide__visit { display: inline-flex; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem .95rem; align-items: center; text-decoration: none; font-size: .8125rem; flex-shrink: 0; border: 1px solid var(--color-border-strong); border-radius: 999px; transition: background-color 180ms, color 180ms, transform 140ms var(--ease-out); }
.project-slide__visit:active { transform: scale(.97); }
.project-slide__type { font-size: .75rem; color: var(--color-text-muted); }
.work__navigation { display: flex; flex-direction: column; align-items: center; gap: .85rem; margin-top: 1rem; }
.work__dots { display: flex; justify-content: center; gap: .5rem; width: 100%; }
.work__dot { position: relative; width: clamp(44px, 6vw, 80px); height: clamp(44px, 4.5vw, 58px); padding: 3px; border: 1px solid transparent; border-radius: 9px; background: none; opacity: .6; transition: opacity 180ms, border-color 180ms, transform 140ms var(--ease-out); }
.work__dot picture, .work__dot img { width: 100%; height: 100%; display: block; border-radius: 5px; object-fit: cover; }
.work__dot[aria-current] { border-color: var(--color-brand-light); opacity: 1; }
.work__dot:active { transform: scale(.96); }
.work__hint { font-size: .8125rem; color: var(--color-text-muted); text-align: center; }
@media (hover:hover) and (pointer:fine) {
 .slider-button:hover:not(:disabled) { background: var(--color-surface); }
 .project-slide__visit:hover { color: var(--color-brand-light); background: var(--color-surface); }
 .project-slide__expand:hover .project-slide__zoom { background: var(--color-brand-dark); transform: translateY(-2px); }
 .work__dot:hover { opacity: 1; }
}
@media (max-width:899px) {

 .project-slide { flex-basis: 88%; }
 .work__slides::after { flex-basis: calc(12% - 1rem); }
 .work__heading { flex-wrap: wrap; gap: 1.5rem; }
 .work__controls { margin-inline: auto; }
 .work__heading p { font-size: .875rem; }
 .project-slide__figure { aspect-ratio: 3/2; }
 .project-slide__info { align-items: flex-start; flex-direction: column; gap: .8rem; }
 .project-slide__zoom { right: .65rem; bottom: .65rem; padding: .4rem .7rem; }
 .project-slide__type { display: none; }
 .work__dots { gap: .25rem; }
 .work__navigation { justify-content: center; }
}

/* Enlarged portfolio: native top layer, original composition, no image cropping. */
html.project-viewer-open { overflow: hidden; }
.project-viewer {
 width: min(1760px, calc(100% - 2.5rem)); height: calc(100dvh - 2.5rem);
 max-width: none; max-height: none; margin: auto; padding: clamp(1rem, 2vw, 1.75rem);
 color: var(--color-text); background: #100c16; border: 1px solid var(--color-border-strong); border-radius: 16px;
 box-shadow: 0 32px 100px -25px #000b; overflow: hidden;
}
.project-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; }
.project-viewer__content { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; }
.project-viewer::backdrop { background: #08050dec; }
.project-viewer__toolbar, .project-viewer__tools { display: flex; align-items: center; gap: .5rem; }
.project-viewer__toolbar { justify-content: space-between; }
.project-viewer__label { font-size: .875rem; color: var(--color-text-muted); }
.project-viewer__tools .work__count { margin-right: .75rem; }
.project-viewer__close { margin-left: .65rem; border-color: transparent; background: var(--color-surface); }
.project-viewer__media { position: relative; min-height: 0; display: grid; place-items: center; background: #0b080f; border-radius: 8px; overflow: hidden; touch-action: pan-y pinch-zoom; }
.project-viewer__media picture { width: 100%; height: 100%; min-height: 0; }
.project-viewer__media img { width: 100%; height: 100%; object-fit: contain; }
.project-viewer__media[data-loading='true'] img, .project-viewer__media[data-loading='error'] picture { visibility: hidden; }
.project-viewer__loading, .project-viewer__error { position: absolute; padding: 1.5rem; text-align: center; color: var(--color-text-muted); }
.project-viewer__error a { color: var(--color-text); }
.project-viewer__caption { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding-inline: .25rem; }
.project-viewer__caption h2 { font-size: clamp(1.3rem, 2vw, 1.9rem); }
.project-viewer__caption p { margin-top: .4rem; font-size: .875rem; color: var(--color-text-muted); }
@media (max-width: 599px) {
 .project-viewer { width: calc(100% - 1rem); height: calc(100dvh - 1rem); padding: .85rem; border-radius: 12px; }
 .project-viewer[open] { gap: .85rem; }
 .project-viewer__content { display: flex; flex-direction: column; justify-content: safe center; gap: 1rem; overflow-y: auto; }
 .project-viewer__media { flex-shrink: 0; width: 100%; aspect-ratio: 3/2; }
 .project-viewer__label { display: none; }
 .project-viewer__toolbar { justify-content: flex-end; }
 .project-viewer__tools { width: 100%; }
 .project-viewer__tools .work__count { margin-right: auto; }
 .project-viewer .slider-button { width: 44px; height: 44px; }
 .project-viewer__close { margin-left: .35rem; }
 .project-viewer__caption { flex-direction: column; align-items: flex-start; gap: .75rem; }
 .project-viewer__caption .project-slide__visit { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
 .work--slider .project-slide__image img, .work--slider .project-slide__figure { transition: none; }
 .work--slider .project-slide:hover .project-slide__image img { transform: none; filter: none; }
 .project-slide__expand:hover .project-slide__zoom { transform: none; }
}