/**
 * Video Feature: front end styles (the editor loads them too).
 *
 * Look: S05 PIMO Video of the homepage sample (test1.html): full screen,
 * dark, a shade over the loop, the text and buttons centred at the
 * bottom. "Watch" (.is-watching) fades the text and shade out, shows the
 * film, Close and (self-hosted) the control bar. Buttons come from
 * ../shared/buttons.css. Own pf-video-feature classes; --pf-* tokens.
 */
/* Full screen follows the real header (../shared/screen.php sets
   --pf-screen-offset and --pf-sticky-offset on this element): a sticky
   header is subtracted; a header that scrolls away only when the block
   sits right under it. Without the script: the header is subtracted.
   Watch scrolls the section to just below a sticky header (view.js). */
.pf-video-feature{
  --pf-video-feature-h:max(560px, calc(100vh - var(--pf-screen-offset, var(--pf-header-h))));
  position:relative;overflow:hidden;
  height:var(--pf-video-feature-h);
  background:var(--pf-text);color:var(--pf-bg);
  scroll-margin-top:var(--pf-sticky-offset, var(--pf-header-h));
}
@supports (height:100svh){
  .pf-video-feature{--pf-video-feature-h:max(560px, calc(100svh - var(--pf-screen-offset, var(--pf-header-h))))}
}
/* A custom height set in the block wins (inline style on the element). */

/* ---------- Media: poster, loop, film ---------- */
.pf-video-feature__media{position:absolute;inset:0;transition:transform .5s var(--pf-ease)}
.pf-video-feature__poster,
.pf-video-feature__loop{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;object-fit:cover;
}
.pf-video-feature__loop{opacity:0;transition:opacity .6s var(--pf-ease)}
.pf-video-feature.is-looping .pf-video-feature__loop{opacity:1}
.pf-video-feature.is-watching .pf-video-feature__media{transform:translateY(-8%)}

.pf-video-feature__film{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;object-fit:cover;
  background:#000;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--pf-ease),visibility 0s linear .4s;
}
.pf-video-feature.is-watching .pf-video-feature__film{
  opacity:1;visibility:visible;
  transition:opacity .4s var(--pf-ease),visibility 0s;
}
/* "Show the whole picture": black bars instead of cropping. */
.pf-video-feature.is-film-contain .pf-video-feature__film{object-fit:contain}
/* Full screen always shows the whole picture. */
.pf-video-feature__film:fullscreen{object-fit:contain}
.pf-video-feature__youtube iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Shade (three strengths) ---------- */
.pf-video-feature__shade{
  --pf-video-feature-shade:.75;
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(23,26,32,calc(var(--pf-video-feature-shade) + .25)) 0%,
    rgba(23,26,32,0) 25%,
    rgba(23,26,32,0) 55%,
    rgba(23,26,32,var(--pf-video-feature-shade)) 100%);
  transition:opacity .5s var(--pf-ease);
}
.pf-video-feature.is-shade-light .pf-video-feature__shade{--pf-video-feature-shade:.5}
.pf-video-feature.is-shade-strong .pf-video-feature__shade{
  --pf-video-feature-shade:.85;
  background:linear-gradient(180deg,rgba(23,26,32,1) 0%,rgba(23,26,32,.35) 30%,rgba(23,26,32,.35) 55%,rgba(23,26,32,.85) 100%);
}
.pf-video-feature.is-watching .pf-video-feature__shade{opacity:0}

/* ---------- Text and buttons, centred at the bottom ---------- */
.pf-video-feature__content{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:var(--pf-s3);
  padding:0 var(--pf-s5) var(--pf-s9);text-align:center;
  transition:opacity .5s var(--pf-ease),transform .5s var(--pf-ease);
}
.pf-video-feature .pf-video-feature__title{margin:0;font-size:var(--pf-h2);font-weight:600;line-height:1.25;color:var(--pf-bg)}
.pf-video-feature .pf-video-feature__text{margin:0;font-size:var(--pf-h4);line-height:1.5;color:rgba(255,255,255,.9)}
.pf-video-feature__buttons{margin-top:var(--pf-s4);width:100%}
.pf-video-feature__watch svg{width:14px;height:14px;fill:currentColor;flex:none}
.pf-video-feature.is-watching .pf-video-feature__content{opacity:0;transform:translateY(var(--pf-s4));pointer-events:none;visibility:hidden;transition:opacity .5s var(--pf-ease),transform .5s var(--pf-ease),visibility 0s linear .5s}

/* ---------- Close ---------- */
.pf-video-feature .pf-video-feature__close{
  position:absolute;top:var(--pf-s5);right:var(--pf-s5);z-index:5;
  display:inline-flex;align-items:center;gap:var(--pf-s2);
  height:40px;padding:0 var(--pf-s4);border:0;border-radius:999px;
  background:rgba(0,0,0,.45);color:var(--pf-bg);
  font-family:inherit;font-size:var(--pf-ui);font-weight:600;cursor:pointer;
}
.pf-video-feature__close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.pf-video-feature__close[hidden],.pf-video-feature__bar[hidden]{display:none}

/* ---------- Control bar (self-hosted film) ---------- */
.pf-video-feature__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:var(--pf-s3);
  padding:var(--pf-s4) var(--pf-s5) var(--pf-s5);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%);
}
.pf-video-feature .pf-video-feature__ctl{
  flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.15);color:var(--pf-bg);cursor:pointer;
}
.pf-video-feature__ctl svg{width:16px;height:16px;fill:currentColor}
.pf-video-feature__ctl svg .is-line,
.pf-video-feature__ctl svg.is-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf-video-feature__toggle .is-play,
.pf-video-feature__mute .is-muted{display:none}
.pf-video-feature.is-paused .pf-video-feature__toggle .is-play,
.pf-video-feature.is-muted .pf-video-feature__mute .is-muted{display:block}
.pf-video-feature.is-paused .pf-video-feature__toggle .is-pause,
.pf-video-feature.is-muted .pf-video-feature__mute .is-sound{display:none}
.pf-video-feature__cc[aria-pressed="true"]{background:rgba(255,255,255,.35)}

/* Seek bar: a thin white track that fills as the film plays. */
.pf-video-feature .pf-video-feature__seek{
  --pf-video-feature-pos:0%;
  flex:1 1 auto;min-width:60px;height:24px;margin:0;padding:0;
  background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.pf-video-feature__seek::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--pf-bg) var(--pf-video-feature-pos),rgba(255,255,255,.25) var(--pf-video-feature-pos));
}
.pf-video-feature__seek::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.pf-video-feature__seek::-moz-range-progress{height:4px;border-radius:2px;background:var(--pf-bg)}
.pf-video-feature__seek::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:0;border-radius:50%;background:var(--pf-bg);
}
.pf-video-feature__seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--pf-bg)}
.pf-video-feature__time{flex:none;min-width:5ch;font-size:var(--pf-tiny);color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;text-align:right}

/* Pause for the background loop: bottom right, shown by view.js once the
   loop plays, hidden while the film is open. */
.pf-video-feature .pf-video-feature__loop-toggle{position:absolute;right:var(--pf-s5);bottom:var(--pf-s5);z-index:3}
.pf-video-feature__loop-toggle[hidden],
.pf-video-feature.is-watching .pf-video-feature__loop-toggle{display:none}
.pf-video-feature__loop-toggle .is-play{display:none}
.pf-video-feature.is-loop-paused .pf-video-feature__loop-toggle .is-play{display:block}
.pf-video-feature.is-loop-paused .pf-video-feature__loop-toggle .is-pause{display:none}

/* Focus rings on the dark background. */
.pf-video-feature__close:focus-visible,
.pf-video-feature__ctl:focus-visible,
.pf-video-feature__seek:focus-visible{outline:2px solid var(--pf-bg);outline-offset:2px}

@media (hover:hover) and (pointer:fine){
  .pf-video-feature__close:hover,
  .pf-video-feature__ctl:hover{background:rgba(255,255,255,.3)}
}

/* ---------- Smaller screens ---------- */
@media (max-width:900px){
  .pf-video-feature__content{padding-left:var(--pf-s4);padding-right:var(--pf-s4)}
}
@media (max-width:520px){
  .pf-video-feature__content{padding-bottom:var(--pf-s7)}
  .pf-video-feature__bar{gap:var(--pf-s2);padding:var(--pf-s3) var(--pf-s3) var(--pf-s4)}
  .pf-video-feature .pf-video-feature__ctl{width:36px;height:36px}
  .pf-video-feature .pf-video-feature__close{top:var(--pf-s3);right:var(--pf-s3)}
  .pf-video-feature .pf-video-feature__loop-toggle{right:var(--pf-s3);bottom:var(--pf-s3)}
}

@media (prefers-reduced-motion:reduce){
  .pf-video-feature__media,
  .pf-video-feature__content,
  .pf-video-feature__shade,
  .pf-video-feature__loop,
  .pf-video-feature__film{transition:none}
  .pf-video-feature.is-watching .pf-video-feature__media{transform:none}
}