/* ============================================================
   BEINC — PDP Media Wrapper (Component CSS)
   Reusable image OR video container for project detail pages.
   ============================================================
   Markup pattern (WordPress-friendly):

     <div class="pdp-media pdp-media--landscape" data-media-type="image">
         <img src="..." alt="">
     </div>

     <div class="pdp-media pdp-media--landscape" data-media-type="video">
         <video src="..." muted loop autoplay playsinline></video>
     </div>

   Aspect modifiers:
     --landscape  16/9 (default in this project)
     --portrait   4/5
     --square     1/1
     --wide       21/9

   The wrapper handles aspect ratio, border-radius and clipping so
   image / video can be swapped without changing surrounding layout.
   ============================================================ */

.pdp-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-darkgreyish);
    isolation: isolate;
}

/* Aspect ratios */
.pdp-media--landscape { aspect-ratio: 16 / 9; }
.pdp-media--portrait  { aspect-ratio: 4 / 5; }
.pdp-media--square    { aspect-ratio: 1 / 1; }
.pdp-media--wide      { aspect-ratio: 21 / 9; }

/* The inner img/video fills the wrapper and crops if needed */
.pdp-media > img,
.pdp-media > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}