/*
 * Shared presentation contract for neutral PERBRA media slots.
 * Page CSS owns the frame geometry. Photo and video only fill that frame.
 */

:where([data-media-slot]) {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}

:where([data-media-slot]) > :where(a, .perbra-media-picture),
:where([data-media-slot]) > a > .perbra-media-picture {
  display: block;
  width: 100%;
  height: 100%;
}

:where([data-media-slot]) .perbra-media {
  display: block;
  width: 100%;
  max-width: none;
  border: 0;
  object-fit: var(--perbra-media-fit, cover);
  object-position: var(--perbra-media-position, 50% 50%);
}

:where([data-media-slot][data-media-presentation="content"]) .perbra-media {
  height: auto;
  aspect-ratio: var(--perbra-media-frame-ratio, auto);
}

:where([data-media-slot][data-media-presentation="background"]) > :where(a, .perbra-media-picture, .perbra-media),
:where([data-media-slot][data-media-presentation="background"]) > a > :where(.perbra-media-picture, .perbra-media),
:where([data-media-slot][data-media-presentation="background"]) .perbra-media-picture > .perbra-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

:where([data-media-slot]) .perbra-media--video {
  background: var(--perbra-media-video-background, #050505);
}

@media (prefers-reduced-motion: reduce) {
  :where([data-media-slot]) .perbra-media--video {
    scroll-behavior: auto;
  }
}

/* Start-page geometry; only the migrated start pages load this stylesheet. */
.home-hero > .home-hero-media {
  --perbra-media-position: center 52%;
}

@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait),
       (min-width: 1025px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .home-hero > .home-hero-media {
    --perbra-media-position: center 35%;
  }
}

.home-hero > .home-hero-media .perbra-media {
  background: transparent;
}

.home-media-fill {
  position: absolute;
  inset: 0;
}

.perbra-media-fill {
  position: absolute;
  inset: 0;
}

.world-media .perbra-media {
  min-height: inherit;
  transition: transform 1.25s cubic-bezier(.16,1,.3,1);
}

.world-chapter:hover .world-media .perbra-media {
  transform: scale(1.025);
}

.project-card-media .perbra-media {
  object-position: center 58%;
  transform: scale(1.002);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}

.properties-hub-gallery .project-card-media .perbra-media {
  object-position: center;
  transform: none;
  pointer-events: none;
}

.project-card--featured:hover .project-card-media .perbra-media,
.project-card--featured:focus-within .project-card-media .perbra-media {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}