/* ====== Premium Title Overlay (Configurable) ====== */

.wsto-wrapper{
  position:relative !important;
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  transform: scale(var(--wsto-scale, 1));
  transform-origin: bottom center;
}

.wsto-wrapper img{ display:block; width:100%; height:auto; }

.wsto-bgthumb{ position:relative !important; overflow:hidden; }

a.wsto-has-title{
  position:relative !important;
  display:block;
  transform: scale(var(--wsto-scale, 1));
  transform-origin: bottom center;
}

.wsto-title{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  padding: calc(var(--wsto-pad, 10px) * 1) calc(var(--wsto-pad, 10px) * 1.2) calc(var(--wsto-pad, 10px) * 1.05);
  margin:0;

  max-height: var(--wsto-h, 34%);
  overflow:hidden;

  border-radius: 0 0 var(--wsto-r, 10px) var(--wsto-r, 10px);

  font-family: var(--wsto-font, inherit);
  font-weight: 800;
  font-size: var(--wsto-size, 18px);
  line-height: 1.18;
  letter-spacing: .2px;

  color: var(--wsto-text, #fff);

  background:
    linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,calc(var(--wsto-a, .78) * .55)) 34%,
      rgba(0,0,0,var(--wsto-a, .78)) 100%);

  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);

  text-shadow: 0 2px 10px rgba(0,0,0,.95);

  z-index: 99999;
  pointer-events: none;

  display:-webkit-box;
  -webkit-line-clamp: var(--wsto-lines, 2);
  -webkit-box-orient: vertical;
}

.wsto-title::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--wsto-bg,#c00000), rgba(255,255,255,0));
  opacity:.95;
}

.wsto-title::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 0 0 var(--wsto-r, 10px) var(--wsto-r, 10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none;
}

@media (max-width:768px){
  .wsto-title{
    font-size: calc(var(--wsto-size, 18px) - 2px);
    padding: calc(var(--wsto-pad, 10px) * .85) calc(var(--wsto-pad, 10px) * 1.0) calc(var(--wsto-pad, 10px) * .9);
    max-height: calc(var(--wsto-h, 34%) + 6%);
  }
  .wsto-title::before{ height:2px; }
}