/* ============================================================
   DYUTAM INTEL — Demo player
   Click-to-play lazy iframe embedded in review content through
   wp:html blocks. The class hooks (.demo-player-container,
   .demo-thumbnail, .demo-play-button, .demo-iframe) are shared
   with post content across themes — do not rename them here.
   ============================================================ */
.demo-player-container{position:relative;width:100%;margin:34px 0}
.demo-player-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  background:var(--invert-bg);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.demo-thumbnail{position:absolute;inset:0;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.demo-thumbnail::before{content:"";position:absolute;inset:0;background:rgba(7,10,14,.52);transition:background .3s}
.demo-thumbnail:hover::before{background:rgba(7,10,14,.34)}
.demo-play-button{position:relative;z-index:2;appearance:none;border:none;cursor:pointer;
  font-family:var(--font-sans);font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#0e1116;background:rgba(255,255,255,.96);padding:16px 34px;border-radius:var(--r-pill);
  box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s,background .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.demo-play-button:hover,
.demo-play-button:active{background:#fff;transform:scale(1.04);box-shadow:0 6px 26px rgba(0,0,0,.45)}
.demo-disclaimer{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;margin:0;
  color:#fff;font-family:var(--font-sans);font-size:12px;line-height:1.5;text-align:center;
  padding:0 20px;max-width:90%;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.demo-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:none}
.demo-iframe.loaded{display:block}

/* Mobile portrait: slot demos render tall — give them the viewport. */
@media (max-width:768px){
  .demo-player-wrapper{padding-bottom:0;height:calc(100vw * 1.78);max-height:85vh}
  .demo-player-container{margin:22px 0}
  .demo-play-button{padding:13px 26px;font-size:13.5px}
  .demo-disclaimer{font-size:10.5px;bottom:10px;padding:0 10px}
}
@media (max-width:768px) and (orientation:landscape){
  .demo-player-wrapper{padding-bottom:56.25%;height:0;max-height:none}
}