/* APSHINFO GLOBAL MEDIA DISPLAY SYSTEM V1
   Upload the original once. Display sizing is handled here.
   Photos: cover; logos/QR/documents: contain; videos: preserve ratio. */

:root{
  --gm-thumb-ratio:16/9;
  --gm-card-ratio:4/3;
  --gm-square-ratio:1/1;
  --gm-portrait-ratio:4/5;
  --gm-banner-ratio:21/9;
}

/* Never distort media. */
img,video{max-width:100%}
video{height:auto}

/* Explicit reusable media containers for all present/future modules. */
.gm-media{position:relative;overflow:hidden;background:#eef2f0}
.gm-media>img,.gm-media>video{display:block;width:100%;height:100%}
.gm-photo>img,.gm-photo>video{object-fit:cover;object-position:var(--gm-focus,center)}
.gm-contain>img,.gm-contain>video{object-fit:contain;object-position:center}
.gm-thumb{aspect-ratio:var(--gm-thumb-ratio);overflow:hidden;background:#eef2f0}
.gm-thumb>img,.gm-thumb>video,.gm-auto-thumb{width:100%;height:100%;object-fit:cover;object-position:var(--gm-focus,center);display:block}
.gm-card-media{aspect-ratio:var(--gm-card-ratio);overflow:hidden;background:#eef2f0}
.gm-card-media>img,.gm-card-media>video{width:100%;height:100%;object-fit:cover;object-position:var(--gm-focus,center);display:block}
.gm-square{aspect-ratio:var(--gm-square-ratio)}
.gm-portrait{aspect-ratio:var(--gm-portrait-ratio)}
.gm-banner{aspect-ratio:var(--gm-banner-ratio);min-height:240px;max-height:680px}
.gm-banner>img,.gm-banner>video{width:100%;height:100%;object-fit:cover;object-position:var(--gm-focus,center);display:block}

/* Automatic classification applied by global-media.js. */
img.gm-auto-cover{object-fit:cover!important;object-position:var(--gm-focus,center)!important}
img.gm-auto-contain{object-fit:contain!important;object-position:center!important}
img.gm-auto-thumb{aspect-ratio:16/9!important;object-fit:cover!important;object-position:var(--gm-focus,center)!important;background:#eef2f0}
video.gm-auto-video{display:block;width:100%!important;max-width:100%;height:auto!important;object-fit:contain;background:#071c19}

/* Important media must always show completely. */
img[class*="logo" i],img[class*="qr" i],img[class*="certificate" i],img[class*="document" i],
[class*="logo" i] img,[class*="qr" i] img,[class*="certificate" i] img,[class*="document" i] img,
img[data-media-mode="contain"]{
  object-fit:contain!important;
  object-position:center!important;
}

/* Focal-point helpers: Admin/pages may use these without creating new image sizes. */
.gm-focus-top{--gm-focus:center top}.gm-focus-bottom{--gm-focus:center bottom}
.gm-focus-left{--gm-focus:left center}.gm-focus-right{--gm-focus:right center}.gm-focus-center{--gm-focus:center}

/* Common thumbnail/card naming across legacy and new modules. */
[class*="thumbnail" i] img:not([data-media-mode="contain"]),
[class*="thumb-" i] img:not([data-media-mode="contain"]),
[class$="-thumb" i] img:not([data-media-mode="contain"]),
img[class*="thumbnail" i]:not([data-media-mode="contain"]),
img[class*="thumb" i]:not([data-media-mode="contain"]){
  width:100%;height:100%;object-fit:cover;object-position:var(--gm-focus,center);display:block;
}

/* Partner/logo areas are equal-fit, never crop. */
.pt-logo img,.partner-logo img,.sponsor-logo img,.brand-logo img{
  width:100%;height:100%;object-fit:contain!important;object-position:center!important;
}

/* Mobile remains responsive without a second upload. */
@media(max-width:767px){
  .gm-banner{aspect-ratio:16/9;min-height:190px}
}