/*
 * Final single-video layout:
 * - desktop meta left + actions right on same row
 * - head/actions constrained to player column
 * - description constrained to player column
 * - equal spacing with/without description
 * - mobile keeps stacked actions
 */

/* Base final spacing / mobile-stacked structure. */
.vv-video .vv-video-head{
  display:block!important;
  grid-template-columns:none!important;
  padding-bottom:3px!important;
}

.vv-video .vv-video-title{
  width:100%!important;
  min-width:0!important;
}

.vv-video .vv-video-actions{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin-top:9px!important;
  margin-bottom:0!important;
}

.vv-video .vv-video-actions .vv-video-action,
.vv-video .vv-video-actions .vv-favorite{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
}

/* Equal external spacing with / without description. */
.vv-video .vv-video-head + .vv-description{
  margin-top:6px!important;
  padding-top:16px!important;
}

.vv-video .vv-video-head + .vv-tax-wrap{
  margin-top:6px!important;
}

/* Desktop: meta left, actions right on same row. */
@media (min-width:981px){
  .vv-video .vv-video-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto!important;
    align-items:end!important;
    column-gap:18px!important;
    row-gap:0!important;
  }

  .vv-video .vv-video-title{
    width:auto!important;
    min-width:0!important;
    grid-column:1!important;
    grid-row:1!important;
  }

  .vv-video .vv-video-actions{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:end!important;
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
  }
}

/*
 * Wide desktop player-stage:
 * minmax(0,1fr) + 16px gap + 300px ad rail
 * => player/content column = total minus 316px.
 */
@media (min-width:1101px){
  .vv-video .vv-video-head,
  .vv-video .vv-description{
    width:calc(100% - 316px)!important;
    max-width:calc(100% - 316px)!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .vv-video .vv-video-head{
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  .vv-video .vv-video-actions{
    justify-self:end!important;
    max-width:100%!important;
  }
}