/* A shared gallery for the desktop and mobile homepages. */
#comp-m81k2akc.portfolio {
  --portfolio-gap: 20px;
  --portfolio-story-gap: 28px;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 52px clamp(24px, 3.3vw, 64px) 36px;
  background: #242424;
  color: #f5f3ef;
  scroll-margin-top: 70px;
  display: flex;
  flex-direction: column;
  gap: var(--portfolio-story-gap);
}

.portfolio *, .portfolio-viewer * { box-sizing: border-box; }
.portfolio__story { position: relative; max-width: 1440px; margin-inline: auto; }
.portfolio__story { margin-block: 0; }
.portfolio__track {
  display: flex;
  gap: var(--portfolio-gap);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.portfolio__track::-webkit-scrollbar { display: none; }
.portfolio__slide {
  display: block;
  position: relative;
  flex: 0 0 calc((100% - 2 * var(--portfolio-gap)) / 3);
  min-width: 0;
  height: auto;
  aspect-ratio: var(--photo-ratio);
  overflow: hidden;
  scroll-snap-align: start;
  color: inherit;
  text-decoration: none;
  background: transparent;
}
a.portfolio__slide { cursor: zoom-in; }
.portfolio__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.portfolio__placeholder { background: #2c2c2c; }
.portfolio__controls { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.portfolio__controls[hidden] { display: none; }
.portfolio__arrow, .portfolio-viewer__close {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 60%);
  border-radius: 50%;
  color: #f5f3ef;
  background: rgb(20 20 20 / 48%);
  cursor: pointer;
}
.portfolio__arrow { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: auto; }
.portfolio__arrow--previous { left: 0; }
.portfolio__arrow:not(.portfolio__arrow--previous) { right: 0; }
.portfolio__arrow[hidden] { display: none; }
.portfolio__arrow--previous svg { transform: rotate(180deg); }
.portfolio__arrow:disabled { opacity: .3; cursor: default; }
.portfolio__track:focus-visible { outline: 2px solid #f5f3ef; outline-offset: 4px; }
.portfolio__slide:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
:is(.portfolio, .portfolio-viewer) button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media (hover: hover) {
.portfolio__arrow:hover:not(:disabled), .portfolio-viewer__close:hover { background: rgb(20 20 20 / 75%); border-color: #f5f3ef; }
}

.portfolio-viewer {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border: 0;
  background: #171717;
  color: #f5f3ef;
}
.portfolio-viewer[open] { display: block; }
.portfolio-viewer::backdrop { background: #171717; }
.portfolio-viewer__image { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; user-select: none; -webkit-user-select: none; }
.portfolio-viewer__close { position: absolute; z-index: 1; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); font-size: 27px; }
.portfolio-viewer__bottom { position: absolute; inset: 0; pointer-events: none; }
.portfolio-viewer__bottom .portfolio__arrow { top: 50%; }
.portfolio-viewer__bottom [data-viewer-previous] { left: max(16px, env(safe-area-inset-left)); }
.portfolio-viewer__bottom [data-viewer-next] { right: max(16px, env(safe-area-inset-right)); }
.portfolio-viewer__bottom .portfolio__arrow:disabled { display: none; }

@media (max-width: 900px), (pointer: coarse), (max-device-width: 900px) {
  #comp-m81k2akc.portfolio {
    --portfolio-gap: 12px;
    --portfolio-story-gap: 24px;
    padding: 32px 0 24px;
  }
  .portfolio__slide {
    flex-basis: 100%;
  }
  .portfolio__arrow {
    width: 34px;
    height: 34px;
    border: 0;
    background: rgb(20 20 20 / 20%);
    opacity: .72;
  }
  .portfolio__arrow svg { width: 16px; height: 16px; }
  .portfolio-viewer__bottom .portfolio__arrow { background: rgb(20 20 20 / 28%); }
  @media (hover: hover) {
    .portfolio__arrow:hover:not(:disabled) { opacity: 1; }
  }
}

/* mobile.html is the dedicated phone layout even if iOS requests desktop sizing. */
body.device-mobile-optimized .portfolio__slide { flex-basis: 100%; }

@media (pointer: coarse), (max-device-width: 900px) {
  #comp-m81k2akc.portfolio .portfolio__story {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
  }
  #comp-m81k2akc.portfolio .portfolio__track { width: 100vw; }
  #comp-m81k2akc.portfolio .portfolio__slide {
    flex: 0 0 100vw;
    width: 100vw;
  }
}