/*
 * P-Media: vis hele billedet i offentlige artikelkort
 * med rolig udfyldning i den frie plads.
 * Gælder Forside, Artikler og Arkiv.
 */

:root{
  --pm-card-image-height:clamp(180px,20vw,235px);
}

.pmCardImageFrame{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:var(--pm-card-image-height);
  overflow:hidden;
  isolation:isolate;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

.pmCardImageFrame::before{
  content:"";
  position:absolute;
  inset:-12px;
  z-index:0;
  background-image:inherit;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(22px) brightness(.52) saturate(.92);
  transform:scale(1.12);
}

.pmCardImageFrame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      180deg,
      rgba(4,10,18,.10),
      rgba(4,10,18,.26)
    );
  pointer-events:none;
}

.pmCardImageFrame > img{
  position:relative;
  z-index:2;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
}

.page-archive .grid > .card > a:first-child{
  display:block;
  width:100%;
  line-height:0;
}

/* En lysere overtoning i Day, så kortene stadig passer til layoutet. */
body.theme-day .pmCardImageFrame::after{
  background:
    linear-gradient(
      180deg,
      rgba(244,248,252,.06),
      rgba(12,20,34,.18)
    );
}

/* Night/Flash må gerne være lidt mørkere bag billedet. */
body.theme-night .pmCardImageFrame::before,
body.theme-flash .pmCardImageFrame::before{
  filter:blur(24px) brightness(.42) saturate(.88);
}

body.theme-night .pmCardImageFrame::after,
body.theme-flash .pmCardImageFrame::after{
  background:
    linear-gradient(
      180deg,
      rgba(2,8,16,.16),
      rgba(2,8,16,.36)
    );
}

@media(max-width:900px){
  :root{
    --pm-card-image-height:clamp(190px,31vw,270px);
  }
}

@media(max-width:620px){
  :root{
    --pm-card-image-height:clamp(220px,64vw,330px);
  }
}

/* Card image loader: enabled only when JavaScript initializes it. */
.pmImageLoaderActive .pmCardImageFrame > img{
  transition:
    opacity .38s ease,
    transform .38s ease;
}

.pmImageLoaderActive .pmCardImageFrame.is-loading > img{
  opacity:0;
  transform:scale(.985);
}

.pmImageLoaderActive .pmCardImageFrame.is-loaded > img{
  opacity:1;
  transform:none;
}

.pmCardImageLoader{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  overflow:hidden;
  color:rgba(255,255,255,.92);
  background:rgba(3,10,18,.16);
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
}

.pmCardImageLoader::before{
  content:"";
  position:absolute;
  inset:-40% -65%;
  z-index:-1;
  background:
    linear-gradient(
      105deg,
      transparent 36%,
      rgba(255,255,255,.13) 48%,
      rgba(255,255,255,.22) 50%,
      rgba(255,255,255,.13) 52%,
      transparent 64%
    );
  transform:translateX(-42%);
  animation:pmCardImageShimmer 1.7s ease-in-out infinite;
}

.pmCardImageSpinner{
  width:34px;
  height:34px;
  border:3px solid rgba(255,255,255,.26);
  border-top-color:rgba(255,255,255,.96);
  border-right-color:rgba(94,215,255,.92);
  border-radius:50%;
  box-shadow:0 0 18px rgba(94,215,255,.18);
  animation:pmCardImageSpin .85s linear infinite;
}

.pmCardImageLoaderText{
  padding:4px 8px;
  border-radius:999px;
  color:#f4fbff;
  background:rgba(2,8,16,.46);
  font-size:11px;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}

.pmCardImageFrame.is-loaded .pmCardImageLoader,
.pmCardImageFrame.is-error .pmCardImageLoader{
  opacity:0;
  visibility:hidden;
}

.pmCardImageFrame.is-error::after{
  background:
    linear-gradient(
      180deg,
      rgba(30,10,14,.22),
      rgba(12,4,8,.48)
    );
}

.pmImageProgress{
  position:fixed;
  z-index:2147483000;
  top:0;
  left:0;
  width:100%;
  height:3px;
  overflow:hidden;
  opacity:1;
  background:rgba(3,12,20,.28);
  pointer-events:none;
  transition:opacity .28s ease;
}

.pmImageProgress__bar{
  display:block;
  width:0;
  height:100%;
  background:
    linear-gradient(
      90deg,
      #1686c9,
      #5ed7ff 58%,
      #d8f8ff
    );
  box-shadow:
    0 0 9px rgba(94,215,255,.80),
    0 0 20px rgba(22,134,201,.42);
  transition:width .22s ease;
}

.pmImageProgress.is-done{
  opacity:0;
}

@keyframes pmCardImageSpin{
  to{transform:rotate(360deg)}
}

@keyframes pmCardImageShimmer{
  0%{transform:translateX(-42%)}
  65%,100%{transform:translateX(42%)}
}

@media(prefers-reduced-motion:reduce){
  .pmImageLoaderActive .pmCardImageFrame > img,
  .pmCardImageLoader,
  .pmImageProgress,
  .pmImageProgress__bar{
    transition:none;
  }

  .pmCardImageSpinner,
  .pmCardImageLoader::before{
    animation:none;
  }
}