/* Public frontend optimisation patch
   - shared deployable CSS folder
   - mobile thumbnail video poster/fallback visibility
   - mobile project media width refinement
   - reduced-motion and lighter touch-device effects
*/

.media-layer.is-video-thumb,
.media-layer[data-media-layer][style*="--media-bg"],
.project-footer-thumb video,
.project-media video {
  background-color: #111;
  background-image: var(--media-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.media-layer.is-video-thumb {
  object-fit: cover;
}

.media-layer.is-video-thumb:not(.is-loaded) {
  background-image: var(--media-bg, none);
}

.project-media img,
.project-media video,
.project-media iframe,
.project-footer-thumb img,
.project-footer-thumb video,
.media-layer {
  content-visibility: auto;
}

@media (hover: none), (pointer: coarse) {
  .project-card:hover,
  .project-card:focus-within {
    transform: none !important;
  }

  .project-card:hover .media-layer,
  .project-card:focus-within .media-layer {
    transform: none !important;
    filter: none !important;
  }

  .project-card .media-layer.is-video-thumb.is-active {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .project-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    gap: 10px !important;
  }

  .project-card,
  .project-card:nth-child(n),
  .lab-grid .project-card:nth-child(n),
  .project-card[class*="tile-shape-"] {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
  }

  .project-card .frame {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
  }

  .project-card .project-overlay {
    opacity: 1 !important;
  }

  .project-template .project-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .project-template .full-bleed-module {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .project-template .full-bleed-module .media-block-title,
  .project-template .full-bleed-module .media-caption {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .project-template .image-pair,
  .project-template .image-grid-three,
  .project-template .pinterest-media-grid,
  .project-template .contact-sheet-grid,
  .project-template .before-after-pair,
  .project-template .text-image {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .project-template .image-pair .media-figure,
  .project-template .image-grid-three .media-figure,
  .project-template .pinterest-media-grid .media-figure,
  .project-template .contact-sheet-grid .media-figure {
    grid-column: auto !important;
    grid-row: auto !important;
    margin-top: 0 !important;
  }

  .project-template .media-figure,
  .project-template .project-media,
  .project-template .media-figure .project-media {
    max-width: 100%;
  }

  .project-template .project-media[data-frame-shape="natural"] {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .project-template .project-media[data-frame-shape="natural"] img,
  .project-template .project-media[data-frame-shape="natural"] video {
    max-width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}