/* video-clients.html, video-contractors.html — E-Canonis video pages */

body#pg-video {
  --vp-ivory:  #F5F1EB;
  --vp-gold:   #8F6318;
  --vp-maroon: #631E0F;
  --vp-teal:   #174548;
  --vp-text:   #4A4A4A;

  background: var(--vp-ivory);
  margin: 0;
  padding: 0;
  padding-top: var(--vp-header-h, 72px) !important;
  overflow-x: hidden;
}

body#pg-video .video-page {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── slim utility bar, as on ebook.html ── */
body#pg-video .video-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 46px;
  box-sizing: border-box;
  padding: 0 clamp(10px, 2vw, 22px);
  border-bottom: 1px solid rgba(143,99,24,0.22);
}
body#pg-video .video-bar-label {
  margin: 0;
  min-width: 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(10.5px, 1.4vw, 13px);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--vp-gold);
  text-align: left;
  text-align-last: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#pg-video .video-bar-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
body#pg-video .video-bar-sep {
  color: rgba(143,99,24,0.45);
  font-size: 12px;
}
body#pg-video .video-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 10px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(10.5px, 1.3vw, 12px);
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--vp-gold);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
body#pg-video .video-bar-link:hover { color: #6B450B; }
body#pg-video .video-bar-link svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ── theater: the title centred above the player ──
   --vp-avail-h is the height left under the header and bar, above the
   fixed 30px footer, less the title (--vp-head-h) and the gap under it.
   --vp-video-w keeps --vp-right clear on both sides, the strip used by the
   floating Home / Back / social buttons, so the player stays centred. The
   frame gets an explicit width AND height (not aspect-ratio), so the video
   file's own shape can never resize it. */
body#pg-video {
  --vp-pad:    clamp(12px, 2vh, 24px);
  --vp-gap:    clamp(12px, 2vh, 20px);
  --vp-right:  110px;
  --vp-head-h: calc(clamp(1.6rem, 2.4vw, 2.3rem) * 1.1 + 16px);
  --vp-avail-h: calc(100vh - var(--vp-header-h, 72px) - 46px - 30px - 2 * var(--vp-pad) - var(--vp-head-h) - var(--vp-gap));
  --vp-video-w: calc(100vw - 2 * var(--vp-right));
  --vp-frame-h: max(200px, min(var(--vp-video-w) * 9 / 16, var(--vp-avail-h)));
}
@supports (height: 100dvh) {
  body#pg-video {
    --vp-avail-h: calc(100dvh - var(--vp-header-h, 72px) - 46px - 30px - 2 * var(--vp-pad) - var(--vp-head-h) - var(--vp-gap));
  }
}
body#pg-video .video-theater {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--vp-gap);
  width: 100%;
  box-sizing: border-box;
  min-height: calc(var(--vp-avail-h) + var(--vp-head-h) + var(--vp-gap) + 2 * var(--vp-pad));
  padding: var(--vp-pad) var(--vp-right);
}

/* the title */
body#pg-video .video-head { text-align: center; }
body#pg-video .video-title {
  margin: 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vp-maroon);
  text-align: center;
}
body#pg-video .video-title .title-accent { color: var(--vp-teal); }
body#pg-video .video-rule {
  display: block;
  width: 64px;
  height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, rgba(216,163,107,0), #d8a36b, rgba(216,163,107,0));
}

/* the player */
body#pg-video .video-frame {
  position: relative;
  flex: 0 0 auto;
  height: var(--vp-frame-h);
  width: calc(var(--vp-frame-h) * 16 / 9);
  max-width: 100%;
  background: #000;
  border: 1px solid #d8a36b;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(40, 10, 4, 0.22);
  overflow: hidden;
}
body#pg-video .video-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
body#pg-video .video-player[hidden] { display: none; }

body#pg-video .video-pending {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: var(--vp-maroon);
  color: #f4ce99;
}
body#pg-video .video-pending[hidden] { display: none; }
body#pg-video .video-pending svg { width: 56px; height: 56px; opacity: 0.8; }
body#pg-video .video-pending-text {
  text-align: center;
  margin: 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.04em;
  word-spacing: normal;
}

/* ── finish: a soft backdrop, an entrance, and a gold edge on the player ──
   All decoration sits behind or on top of the real content and takes no
   clicks. Visitors who ask for reduced motion get the same look, still. */
body#pg-video .video-theater {
  position: relative;
  isolation: isolate;
}
/* teal and gold light pooled behind the player, over a faint diagonal weave */
body#pg-video .video-theater::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 70% at 50% 58%, rgba(216,163,107,0.55), transparent 75%),
    radial-gradient(ellipse 80% 95% at 50% 55%, rgba(23,69,72,0.20), transparent 78%),
    repeating-linear-gradient(135deg, rgba(143,99,24,0.035) 0 1px, transparent 1px 16px);
  animation: vpGlow 9s ease-in-out infinite alternate;
}
@keyframes vpGlow {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* entrance: title rises, the gold rule draws out, then the player */
body#pg-video .video-title { animation: vpRise 0.8s cubic-bezier(.2,.7,.2,1) both; }
body#pg-video .video-rule  {
  width: 96px;
  transform-origin: center;
  animation: vpDraw 0.9s cubic-bezier(.2,.7,.2,1) 0.3s both;
}
body#pg-video .video-frame { animation: vpRise 1s cubic-bezier(.2,.7,.2,1) 0.2s both; }
@keyframes vpRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vpDraw {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* a light that travels slowly round the player's gold border */
body#pg-video .video-frame { box-shadow: 0 18px 40px rgba(40,10,4,0.22), 0 0 0 4px rgba(216,163,107,0.10); }
body#pg-video .video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255,240,205,0.95) 50%, transparent 62%) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: vpEdge 7s ease-in-out 1.2s infinite;
}
@keyframes vpEdge {
  0%       { background-position: 100% 0; }
  60%, 100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  body#pg-video .video-theater::before,
  body#pg-video .video-title,
  body#pg-video .video-rule,
  body#pg-video .video-frame,
  body#pg-video .video-frame::after { animation: none; }
}

/* mobile.css gives html 25px of top padding at phone widths; this page
   already clears the header with --vp-header-h, so that 25px only made
   the page scroll. */
@media (max-width: 768px) {
  html:has(body#pg-video) { padding-top: 0 !important; }
}

/* open mobile menu: the player goes inert underneath */
body#pg-video:has(.mobile-nav-overlay.active) .video-theater { pointer-events: none; }

@media (max-width: 1023.98px) {
  body#pg-video .video-bar { height: 44px; }
  /* The floating Home button sits over the bar's right end here; E-Book
     and the other video stay one tap away in the header's E-Canonis menu. */
  body#pg-video .video-bar-links { display: none; }
  /* Phones and tablets: the title, then the player at full width
     (16px gutters), centred in the height between the bar and the fixed
     footers. The body's padding already clears the header and footers, so
     a full-height flex body lets main, and the theater in it, fill the
     space left between them. The player is never taller than the height
     left under the header, bar, title and fixed footers (up to 62px), so
     it also fits a phone held sideways.
     --vp-rail is the strip kept under the bar for the Social / Back / Home
     row (12px gap + its 58px seats, see "THE RAIL LIES DOWN" below): the
     title starts under it rather than riding up into the buttons on a
     shorter tablet, and the player gives up that height to fit. */
  body#pg-video {
    --vp-pad: 16px;
    --vp-rail: 70px;
    --vp-fit-h: calc(100vh - var(--vp-header-h, 72px) - 44px - var(--vp-rail) - 62px - var(--vp-head-h) - 48px);
    --vp-frame-h: max(160px, min((100vw - 32px) * 9 / 16, var(--vp-fit-h)));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100vh;
  }
  @supports (height: 100dvh) {
    body#pg-video {
      --vp-fit-h: calc(100dvh - var(--vp-header-h, 72px) - 44px - var(--vp-rail) - 62px - var(--vp-head-h) - 48px);
      min-height: 100dvh;
    }
  }
  body#pg-video .video-page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  body#pg-video .video-theater {
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 0;
    /* !important: css/mobile.css sets every <section> to 40px 0 !important
       from 600 to 800px wide, which dropped this strip and the gutters the
       player is sized for */
    padding: calc(16px + var(--vp-rail)) 16px 16px !important;
  }
  body#pg-video .video-frame { border-radius: 12px; }
}

/* ── PHONE + TABLET: THE RAIL LIES DOWN, AS ON THE E-BOOK ─────────────────
   Home and Back stood down the right edge while Social sat on its own near
   the foot of the screen, over the player's corner. They now take the
   E-Book's arrangement (css/book.css, "THE RAIL LIES DOWN"): one row at the
   top left - Social, Back, Home, 66px apart (a 58px seat plus its 8px gap)
   - 12px under the video bar, with scroll-to-top at the bottom left under
   it. js/main.js mirrors the social flyout when there is no room to the
   left of its toggle, so it opens inward from the edge; --fs-row0 lets its
   first step clear Back and Home beside it. */
@media (max-width: 1023.98px) {
  body#pg-video .floating-social-btn,
  body#pg-video .floating-back-btn,
  body#pg-video .floating-home-btn:not(.floating-back-btn):not(.floating-social-btn) {
    /* 12px under the video bar, wherever it ends (js/video-page.js) */
    top: calc(var(--vp-bar-bottom, 101px) + 12px) !important;
    bottom: auto !important;
    right: auto !important;
  }
  body#pg-video .floating-social-btn,
  body#pg-video .scroll-to-top {
    left: max(14px, env(safe-area-inset-left)) !important;
    right: auto !important;
  }
  body#pg-video .floating-back-btn {
    left: calc(max(14px, env(safe-area-inset-left)) + 66px) !important;
  }
  body#pg-video .floating-home-btn:not(.floating-back-btn):not(.floating-social-btn) {
    left: calc(max(14px, env(safe-area-inset-left)) + 132px) !important;
  }
  body#pg-video .floating-social-group { --fs-row0: 74px; }
}
/* tablets: the rail's wider gutter */
@media (min-width: 601px) and (max-width: 1023.98px) {
  body#pg-video .floating-social-btn,
  body#pg-video .scroll-to-top {
    left: max(24px, env(safe-area-inset-left)) !important;
  }
  body#pg-video .floating-back-btn {
    left: calc(max(24px, env(safe-area-inset-left)) + 66px) !important;
  }
  body#pg-video .floating-home-btn:not(.floating-back-btn):not(.floating-social-btn) {
    left: calc(max(24px, env(safe-area-inset-left)) + 132px) !important;
  }
}

/* css/mobile.css pads <html> by 30px from 600 to 800px wide. On these pages
   it only pushed the video bar down from the header - and the Social / Back
   / Home row onto it - and ran the page 30px past the screen. */
@media (min-width: 600px) and (max-width: 800px) {
  html:has(body#pg-video) { padding-top: 0 !important; }
}