/* ============================================================
   BIRO 404 — R23C /usluge/ hero background video (isolated)
   Simple autoplay/muted/loop background behind the existing
   .page-hero copy. Reuses graphite+amber tokens + left scrim
   for legibility. Video is seamless (palindrome). No watermark
   was found in the source, so NO cover overlay is added.
   Scoped entirely to .page-hero--video — no other page affected.
   ============================================================ */
.page-hero--video{
  position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(3.4rem,8vw,6.5rem);
  padding-bottom:clamp(3rem,6vw,5rem);
  min-height:clamp(30rem,64vh,40rem);
  display:flex;align-items:center;
  background:var(--bg);
}
.page-hero--video .ph-media{position:absolute;inset:0;z-index:0}
.page-hero--video .ph-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:64% center;display:block}

/* scrim: graphite from left + subtle top/bottom depth for text legibility */
.page-hero--video .ph-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(16,19,24,.95) 0%, rgba(16,19,24,.78) 34%, rgba(16,19,24,.30) 66%, rgba(16,19,24,.55) 100%),
    linear-gradient(180deg, rgba(16,19,24,.55) 0%, rgba(16,19,24,0) 24%, rgba(16,19,24,0) 60%, rgba(16,19,24,.65) 100%)}

.page-hero--video .wrap{position:relative;z-index:2;width:100%}
.page-hero--video h1{text-shadow:0 2px 34px rgba(0,0,0,.55)}
.page-hero--video .lead{text-shadow:0 1px 18px rgba(0,0,0,.5)}
.page-hero--video .breadcrumb{text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* mobile: keep the video but strengthen the scrim so copy stays crisp */
@media (max-width:767px){
  .page-hero--video{min-height:auto;padding-top:calc(var(--nav-h,64px) + 2.2rem)}
  .page-hero--video .ph-video{object-position:62% center}
  .page-hero--video .ph-scrim{
    background:
      linear-gradient(180deg, rgba(16,19,24,.62) 0%, rgba(16,19,24,.30) 30%, rgba(16,19,24,.40) 60%, rgba(16,19,24,.86) 100%),
      linear-gradient(90deg, rgba(16,19,24,.72) 0%, rgba(16,19,24,.30) 70%, rgba(16,19,24,.45) 100%)}
}

/* reduced motion / no-js: drop the video, keep the poster still */
@media (prefers-reduced-motion:reduce){
  .page-hero--video .ph-video{display:none}
}
html.no-js .page-hero--video .ph-video{display:none}