/* Behavior overrides for the self-hosted portfolio archive. */

:root {
  --archive-media-radius: 14px;
}

/* Category cards use one stable hit target instead of separate image/text links. */
html.archive-category-page .archive-project-card {
  position: relative;
  isolation: isolate;
  cursor: pointer;
}

html.archive-category-page .archive-project-card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  border-radius: var(--archive-media-radius);
}

html.archive-category-page .archive-project-card .gallery-caption {
  z-index: 2;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity 220ms ease !important;
  will-change: opacity;
}

html.archive-category-page .archive-project-card .gallery-grid-item-wrapper,
html.archive-category-page .archive-project-card .gallery-grid-image-link {
  overflow: hidden;
  border-radius: var(--archive-media-radius);
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

html.archive-category-page .archive-project-card img {
  opacity: 1 !important;
  transform: translateZ(0) !important;
  transition: none !important;
  animation: none !important;
  backface-visibility: hidden;
}

@media (hover: hover) {
  html.archive-category-page .archive-project-card:hover .gallery-caption {
    opacity: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.archive-category-page .archive-project-card .gallery-caption {
    transition: none !important;
  }
}

/* Squarespace has several generations of image markup. Cover every media
   container used on project-detail pages with the same original 14px radius. */
html.archive-project-detail #page .sqs-image-shape-container-element,
html.archive-project-detail #page .fluid-image-container,
html.archive-project-detail #page .gallery-slideshow-item-wrapper,
html.archive-project-detail #page .gallery-slideshow-item-img,
html.archive-project-detail #page .gallery-slideshow-thumbnails-image-wrapper,
html.archive-project-detail #page .sqs-block-video .embed-block-wrapper,
html.archive-project-detail #page .sqs-native-video,
html.archive-project-detail #page .native-video-player,
html.archive-project-detail #page .plyr {
  overflow: hidden !important;
  border-radius: var(--archive-media-radius) !important;
}

html.archive-project-detail #page .sqs-block-image img,
html.archive-project-detail #page .gallery-slideshow img,
html.archive-project-detail #page .sqs-block-video iframe,
html.archive-project-detail #page .sqs-native-video video,
html.archive-project-detail #page .archive-youtube-video video {
  border-radius: var(--archive-media-radius) !important;
}

/* Squarespace's medium sections impose a large viewport-based minimum height.
   Keep split-screen desktop heroes intact, but let ordinary project content
   size itself naturally with one consistent responsive gutter. */
html.archive-project-detail #page .archive-content-section {
  min-height: 0 !important;
  height: auto !important;
}

html.archive-project-detail #page .archive-content-section .content-wrapper {
  padding-top: clamp(40px, 4vw, 64px) !important;
  padding-bottom: clamp(40px, 4vw, 64px) !important;
}

html.archive-project-detail #page .archive-content-section.gallery-section .content-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 640px) {
  html.archive-project-detail #page .archive-content-section .content-wrapper {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* The portfolio clips are decorative: they play silently and are not controls. */
.sqs-native-video,
.sqs-native-video .native-video-player,
.sqs-native-video .plyr,
.sqs-native-video video {
  pointer-events: none !important;
  -webkit-user-select: none;
  user-select: none;
}

.sqs-native-video .plyr__controls,
.sqs-native-video .plyr__control--overlaid {
  display: none !important;
}

/* Former YouTube embeds use each local MP4's native aspect ratio. */
.archive-youtube-frame {
  padding-bottom: 0 !important;
  container-type: inline-size;
}

.archive-youtube-video {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: auto !important;
  border-radius: var(--archive-media-radius) !important;
  background: #000;
  pointer-events: none !important;
  -webkit-user-select: none;
  user-select: none;
}

.archive-youtube-video video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  pointer-events: none !important;
}

/* Keep every portrait recording at one visual height without changing its
   native proportions. The container-relative cap prevents mobile overflow. */
.archive-youtube-video.archive-portrait-video {
  width: fit-content !important;
  max-width: 100% !important;
  margin-right: auto;
  margin-left: auto;
}

.archive-youtube-video.archive-portrait-video video {
  width: auto;
  max-width: 100%;
  height: min(800px, 176cqw);
}