.project-card { cursor: pointer; }
.project-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.project-card img { object-fit: contain; background: #f7f7f7; }
.project-grid { display: none !important; }

.portfolio-carousel { overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 24px 55px rgba(15, 15, 15, .12); }
.portfolio-carousel-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.5rem; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.portfolio-carousel-top p { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-carousel-top p:first-child { color: var(--ink); }.portfolio-carousel-top p:last-child { color: var(--accent); }
.portfolio-carousel-stage { position: relative; display: grid; min-height: clamp(350px, 53vw, 650px); place-items: center; padding: 16px; background: linear-gradient(135deg, #eeeeee 0%, #fafafa 48%, #e8e8e8 100%); }
.portfolio-carousel-stage .project-card { display: none; width: 100%; height: 100%; min-height: clamp(318px, 50vw, 618px); overflow: hidden; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 12px 35px rgba(0, 0, 0, .17); }
.portfolio-carousel-stage .project-card.is-current { display: block; animation: carousel-reveal .35s ease both; }
.portfolio-carousel-stage .project-card img { width: 100%; height: 100%; min-height: clamp(318px, 50vw, 618px); object-fit: contain; background: #fff; }
.portfolio-carousel-stage .project-card div { right: 2rem; bottom: 1.7rem; left: 2rem; border-radius: 14px; }
.portfolio-carousel-controls { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: .6rem; min-height: 92px; padding: .9rem 1rem; background: #fff; }
.portfolio-carousel-controls > button { width: 42px; height: 42px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .08); transition: background .2s, border-color .2s, color .2s, transform .2s; }
.portfolio-carousel-controls > button:hover { border-color: var(--accent); background: var(--accent); color: #fff; transform: translateY(-2px); }
.portfolio-carousel-controls > button:last-child { justify-self: end; }
.portfolio-carousel-controls [data-carousel-dots] { display: flex; gap: .55rem; justify-content: flex-start; padding: .2rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.carousel-thumbnail { position: relative; width: 68px; height: 54px; flex: 0 0 auto; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 10px; background: #ececec; cursor: pointer; opacity: .58; transition: opacity .2s, border-color .2s, transform .2s; }
.carousel-thumbnail:hover { opacity: 1; transform: translateY(-2px); }
.carousel-thumbnail.is-active { border-color: var(--accent); opacity: 1; box-shadow: 0 3px 9px rgba(177, 24, 35, .28); }
.carousel-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes carousel-reveal { from { opacity: .35; transform: scale(.992); } to { opacity: 1; transform: scale(1); } }
@media (max-width:650px) { .portfolio-carousel { border-radius: 20px; }.portfolio-carousel-top { padding: .9rem 1rem; }.portfolio-carousel-stage { min-height: 88vw; padding: 10px; }.portfolio-carousel-stage .project-card, .portfolio-carousel-stage .project-card img { min-height: 82vw; }.portfolio-carousel-stage .project-card div { right: 1rem; bottom: 1rem; left: 1rem; }.portfolio-carousel-controls { grid-template-columns: 40px minmax(0, 1fr) 40px; min-height: 78px; padding: .7rem; }.portfolio-carousel-controls > button { width: 36px; height: 36px; }.carousel-thumbnail { width: 56px; height: 46px; } }
.gallery-modal[hidden] { display: none; }
.gallery-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; }
.gallery-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); backdrop-filter: blur(5px); }
.gallery-dialog { position: relative; z-index: 1; display: grid; place-items: center; width: min(1100px, 100%); max-height: 100%; color: #fff; }
.gallery-dialog figure { display: grid; gap: 12px; max-width: 100%; margin: 0; }
.gallery-dialog img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(78vh, 850px); margin-inline: auto; object-fit: contain; background: #181818; }
.gallery-dialog figcaption { min-height: 1.4em; padding: 0 48px; color: #f4f4f4; font-size: .9rem; font-weight: 700; text-align: center; }
.gallery-close, .gallery-control { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(20,20,20,.75); color: #fff; cursor: pointer; transition: background .2s, transform .2s; }
.gallery-close:hover, .gallery-control:hover { background: var(--accent); transform: scale(1.06); }
.gallery-close { top: -12px; right: -12px; width: 42px; height: 42px; font-size: 2rem; line-height: 1; }
.gallery-control { top: 48%; width: 48px; height: 48px; font-size: 1.5rem; transform: translateY(-50%); }
.gallery-prev { left: -64px; }.gallery-next { right: -64px; }
.gallery-counter { margin: 10px 0 0; color: #d7d7d7; font-size: .75rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
@media (max-width: 760px) { .gallery-modal { padding: 48px 16px 24px; }.gallery-close { top: -38px; right: 0; }.gallery-control { top: auto; bottom: -56px; transform: none; }.gallery-control:hover { transform: scale(1.06); }.gallery-prev { left: calc(50% - 58px); }.gallery-next { right: calc(50% - 58px); }.gallery-counter { margin-top: 72px; } }