body.lgm-home { margin: 0; }
.lgof-film {
  position: relative;
  isolation: isolate;
  line-height: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 42.857vw;
  max-height: 68vh;
  max-height: 68svh;
  overflow: hidden;
  background: #25221f;
}
.lgof-track { position: absolute; inset: 0; }
.lgof-film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: url('stockholm-logga.jpg') center / cover no-repeat;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .lgof-film { height: 56.25vw; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .lgof-film { height: 100vh; height: 100svh; max-height: none; }
  .lgof-film video { background-image: url('stockholm-mobil.jpg'); }
}
@media (min-width: 1025px), (hover: hover) and (pointer: fine) {
  .lgof-film {
    height: calc(100vh - var(--lgof-toolbar, 0px));
    height: calc(100dvh - var(--lgof-toolbar, 0px));
    max-height: none;
  }
  .admin-bar .lgof-film { --lgof-toolbar: var(--wp-admin--admin-bar--height, 32px); }
}
.lgof-film .lgof-control{position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,24px);display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgb(255 255 255 / 48%);border-radius:50%;color:#fff;background:rgb(23 20 16 / 60%);cursor:pointer}
.lgof-control[hidden],.lgof-play-icon,.lgof-control.is-paused .lgof-pause-icon{display:none}
.lgof-control.is-paused .lgof-play-icon{display:block}
.lgof-control:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* The cover keeps its position in the document. A short sticky track inside
   a clipped film frame lets its leading edge slide over the moving picture. */
.lgof-film ~ #lgm-main #lgm-cover { top: 0; }
@supports (overflow: clip) and (position: sticky) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .lgof-film {
      --lgof-hold: clamp(96px, 18vh, 168px);
      --lgof-top: 0px;
      overflow: clip;
    }
    .lgof-track {
      inset: 0 0 calc(0px - var(--lgof-hold));
    }
    .lgof-film video {
      position: sticky;
      height: calc(100% - var(--lgof-hold));
      top: var(--lgof-top);
    }
  }
  @media screen and (prefers-reduced-motion: no-preference) and (min-width: 601px) {
    .admin-bar .lgof-film {
      --lgof-top: var(--wp-admin--admin-bar--height, 32px);
    }
  }
  @media screen and (prefers-reduced-motion: no-preference) and (max-width: 760px),
         screen and (prefers-reduced-motion: no-preference) and (pointer: coarse) {
    .lgof-film { --lgof-hold: clamp(24px, 6vw, 44px); }
  }
}