/* The aspect-ratio is now applied to the wrapper itself via Tailwind
   utility classes (aspect-square / aspect-video / aspect-[X/Y]) emitted
   by Drupal\tienuur_media\Plugin\Field\FieldFormatter\TienuurMediaFormatter.
   This file makes Drupal's nested wrapper divs and the actual media
   elements fill that area with object-fit: cover. */

/* De wrapper zelf (.tup-media-ratio) krijgt z'n hoogte uit de aspect-ratio
 * utility-class — die NIET overschrijven met height:100%, anders rekt 'ie
 * mee met de cardhoogte in flex/grid-rijen (vacancy / news cards). Alleen
 * Drupal's interne wrapper-divs vullen de wrapper volledig. */
.tup-media-ratio div,
.tup-media-ratio article,
.tup-media-ratio picture {
  display: block;
  width: 100%;
  height: 100%;
}

.tup-media-ratio img,
.tup-media-ratio video,
.tup-media-ratio iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.object-fit-img {
  width: 100%;
}

/* Tailwind v4's source-scanner doesn't reliably pick up bracket arbitrary
   values from PHP `match` arms. Define the rules emitted by
   TienuurMediaFormatter::aspectClassesForRatio() here so they always work. */
.aspect-\[21\/9\]  { aspect-ratio: 21 / 9; }
.aspect-\[1\/2\]   { aspect-ratio: 1 / 2; }
.aspect-\[4\/7\]   { aspect-ratio: 4 / 7; }
.aspect-\[2\/3\]   { aspect-ratio: 2 / 3; }
.aspect-\[4\/5\]   { aspect-ratio: 4 / 5; }
.aspect-\[2\/1\]   { aspect-ratio: 2 / 1; }
.aspect-\[3\/1\]   { aspect-ratio: 3 / 1; }
.aspect-\[3\/2\]   { aspect-ratio: 3 / 2; }
.aspect-\[4\/1\]   { aspect-ratio: 4 / 1; }
.aspect-\[4\/3\]   { aspect-ratio: 4 / 3; }
.aspect-\[5\/1\]   { aspect-ratio: 5 / 1; }
.aspect-\[5\/2\]   { aspect-ratio: 5 / 2; }
.aspect-\[5\/3\]   { aspect-ratio: 5 / 3; }
.aspect-\[5\/4\]   { aspect-ratio: 5 / 4; }
.aspect-\[6\/1\]   { aspect-ratio: 6 / 1; }
.aspect-\[8\/1\]   { aspect-ratio: 8 / 1; }
.aspect-\[8\/5\]   { aspect-ratio: 8 / 5; }
.aspect-\[10\/1\]  { aspect-ratio: 10 / 1; }
.aspect-\[10\/3\]  { aspect-ratio: 10 / 3; }